SHA256
13 lines
1.5 KiB
CSS
13 lines
1.5 KiB
CSS
:root { --z-overlay: 100; --z-dropdown: 110; --z-modal: 120; }
|
|
.dropdown-portal { pointer-events: none; }
|
|
.dropdown-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: auto; background: var(--scrim); }
|
|
.dropdown-menu { position: fixed; z-index: var(--z-dropdown); display: grid; gap: 2px; padding: 6px; min-width: 196px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); pointer-events: auto; }
|
|
.dropdown-menu__item { width: 100%; min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text-primary); font: inherit; font-size: .875rem; line-height: 1.4; text-align: left; cursor: pointer; }
|
|
.dropdown-menu__item:hover, .dropdown-menu__item.is-selected { background: var(--surface-selected); }
|
|
.dropdown-menu__item:active { background: var(--surface-selected); }
|
|
.dropdown-menu__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
|
|
.dropdown-menu__item.is-danger { color: var(--danger); }
|
|
.dropdown-menu__item:disabled { opacity: .5; cursor: not-allowed; }
|
|
.dropdown-menu__icon, .dropdown-menu__icon svg, .dropdown-menu__item > img { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; color: currentColor; }
|
|
.dropdown-menu__divider { height: 1px; margin: 4px 8px; background: var(--border-subtle); }
|