/* ========================================================================== Site-wide checkbox dropdown -------------------------------------------------------------------------- Built by createCheckboxDropdown() in static/js/utility_UI.js. .site-checkbox-dropdown__trigger borderless button with text + single down arrow .site-checkbox-dropdown__menu floating checkbox list attached to ========================================================================== */ .site-checkbox-dropdown__trigger { display: inline-flex; align-items: center; gap: 6px; width: 100%; max-width: 100%; min-width: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; padding: 3px 4px; text-align: left; } .site-checkbox-dropdown__trigger:hover, .site-checkbox-dropdown__trigger:focus-visible, .site-checkbox-dropdown__trigger.is-open { background: #eef7f5; outline: 0; } .site-checkbox-dropdown__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Single down arrow drawn with borders. */ .site-checkbox-dropdown__arrow { flex: 0 0 auto; width: 6px; height: 6px; margin: 0 2px 3px 0; border-right: 2px solid #087f73; border-bottom: 2px solid #087f73; transform: rotate(45deg); transition: transform 150ms linear; } .site-checkbox-dropdown__trigger.is-open .site-checkbox-dropdown__arrow { margin: 3px 2px 0 0; transform: rotate(-135deg); } .site-checkbox-dropdown__menu { position: fixed; z-index: 5000; display: flex; flex-direction: column; width: min(320px, calc(100vw - 16px)); max-height: min(320px, calc(100vh - 16px)); border: 1px solid #dbe5ee; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); color: #26384e; font-size: 13px; } .site-checkbox-dropdown__title { margin: 0; border-bottom: 1px solid #eef2f6; color: #718097; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 9px 12px 7px; text-transform: uppercase; } .site-checkbox-dropdown__list { overflow-y: auto; padding: 4px; } .site-checkbox-dropdown__option { display: flex; align-items: flex-start; gap: 8px; margin: 0; border-radius: 6px; cursor: pointer; font-weight: 600; padding: 7px 8px; } .site-checkbox-dropdown__option:hover { background: #f1f8f6; } .site-checkbox-dropdown__option input { flex: 0 0 auto; margin-top: 2px; accent-color: #087f73; } .site-checkbox-dropdown__option-text { display: grid; gap: 1px; min-width: 0; } .site-checkbox-dropdown__option-hint { color: #8a97a8; font-size: 11px; font-weight: 600; } .site-checkbox-dropdown__footer { display: flex; justify-content: flex-end; border-top: 1px solid #eef2f6; padding: 7px 8px; } .site-checkbox-dropdown__done { border: 0; border-radius: 999px; background: #087f73; color: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; padding: 5px 14px; } .site-checkbox-dropdown__done:hover, .site-checkbox-dropdown__done:focus-visible { background: #066a60; outline: 0; }