67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
@layer components {
|
|
.drop-indicator {
|
|
@apply fixed top-0 bottom-0 left-0 right-0;
|
|
@apply flex flex-col items-center justify-end;
|
|
@apply bg-black/50;
|
|
@apply backdrop-filter backdrop-blur-sm;
|
|
|
|
z-index: 1000;
|
|
|
|
> .content {
|
|
@apply w-full md:w-2/3 lg:w-1/2;
|
|
@apply border border-b-0 border-slate-200 dark:border-slate-600;
|
|
@apply bg-white dark:bg-slate-900;
|
|
@apply rounded-t-md;
|
|
@apply p-4;
|
|
}
|
|
|
|
&.opening {
|
|
animation-name: fadeIn;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
|
|
> .content {
|
|
animation-name: moveUp;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
}
|
|
|
|
&.closing {
|
|
animation-name: fadeOut;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
|
|
> .content {
|
|
animation-name: moveDown;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes moveUp {
|
|
0% {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes moveDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|