dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update toaster component styles for improved visual consistency and clarity

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-20 22:06:03 +07:00
parent df65a60c0d
commit 23aa357917
1 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
resources/css/app.css
View File

@ -175,31 +175,50 @@ @layer utilities {
} }
} }
/* sonner */ /* Base */
[data-sonner-toast][data-type="success"] { .toaster [data-sonner-toast] {
border-left: 4px solid rgb(34 197 94); background: hsl(var(--background)) !important;
border-top: 0; color: hsl(var(--foreground)) !important;
border-right: 0; border: 1px solid hsl(var(--border)) !important;
border-bottom: 0;
} }
[data-sonner-toast][data-type="error"] { /* Description */
border-left: 4px solid rgb(239 68 68); .toaster [data-description] {
border-top: 0; color: hsl(var(--muted-foreground)) !important;
border-right: 0;
border-bottom: 0;
} }
[data-sonner-toast][data-type="warning"] { /* Success */
border-left: 4px solid rgb(245 158 11); .toaster [data-sonner-toast][data-type="success"] {
border-top: 0; border-left: 4px solid rgb(34 197 94) !important;
border-right: 0;
border-bottom: 0;
} }
[data-sonner-toast][data-type="info"] { .toaster [data-sonner-toast][data-type="success"] [data-icon] {
border-left: 4px solid rgb(59 130 246); color: rgb(34 197 94) !important;
border-top: 0; }
border-right: 0;
border-bottom: 0; /* Error */
.toaster [data-sonner-toast][data-type="error"] {
border-left: 4px solid rgb(239 68 68) !important;
}
.toaster [data-sonner-toast][data-type="error"] [data-icon] {
color: rgb(239 68 68) !important;
}
/* Warning */
.toaster [data-sonner-toast][data-type="warning"] {
border-left: 4px solid rgb(245 158 11) !important;
}
.toaster [data-sonner-toast][data-type="warning"] [data-icon] {
color: rgb(245 158 11) !important;
}
/* Info */
.toaster [data-sonner-toast][data-type="info"] {
border-left: 4px solid rgb(59 130 246) !important;
}
.toaster [data-sonner-toast][data-type="info"] [data-icon] {
color: rgb(59 130 246) !important;
} }