Sha256: 787f801a2a98671826b7a38b423efabdaa8f46b6d2371bd784c961fa65cbbc53
Contents?: true
Size: 1.35 KB
Versions: 25
Compression:
Stored size: 1.35 KB
Contents
.dialog {
background-color: var(--color-bg);
border-radius: var(--rounded-lg);
border-width: var(--border);
box-shadow: var(--shadow-lg);
color: var(--color-text);
inline-size: var(--size-full);
margin: auto;
max-inline-size: var(--dialog-size, var(--max-i-lg));
&::backdrop {
background-color: rgba(0, 0, 0, .8);
}
/* Final state of exit animation and setup */
opacity: 0;
transform: var(--scale-95);
transition-behavior: allow-discrete;
transition-duration: var(--time-200);
transition-property: display, overlay, opacity, transform;
&::backdrop {
opacity: 0;
transition-behavior: allow-discrete;
transition-duration: var(--time-200);
transition-property: display, overlay, opacity;
}
/* Final state of entry animation */
&[open] { opacity: 1; transform: var(--scale-100); }
&[open]::backdrop { opacity: 1; }
/* Initial state of entry animation */
@starting-style {
&[open] { opacity: 0; transform: var(--scale-95); }
&[open]::backdrop { opacity: 0; }
}
/* Drawer component on mobile */
@media (width < 40rem) {
border-end-end-radius: 0;
border-end-start-radius: 0;
margin-block-end: 0;
max-inline-size: none;
}
}
.dialog__content {
padding: var(--size-6);
}
.dialog__close {
inset-block-start: var(--size-3);
inset-inline-end: var(--size-3);
position: absolute;
}
Version data entries
25 entries across 25 versions & 1 rubygems