53 lines
1.0 KiB
CSS
53 lines
1.0 KiB
CSS
dl.toasts {
|
|
@apply fixed top-4 right-4 z-100;
|
|
--toast-delay: 7s;
|
|
|
|
/* semantic info in a hidden title */
|
|
dt {
|
|
@apply h-0 invisible overflow-hidden;
|
|
|
|
&.success + dd {
|
|
@apply bg-green-500 text-primary;
|
|
}
|
|
|
|
&.error + dd {
|
|
@apply bg-red-500 text-primary;
|
|
}
|
|
|
|
&.info + dd {
|
|
@apply bg-cyan-500 text-primary;
|
|
}
|
|
}
|
|
|
|
/* toast itself */
|
|
dd {
|
|
@apply max-w-96 rounded-md px-4 py-3 translate-y-2 leading-tight font-medium;
|
|
animation:
|
|
toast-in 250ms ease-out forwards,
|
|
toast-out 300ms ease-in forwards;
|
|
animation-delay:
|
|
0ms,
|
|
var(--toast-delay);
|
|
}
|
|
}
|
|
|
|
.toast__dismiss{
|
|
color: rgba(255,255,255,.85);
|
|
text-decoration: underline;
|
|
font-size: .875rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
@keyframes toast-in {
|
|
to {
|
|
opacity: 1;
|
|
translate: 0;
|
|
}
|
|
}
|
|
@keyframes toast-out {
|
|
to {
|
|
opacity: 0;
|
|
translate: 0 -0.5rem;
|
|
}
|
|
}
|