_dropdown.scss 2.1 KB

123456789101112
  1. /* Shared app dropdowns; native selects remain the form value source. */
  2. 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%); }
  3. 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; }
  4. body button.xs-dropdown-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
  5. 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); }
  6. body button.xs-dropdown-trigger:disabled { cursor: not-allowed; opacity: .55; }
  7. body button.xs-dropdown-trigger:focus-visible, .xs-dropdown-menu button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  8. 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%); }
  9. 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; }
  10. body .xs-dropdown-menu button[aria-selected="true"], body .xs-dropdown-menu button:hover:not(:disabled) { color: var(--brand-strong); background: var(--brand-pale); }
  11. body .xs-dropdown-menu button:disabled { opacity: .45; cursor: not-allowed; }
  12. .xs-dropdown-menu p { margin: 10px; color: var(--ink-soft); }