88 lines
1.4 KiB
CSS
88 lines
1.4 KiB
CSS
@layer components {
|
|
.modal {
|
|
@apply fixed top-0 bottom-0 left-0 right-0;
|
|
@apply flex flex-col items-center md:justify-center p-4 md:p-0;
|
|
@apply bg-black/50;
|
|
@apply backdrop-filter backdrop-blur-sm;
|
|
|
|
z-index: 1000;
|
|
|
|
> .underlay {
|
|
@apply absolute top-0 left-0 right-0 bottom-0;
|
|
z-index: -1;
|
|
}
|
|
|
|
> .content {
|
|
@apply w-full md:w-2/3 lg:w-1/2;
|
|
@apply border border-slate-200 dark:border-slate-600;
|
|
@apply bg-white dark:bg-slate-900;
|
|
@apply rounded-md shadow-md;
|
|
@apply p-4;
|
|
}
|
|
|
|
&.opening {
|
|
animation-name: fadeIn;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
|
|
> .content {
|
|
animation-name: zoomIn;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
}
|
|
|
|
&.closing {
|
|
animation-name: fadeOut;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
|
|
> .content {
|
|
animation-name: zoomOut;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
0% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|