Andy Smith
49 lines
998 B
CSS
49 lines
998 B
CSS
@layer components {
|
|
/* Prevent page scrolling when modal dialog is open */
|
|
html:has(dialog:modal) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
:is(.dialog) {
|
|
border: 0;
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
transform-origin: top center;
|
|
transition: var(--dialog-duration) allow-discrete;
|
|
transition-property: display, opacity, overlay, transform;
|
|
|
|
&::backdrop {
|
|
background-color: var(--color-black);
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
transition: var(--dialog-duration) allow-discrete;
|
|
transition-property: display, opacity, overlay;
|
|
}
|
|
|
|
&[open] {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
|
|
&::backdrop {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@starting-style {
|
|
&[open] {
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
}
|
|
|
|
&[open]::backdrop {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Ensure padding from viewport edges */
|
|
.dialog.panel {
|
|
max-inline-size: calc(100vw - var(--inline-space-double) * 2);
|
|
}
|
|
}
|