Sha256: c461336442c6bc998635b7e6684a96acde5af4f2948b952f005bb73d37d21c42
Contents?: true
Size: 1.28 KB
Versions: 3
Compression:
Stored size: 1.28 KB
Contents
.dialog {
background-color: var(--color-bg);
border-width: var(--border);
border-radius: var(--rounded-lg);
box-shadow: var(--shadow-lg);
color: var(--color-text);
inline-size: var(--size-full);
margin: auto;
max-inline-size: var(--width-lg);
padding: var(--size-6);
&::backdrop {
background-color: rgba(0, 0, 0, .8);
}
/* Setup animation */
opacity: 0;
transform: var(--scale-95);
transition-behavior: allow-discrete;
transition-duration: var(--time-150);
transition-property: display overlay opacity transform;
&::backdrop {
opacity: 0;
transition-behavior: allow-discrete;
transition-duration: var(--time-150);
transition-property: display overlay opacity;
}
/* In animation */
&:popover-open {
opacity: 1; transform: var(--scale-100);
}
&:popover-open::backdrop {
opacity: 1;
}
/* Out animation */
@starting-style {
&:popover-open {
opacity: 0; transform: var(--scale-95);
}
&:popover-open::backdrop {
opacity: 0;
}
}
/* Small screens */
@media (width < 40rem) {
border-radius: 0;
}
}
.dialog__close {
position: absolute;
inset: var(--size-4) var(--size-4) auto auto;
}
/* Prevent page scroll when dialog is open */
html:has(.dialog:popover-open) {
overflow: hidden;
}
Version data entries
3 entries across 3 versions & 1 rubygems