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 */
[data-sonner-toast][data-type="success"] {
border-left: 4px solid rgb(34 197 94);
border-top: 0;
border-right: 0;
border-bottom: 0;
/* Base */
.toaster [data-sonner-toast] {
background: hsl(var(--background)) !important;
color: hsl(var(--foreground)) !important;
border: 1px solid hsl(var(--border)) !important;
}
[data-sonner-toast][data-type="error"] {
border-left: 4px solid rgb(239 68 68);
border-top: 0;
border-right: 0;
border-bottom: 0;
/* Description */
.toaster [data-description] {
color: hsl(var(--muted-foreground)) !important;
}
[data-sonner-toast][data-type="warning"] {
border-left: 4px solid rgb(245 158 11);
border-top: 0;
border-right: 0;
border-bottom: 0;
/* Success */
.toaster [data-sonner-toast][data-type="success"] {
border-left: 4px solid rgb(34 197 94) !important;
}
[data-sonner-toast][data-type="info"] {
border-left: 4px solid rgb(59 130 246);
border-top: 0;
border-right: 0;
border-bottom: 0;
.toaster [data-sonner-toast][data-type="success"] [data-icon] {
color: rgb(34 197 94) !important;
}
/* 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;
}