Refine Sonner layout and timing
This commit is contained in:
@@ -197,6 +197,37 @@ html[lang="ar"] {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
[data-sonner-toaster][data-x-position="center"] {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: fit-content;
|
||||
min-width: 0;
|
||||
max-width: min(calc(100vw - 2rem), 32rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
[data-sonner-toaster][data-x-position="center"] {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.hero-noise {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
|
||||
|
||||
Reference in New Issue
Block a user