Sha256: 7a3fc40ce6be7a42826102fbdbc0cce6a3d1953e975b16285c3eb4e4dfb2c17e
Contents?: true
Size: 1.3 KB
Versions: 39
Compression:
Stored size: 1.3 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(--max-i-lg);
&::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 */
&[open] {
opacity: 1; transform: var(--scale-100);
}
&[open]::backdrop {
opacity: 1;
}
/* Out 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-4);
inset-inline-end: var(--size-4);
position: absolute;
}
Version data entries
39 entries across 39 versions & 1 rubygems