Complete 4.3.1: Notification System Redesign - Enhanced toast notification system with variants, queue management, and accessibility improvements
This commit is contained in:
parent
54db215848
commit
60a5cbb576
4 changed files with 746 additions and 7 deletions
|
|
@ -1927,9 +1927,310 @@ a:active {
|
|||
}
|
||||
|
||||
/* =================================================================
|
||||
NOTIFICATIONS & TOASTS
|
||||
NOTIFICATION SYSTEM - Enhanced with Variants & Queue
|
||||
================================================================= */
|
||||
|
||||
/* Notification container for stacking multiple notifications */
|
||||
.notifications-container {
|
||||
position: fixed;
|
||||
top: var(--spacing-5);
|
||||
right: var(--spacing-5);
|
||||
z-index: var(--z-toast);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3);
|
||||
align-items: flex-end;
|
||||
max-width: min(400px, calc(100vw - var(--spacing-5) * 2));
|
||||
}
|
||||
|
||||
.notifications-container--bottom {
|
||||
top: auto;
|
||||
bottom: var(--spacing-5);
|
||||
}
|
||||
|
||||
.notifications-container--center {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Base notification styles */
|
||||
.notification {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
padding: var(--spacing-4);
|
||||
border-radius: var(--border-radius-lg);
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-normal);
|
||||
box-shadow: var(--elevation-4);
|
||||
border: 1px solid transparent;
|
||||
min-width: 300px;
|
||||
max-width: 100%;
|
||||
pointer-events: auto;
|
||||
transition: all var(--transition-fast);
|
||||
animation: notification-slide-in var(--transition-normal) ease-out;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.notification.exiting {
|
||||
animation: notification-slide-out 0.3s ease-in;
|
||||
}
|
||||
|
||||
/* Notification variants */
|
||||
.notification--success {
|
||||
background: var(--color-success-container);
|
||||
color: var(--color-on-success-container);
|
||||
border-color: var(--color-success-outline);
|
||||
}
|
||||
|
||||
.notification--success::before {
|
||||
content: '✓';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--color-success);
|
||||
color: var(--color-on-success);
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification--error {
|
||||
background: var(--color-error-container);
|
||||
color: var(--color-on-error-container);
|
||||
border-color: var(--color-error-outline);
|
||||
}
|
||||
|
||||
.notification--error::before {
|
||||
content: '✕';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--color-error);
|
||||
color: var(--color-on-error);
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification--warning {
|
||||
background: var(--color-warning-container);
|
||||
color: var(--color-on-warning-container);
|
||||
border-color: var(--color-warning-outline);
|
||||
}
|
||||
|
||||
.notification--warning::before {
|
||||
content: '⚠';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--color-warning);
|
||||
color: var(--color-on-warning);
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification--info {
|
||||
background: var(--color-primary-container);
|
||||
color: var(--color-on-primary-container);
|
||||
border-color: var(--color-primary-outline);
|
||||
}
|
||||
|
||||
.notification--info::before {
|
||||
content: 'ℹ';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification--default {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-on-surface);
|
||||
border-color: var(--color-outline-variant);
|
||||
}
|
||||
|
||||
/* Notification content area */
|
||||
.notification__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notification__title {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--spacing-1);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.notification__message {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-normal);
|
||||
}
|
||||
|
||||
/* Notification actions */
|
||||
.notification__actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-2);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.notification__action {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-1);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
transition: all var(--transition-fast);
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notification__action:hover {
|
||||
opacity: 1;
|
||||
background: rgba(var(--color-on-surface-rgb), 0.1);
|
||||
}
|
||||
|
||||
.notification__action:focus-visible {
|
||||
outline: 2px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Progress indicator for auto-dismissing notifications */
|
||||
.notification__progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: rgba(var(--color-on-surface-rgb), 0.2);
|
||||
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notification__progress-bar {
|
||||
height: 100%;
|
||||
background: currentColor;
|
||||
animation: notification-progress linear forwards;
|
||||
}
|
||||
|
||||
/* Notification animations */
|
||||
@keyframes notification-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notification-slide-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
max-height: 200px;
|
||||
margin-bottom: var(--spacing-3);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%) scale(0.9);
|
||||
max-height: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notification-progress {
|
||||
from { width: 100%; }
|
||||
to { width: 0%; }
|
||||
}
|
||||
|
||||
/* Notification enter animations for different positions */
|
||||
.notifications-container--bottom .notification {
|
||||
animation: notification-slide-up var(--transition-normal) ease-out;
|
||||
}
|
||||
|
||||
.notifications-container--center .notification {
|
||||
animation: notification-fade-in var(--transition-normal) ease-out;
|
||||
}
|
||||
|
||||
@keyframes notification-slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notification-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: calc(var(--breakpoint-sm) - 1px)) {
|
||||
.notifications-container {
|
||||
top: var(--spacing-4);
|
||||
right: var(--spacing-4);
|
||||
left: var(--spacing-4);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.notifications-container--center {
|
||||
right: var(--spacing-4);
|
||||
left: var(--spacing-4);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.notification__content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy toast support - deprecated, use notifications instead */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: var(--spacing-5);
|
||||
|
|
@ -1949,6 +2250,11 @@ a:active {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast:active {
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
/* Video player notification badge - unchanged */
|
||||
.video-player__notification-badge {
|
||||
position: absolute;
|
||||
top: calc(var(--spacing-2) * -1);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue