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