| 123456789101112 |
- /* Shared app dropdowns; native selects remain the form value source. */
- select.xs-dropdown-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; clip-path: inset(50%); }
- body button.xs-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 11px 20px 11px 12px; margin: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface, white); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
- body button.xs-dropdown-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
- body button.xs-dropdown-trigger > i { flex: 0 0 8px; width: 8px; height: 8px; margin: -4px 2px 0 0; border: solid var(--ink-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); }
- body button.xs-dropdown-trigger:disabled { cursor: not-allowed; opacity: .55; }
- body button.xs-dropdown-trigger:focus-visible, .xs-dropdown-menu button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
- body .xs-dropdown-menu { position: fixed; z-index: 20000; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, white); box-shadow: 0 10px 28px rgb(20 53 45 / 18%); }
- body .xs-dropdown-menu button { display: block; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; font: inherit; font-size: 14px; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
- body .xs-dropdown-menu button[aria-selected="true"], body .xs-dropdown-menu button:hover:not(:disabled) { color: var(--brand-strong); background: var(--brand-pale); }
- body .xs-dropdown-menu button:disabled { opacity: .45; cursor: not-allowed; }
- .xs-dropdown-menu p { margin: 10px; color: var(--ink-soft); }
|