399 lines
11 KiB
CSS
399 lines
11 KiB
CSS
/* =================================================================
|
|
ANIMATIONS
|
|
================================================================= */
|
|
|
|
/* Keyframe definitions */
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.8; transform: scale(1.05); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-4px); }
|
|
60% { transform: translateY(-2px); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes progress-fill {
|
|
0% { width: 0%; }
|
|
100% { width: var(--progress-fill-percent, 100%); }
|
|
}
|
|
|
|
/* =================================================================
|
|
SVG Icon System
|
|
================================================================= */
|
|
|
|
.icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1em;
|
|
height: 1em;
|
|
/* Smooth transitions for hover effects */
|
|
transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: currentColor;
|
|
transition: inherit;
|
|
}
|
|
|
|
/* Icon Definitions */
|
|
.icon-refresh {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.icon-refresh::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11.356 2a8.001 8.001 0 01-15.356 2M4 4v5h.582M4.582 9A8.003 8.003 0 019.582 9'%3E%3C/svg%3E") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-baseball {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.icon-baseball::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'%3E%3C/svg%3E") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-chat {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.icon-chat::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'%3E%3C/svg%3E") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-users {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.icon-users::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM6.5 9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'%3E%3C/svg%3E") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-wave {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.icon-wave::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16l-4-4m0 0l4-4m-4 4h18'%3E%3C/svg%3E") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* =================================================================
|
|
ICON SIZE MODIFIERS
|
|
================================================================= */
|
|
|
|
/* Extra small icons (12px) */
|
|
.icon-xs {
|
|
width: var(--icon-size-xs);
|
|
height: var(--icon-size-xs);
|
|
}
|
|
|
|
/* Small icons (16px) - Default fallback */
|
|
.icon-sm {
|
|
width: var(--icon-size-sm);
|
|
height: var(--icon-size-sm);
|
|
}
|
|
|
|
/* Medium icons (20px) */
|
|
.icon-md {
|
|
width: var(--icon-size-md);
|
|
height: var(--icon-size-md);
|
|
}
|
|
|
|
/* Large icons (24px) */
|
|
.icon-lg {
|
|
width: var(--icon-size-lg);
|
|
height: var(--icon-size-lg);
|
|
}
|
|
|
|
/* Extra large icons (32px) */
|
|
.icon-xl {
|
|
width: var(--icon-size-xl);
|
|
height: var(--icon-size-xl);
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE ICON SCALING
|
|
================================================================= */
|
|
|
|
/* Responsive size variants that scale with viewport */
|
|
.icon-responsive {
|
|
--current-icon-size: var(--icon-size-sm);
|
|
|
|
width: var(--current-icon-size);
|
|
height: var(--current-icon-size);
|
|
}
|
|
|
|
.icon-responsive-xs {
|
|
--current-icon-size: var(--icon-size-responsive-xs);
|
|
|
|
width: var(--current-icon-size);
|
|
height: var(--current-icon-size);
|
|
}
|
|
|
|
.icon-responsive-sm {
|
|
--current-icon-size: var(--icon-size-responsive-sm);
|
|
|
|
width: var(--current-icon-size);
|
|
height: var(--current-icon-size);
|
|
}
|
|
|
|
.icon-responsive-md {
|
|
--current-icon-size: var(--icon-size-responsive-md);
|
|
|
|
width: var(--current-icon-size);
|
|
height: var(--current-icon-size);
|
|
}
|
|
|
|
.icon-responsive-lg {
|
|
--current-icon-size: var(--icon-size-responsive-lg);
|
|
|
|
width: var(--current-icon-size);
|
|
height: var(--current-icon-size);
|
|
}
|
|
|
|
.icon-responsive-xl {
|
|
--current-icon-size: var(--icon-size-responsive-xl);
|
|
|
|
width: var(--current-icon-size);
|
|
height: var(--current-icon-size);
|
|
}
|
|
|
|
/* =================================================================
|
|
ACCESSIBILITY - Screen Reader Support
|
|
================================================================= */
|
|
|
|
/* Screen reader only text - hide visually but available to assistive tech */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* Screen reader only - but show when focused for keyboard users */
|
|
.sr-only:focus {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
background: var(--color-surface);
|
|
color: var(--color-on-surface);
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--elevation-3);
|
|
z-index: var(--z-tooltip);
|
|
}
|
|
|
|
/* =================================================================
|
|
FOCUS INDICATORS FOR ICON CONTROLS
|
|
================================================================= */
|
|
|
|
/* Base focus styles for interactive icons */
|
|
.icon-interactive:focus {
|
|
outline: 2px solid var(--color-focus);
|
|
outline-offset: 2px;
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
/* Enhanced focus ring that matches design system */
|
|
.icon-focus-ring {
|
|
position: relative;
|
|
}
|
|
|
|
.icon-focus-ring:focus::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
border: 2px solid var(--color-focus);
|
|
border-radius: var(--border-radius-md);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* =================================================================
|
|
ANIMATED ICONS
|
|
================================================================= */
|
|
|
|
/* Loading States and Spinners */
|
|
.icon-loading,
|
|
.icon-refresh.icon-loading {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.icon-spinner {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.icon-spinner::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid var(--color-primary-light);
|
|
border-top: 2px solid var(--color-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Micro-interaction Animations */
|
|
.icon-pulse {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Applied when element is being updated or refreshed */
|
|
.icon-bounce {
|
|
animation: bounce 1s ease-in-out infinite;
|
|
}
|
|
|
|
/* Smooth fade in for new icons */
|
|
.icon-fade-in {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
/* =================================================================
|
|
PROGRESS INDICATORS
|
|
================================================================= */
|
|
|
|
.progress-indicator {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: var(--color-surface-variant);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-indicator::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 0%;
|
|
background-color: var(--color-primary);
|
|
border-radius: 2px;
|
|
animation: progress-fill 2s ease-out;
|
|
}
|
|
|
|
/* Customizable progress with CSS variable */
|
|
.progress-indicator-custom {
|
|
--progress-fill-percent: 75%;
|
|
}
|
|
|
|
.progress-indicator-custom::after {
|
|
animation: progress-fill var(--progress-duration, 1s) ease-out;
|
|
}
|
|
|
|
/* =================================================================
|
|
HOVER STATE ANIMATIONS
|
|
================================================================= */
|
|
|
|
/* Base hover effects for interactive icons */
|
|
.icon:hover,
|
|
.icon-interactive:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Specific hover effects for different icon types */
|
|
.icon-refresh:hover {
|
|
color: var(--color-accent);
|
|
animation: spin 0.5s ease-in;
|
|
}
|
|
|
|
.icon-chat:hover {
|
|
transform: scale(1.1) translateY(-1px);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.icon-baseball:hover {
|
|
animation: bounce 0.6s ease-in-out;
|
|
}
|
|
|
|
.icon-users:hover {
|
|
transform: scale(1.05) translateY(-1px);
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.icon-wave:hover {
|
|
transform: translateX(2px);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Interactive button icons - more pronounced effects */
|
|
.icon-button:hover {
|
|
transform: scale(1.15);
|
|
filter: brightness(1.2);
|
|
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
/* Icon sets with coordinated hover effects */
|
|
.icon-group .icon:hover {
|
|
z-index: 1;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Override defaults for specific icon types if needed */
|
|
/* Add icon-specific overrides here as needed */
|