/* pe-dropdown - generic admin dropdown component (3 modes: simple/multi/creatable). * * Visual base ported from the original campaign-type-widget.css. All * generic dropdown styling lives here; addon-specific overrides remain * in the addon's own stylesheet. Cross-browser uniform: zero reliance on * native is also full-width). Stays a sibling-friendly inline-block but removes both the cap and the implicit content-fit. */ .pe-dropdown--block { display: block; width: 100%; max-width: none; } .pe-dropdown.is-disabled { opacity: 0.6; pointer-events: none; } .pe-dropdown.is-disabled .pe-dropdown__toggle { cursor: not-allowed; } .pe-dropdown.is-disabled .pe-dropdown__menu { display: none !important; } /* --- Toggle button --------------------------------------------------- */ .pe-dropdown__toggle { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 30px; padding: 3px 10px; background: #fff; border: 1px solid #8c8f94; border-radius: 4px; color: #2c3338; font-size: 13px; line-height: 2; cursor: pointer; box-shadow: 0 0 0 transparent; transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; /* Reset native button defaults that bleed into other contexts. */ margin: 0; text-align: left; font-family: inherit; } .pe-dropdown__toggle:hover { border-color: #646970; } .pe-dropdown__toggle:focus, .pe-dropdown.is-open .pe-dropdown__toggle { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: 2px solid transparent; } .pe-dropdown__toggle[disabled] { background: #f6f7f7; color: #8c8f94; cursor: not-allowed; } .pe-dropdown__current-label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pe-dropdown__current-label[data-placeholder="1"] { color: #8c8f94; } .pe-dropdown__caret { flex: 0 0 auto; margin-left: 8px; color: #646970; font-size: 14px; line-height: 1; } /* --- Menu ------------------------------------------------------------ */ .pe-dropdown__menu { /* Position and coordinates are written inline by _placeMenu() at open time. While open: position:fixed + viewport-coord top/left, after the menu has been portaled to . While closed (still attached to the dropdown root): hidden via [hidden] below; the position declaration here is a harmless default. z-index 100150 wins over jQuery UI dialogs (~100102) and stays well below page-level toasts (999999). */ position: fixed; z-index: 100150; /* min-width: max-content lets the menu grow beyond the toggle width when an option label is wider. Inline minWidth set by _placeMenu() matches the toggle width as a baseline; CSS max-content allows further growth up to the cap. The 360px cap matches the dropdown root's max-width so menus stay aligned with the visual rhythm. */ min-width: max-content; max-width: 360px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #dcdcde; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 4px 0; } .pe-dropdown__menu[hidden] { display: none; } .pe-dropdown__search-row { padding: 6px 10px 8px; border-bottom: 1px solid #f0f0f1; margin-bottom: 4px; position: sticky; top: 0; background: #fff; z-index: 1; } .pe-dropdown__search { width: 100%; box-sizing: border-box; padding: 4px 8px; font-size: 13px; border: 1px solid #dcdcde; border-radius: 3px; background: #fff; color: #2c3338; } .pe-dropdown__search:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; } /* --- Options --------------------------------------------------------- */ .pe-dropdown__options { /* Container for option rows. Dedicated wrapper so the search bar can sit above without participating in the keyboard-focus list. */ } .pe-dropdown__option { display: block; padding: 8px 12px 8px 28px; position: relative; cursor: pointer; border: 0; outline: none; } .pe-dropdown__option.is-disabled { cursor: not-allowed; color: #8c8f94; } .pe-dropdown__option.is-disabled .pe-dropdown__option-label { color: #8c8f94; } .pe-dropdown__option:hover, .pe-dropdown__option:focus { background: #f0f0f1; } .pe-dropdown__option.is-disabled:hover, .pe-dropdown__option.is-disabled:focus { background: transparent; } /* Selected state - simple/creatable: check glyph in left gutter. V16.c.5-fixes: scoped via the menu's role + absence of aria-multiselectable rather than via the .pe-dropdown--{mode} root class, because the menu is portaled to on open and loses its .pe-dropdown ancestor (V16.c.3.b1.duodecies portal refactor). */ .pe-dropdown__menu[role="listbox"]:not([aria-multiselectable="true"]) .pe-dropdown__option.is-selected::before { content: '\2713'; position: absolute; left: 10px; top: 8px; color: #2271b1; font-weight: bold; } /* Multi mode: checkbox visual indicator in the gutter. Scoped via aria-multiselectable on the portaled menu (same reason as above). */ .pe-dropdown__menu[aria-multiselectable="true"] .pe-dropdown__option-check { position: absolute; left: 10px; top: 10px; width: 14px; height: 14px; border: 1px solid #8c8f94; border-radius: 2px; background: #fff; box-sizing: border-box; } .pe-dropdown__menu[aria-multiselectable="true"] .pe-dropdown__option.is-selected .pe-dropdown__option-check { background: #2271b1; border-color: #2271b1; } .pe-dropdown__menu[aria-multiselectable="true"] .pe-dropdown__option.is-selected .pe-dropdown__option-check::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Multi mode: also tint the row of selected items so the checked state is unmistakable when scanning the menu - a checkbox alone is easy to miss against a long list. */ .pe-dropdown__menu[aria-multiselectable="true"] .pe-dropdown__option.is-selected { background: #f0f6fc; } .pe-dropdown__menu[aria-multiselectable="true"] .pe-dropdown__option.is-selected:hover, .pe-dropdown__menu[aria-multiselectable="true"] .pe-dropdown__option.is-selected:focus { background: #e7f1f9; } /* V16.c.7 - optgroup support. Group header is non-clickable, visually distinct, and inserts a top border on subsequent groups so sections read as separate units. */ .pe-dropdown__group { display: block; } .pe-dropdown__group.is-filtered-out { display: none; } .pe-dropdown__group-header { padding: 8px 12px 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #50575e; background: #f6f7f7; cursor: default; user-select: none; } .pe-dropdown__group + .pe-dropdown__group .pe-dropdown__group-header { border-top: 1px solid #dcdcde; } /* Indent options inside a group so the section structure is clear. Multi mode still has its absolute-positioned checkbox at left:10px, which is inside the indent gutter - keep it visible. */ .pe-dropdown__option--in-group { padding-left: 36px; } .pe-dropdown__option-label { display: block; font-weight: 600; color: #1d2327; font-size: 13px; } .pe-dropdown__option-description { display: block; margin-top: 2px; color: #646970; font-size: 12px; line-height: 1.4; } /* Discreet inline info marker (Lucide info SVG) at the end of an option. Hover-only explanation via the native title attribute - no JS layer. SVG sizing is set per-call-site via width/height attributes; the span only handles positioning and the muted color via currentColor. */ .pe-dropdown__option-info { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; color: #8c8f94; cursor: help; } .pe-dropdown__option-label { padding-right: 22px; } /* Filtered-out options (hidden by JS during search). */ .pe-dropdown__option.is-filtered-out { display: none; } /* --- Create row (creatable mode only) -------------------------------- */ .pe-dropdown__create-row { display: flex; align-items: center; width: 100%; padding: 10px 12px; margin: 4px 0 0; border: 0; border-top: 1px solid #dcdcde; background: transparent; color: #2271b1; font-weight: 600; font-size: 13px; line-height: 1.4; cursor: pointer; outline: none; text-align: left; font-family: inherit; } .pe-dropdown__create-row:hover, .pe-dropdown__create-row:focus { background: #f0f0f1; } .pe-dropdown__create-icon { display: inline-block; width: 16px; margin-right: 4px; font-weight: bold; text-align: center; } .pe-dropdown__create-label { /* No special styling beyond the row's. */ } /* --- Empty-results note (set by JS when search yields nothing) ------- */ .pe-dropdown__empty { padding: 10px 12px; color: #646970; font-size: 13px; font-style: italic; } /* --- Accessibility --------------------------------------------------- */ .pe-dropdown__option:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; }