NonInventPurchasingSystem/CPRNIMS.WebApps/wwwroot/css/toast-notifications.css
2026-01-20 07:44:30 +08:00

123 lines
2.1 KiB
CSS

.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
max-width: 400px;
}
/* Custom Toast Styles */
.custom-toast {
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-left: 4px solid;
animation: slideInRight 0.3s ease-out;
}
.custom-toast.success {
border-left-color: #28a745;
background-color: #f8fff9;
}
.custom-toast.error {
border-left-color: #dc3545;
background-color: #fff5f5;
}
.custom-toast.warning {
border-left-color: #ffc107;
background-color: #fffbf0;
}
.custom-toast.info {
border-left-color: #17a2b8;
background-color: #f0f9ff;
}
.toast-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 0.75rem;
}
.toast-body {
padding: 0.75rem;
font-size: 0.9rem;
}
.toast-icon {
margin-right: 8px;
font-size: 1.1rem;
}
.toast-icon.success {
color: #28a745;
}
.toast-icon.error {
color: #dc3545;
}
.toast-icon.warning {
color: #ffc107;
}
.toast-icon.info {
color: #17a2b8;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
.toast-slide-out {
animation: slideOutRight 0.3s ease-in forwards;
}
/* Progress bar for auto-dismiss */
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: currentColor;
opacity: 0.3;
transition: width linear;
}
.custom-toast.success .toast-progress {
background-color: #28a745;
}
.custom-toast.error .toast-progress {
background-color: #dc3545;
}
.custom-toast.warning .toast-progress {
background-color: #ffc107;
}
.custom-toast.info .toast-progress {
background-color: #17a2b8;
}