Sha256: 31fce099f8dac2dc99b6772f3cf43e3fb05db21fd44b689fcef06486bb6b6603
Contents?: true
Size: 1.27 KB
Versions: 6
Compression:
Stored size: 1.27 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(--dialog-width, 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 */
&[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;
}
}
@media (width < 40rem) {
border-end-end-radius: 0;
border-end-start-radius: 0;
margin-block-end: 0;
max-inline-size: none;
}
}
.dialog__close {
inset-block-start: var(--size-4);
inset-inline-end: var(--size-4);
position: absolute;
}
Version data entries
6 entries across 6 versions & 1 rubygems