54 lines
1.4 KiB
CSS
54 lines
1.4 KiB
CSS
dialog {
|
|
@apply grid fixed top-0 right-0 bottom-0 left-0 m-0 p-0 pointer-events-none;
|
|
@apply justify-items-center items-start bg-transparent opacity-0 invisible;
|
|
@apply w-full h-full max-w-full max-h-full overflow-y-hidden;
|
|
background-color: rgba(26, 26, 26, 0.75);
|
|
backdrop-filter: blur(0.25rem);
|
|
grid-template-rows: minmax(20dvh, 2rem) 1fr;
|
|
transition:
|
|
opacity 150ms cubic-bezier(0,0,.2,1),
|
|
visibility 150ms cubic-bezier(0,0,.2,1);
|
|
z-index: 100;
|
|
|
|
#modal {
|
|
@apply relative rounded-lg bg-white border-gray-200 p-0;
|
|
@apply flex flex-col items-start col-start-1 row-start-2 translate-y-4;
|
|
@apply overscroll-contain overflow-y-auto;
|
|
max-height: calc(100vh - 5em);
|
|
width: 91.666667%;
|
|
max-width: 36rem;
|
|
transition: all 150ms cubic-bezier(0,0,.2,1);
|
|
box-shadow: #00000040 0 1.5rem 4rem -0.5rem;
|
|
|
|
> form {
|
|
@apply absolute top-4 right-4;
|
|
}
|
|
|
|
> .content {
|
|
@apply w-full;
|
|
|
|
/* modal header */
|
|
h2 {
|
|
@apply pr-12;
|
|
}
|
|
}
|
|
}
|
|
|
|
&::backdrop {
|
|
display: none;
|
|
}
|
|
|
|
&[open] {
|
|
@apply opacity-100 visible;
|
|
pointer-events: inherit;
|
|
|
|
#modal {
|
|
@apply translate-y-0;
|
|
}
|
|
|
|
&::backdrop {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
}
|