/* ======================================================================== LUCIDE ICON PICKER MODAL ------------------------------------------------------------------------ Full-screen picker with a category sidebar + searchable icon grid. Opened from any TomSelect of class .dmu-select-icon — the hand-off wiring lives in /js/modules/select-inputs.js, the rendering in /js/modules/lucide-picker.js. Design choices to be aware of when touching this file: - Fixed cell heights via `grid-auto-rows`. Without that, one cell with a long wrapping name (e.g. "align-vertical-distribute-around") stretches its whole grid row, making the grid look ragged. - Explicit colors (not CSS-var-only) on the icon stroke + cell text. The portal's theme vars cascade fine in normal pages but the modal portal lives directly under and a missing variable on some themes left every stroke as currentColor=transparent, so icons "disappeared" even though they were in the DOM. Belt-and- suspenders: var() with a hardcoded color fallback. - The modal's own scroll lives in `.dmu-lucide-picker__grid-wrap` (the right pane). Bootstrap's `modal-dialog-scrollable` is NOT applied — it gives .modal-body `overflow-y: auto` which fights our two-pane flex layout. ======================================================================== */ /* ---- Dialog sizing ------------------------------------------------------ */ .dmu-lucide-picker .dmu-lucide-picker__dialog { max-width: min(1240px, calc(100vw - 32px)); height: 92vh; max-height: 92vh; /* Belt-and-suspenders: if `.modal-dialog-centered` ever gets added back to the markup, its min-height would override max-height and eat the bottom margin. Forcing min-height back to auto restores the 4vh-top / 4vh-bottom symmetry we set via margin below. */ min-height: auto; margin: 4vh auto; } .dmu-lucide-picker .dmu-lucide-picker__content { height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* ---- Header (title + search + close) ----------------------------------- */ .dmu-lucide-picker__header { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .dmu-lucide-picker__search-wrap { position: relative; flex: 1; max-width: 560px; } .dmu-lucide-picker__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; opacity: 0.55; } .dmu-lucide-picker__search { width: 100%; height: 40px; padding: 0 40px 0 38px; border: 1px solid var(--separator, rgba(0, 0, 0, 0.12)); border-radius: 8px; background: var(--input-background, #fff); color: var(--body, #6b7280); font-size: 14px; outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .dmu-lucide-picker__search:focus { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 79, 70, 229), 0.18); } .dmu-lucide-picker__search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .dmu-lucide-picker__search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; background: transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; color: var(--body, #6b7280); } .dmu-lucide-picker__search-clear:hover, .dmu-lucide-picker__search-clear:focus-visible { /* Icon color stays `--body` on hover — only the background tints to indicate the interactive target. Matches the hover treatment of the grid cells. */ background: rgba(0, 0, 0, 0.08); outline: none; } .dmu-lucide-picker__search-clear svg { display: block; width: 16px; height: 16px; } html[data-color^="dark-"] .dmu-lucide-picker__search-clear:hover, html[data-color^="dark-"] .dmu-lucide-picker__search-clear:focus-visible { background: rgba(255, 255, 255, 0.10); } /* ---- Body layout (sidebar + grid) -------------------------------------- */ .dmu-lucide-picker__body { flex: 1; min-height: 0; padding: 0; display: flex; overflow: hidden; } .dmu-lucide-picker__sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid var(--separator, rgba(0, 0, 0, 0.08)); overflow-y: auto; /* Stops scroll chaining — when the sidebar reaches its top/bottom and the user keeps scrolling, the wheel events don't bubble up to the page behind the modal. */ overscroll-behavior: contain; padding: 14px 10px; background: var(--background-light-2, rgba(0, 0, 0, 0.02)); } .dmu-lucide-picker__categories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .dmu-lucide-picker__categories li { padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.2; cursor: pointer; /* Flex so the per-category SVG icon sits to the left of the label with a consistent gap, vertically centered. */ display: flex; align-items: center; gap: 12px; /* Hardcoded dark text instead of `var(--foreground)` — in some themes the variable resolved to a near-white value inside the modal portal, leaving sidebar items unreadable on the light bg. Dark-theme override below switches to a light text color. */ color: #2a2a2a; user-select: none; transition: background-color 0.1s ease, color 0.1s ease; } .dmu-lucide-picker__categories li svg { display: block; width: 18px; height: 18px; flex-shrink: 0; /* stroke="currentColor" inherits the li's `color`, so active and hover states automatically restyle the icon along with the label. */ } .dmu-lucide-picker__category-label { /* Allow long category names to truncate rather than wrap (keeps sidebar rows uniform-height with the icon). */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dmu-lucide-picker__categories li:hover { background: rgba(0, 0, 0, 0.06); color: #111; } .dmu-lucide-picker__categories li.is-active { background: var(--primary, #4f46e5); color: #fff; font-weight: 500; } /* ---- Main area (meta strip + grid) ------------------------------------- */ .dmu-lucide-picker__main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .dmu-lucide-picker__meta { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 20px 10px; border-bottom: 1px solid var(--separator, rgba(0, 0, 0, 0.06)); flex-shrink: 0; } .dmu-lucide-picker__category-title { font-size: 16px; font-weight: 600; text-transform: capitalize; color: var(--body, #6b7280); } .dmu-lucide-picker__count { font-size: 12px; color: var(--alternate-text-color, #6b7280); } .dmu-lucide-picker__grid-wrap { flex: 1; min-height: 0; overflow-y: auto; /* Stops scroll chaining — when the grid reaches its top/bottom and the user keeps scrolling, the wheel events don't bubble up to the page behind the modal. */ overscroll-behavior: contain; /* padding-top intentionally 0 — see .dmu-lucide-picker__grid below. The breathing room used to live here, but padding is part of the scroll viewport: icons scrolling up were visible briefly inside the 16px padding zone before being clipped, which made sticky section titles look like they were bleeding. Moving the gap into the grid's own padding keeps it scrolling with the content. */ padding: 0 20px 20px; position: relative; } .dmu-lucide-picker__grid { display: grid; /* Icon-only cells — smaller min-track than the labeled version, lets ~12-15 icons fit per row at modal-xl width. */ grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); /* Fixed row height — keeps the grid uniform regardless of cell content variability. */ grid-auto-rows: 64px; gap: 4px; /* Top breathing room lives here (not on the parent grid-wrap) so that as the user scrolls down, this padding scrolls out of view cleanly. Sticky section titles can then stick flush against the scroll container's border with no visible bleed strip above. */ padding-top: 16px; } /* "All icons" view: flip the grid container into a vertical stack of sections. Each section has its own internal grid (.section-grid), so the icon-cell rules below apply uniformly to flat AND grouped modes. */ .dmu-lucide-picker__grid.is-grouped { display: flex; flex-direction: column; gap: 24px; /* Cancel the grid-only rules so they don't interfere with the flex layout above. */ grid-template-columns: none; grid-auto-rows: auto; } .dmu-lucide-picker__section { display: flex; flex-direction: column; gap: 8px; } .dmu-lucide-picker__section-title { margin: 0; /* Vertical padding gives the sticky title a full row of background to cover the icons that scroll behind it. Horizontal padding lines up with the cells (cells are flush within the grid). */ padding: 10px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--body, #6b7280); /* Sticky to the top of the scrolling grid-wrap so the user always sees which category they're looking at while scrolling through "All icons". Each title is constrained by its own section, so successive titles push each other up rather than stacking. */ position: sticky; top: 0; z-index: 5; background: var(--bs-modal-bg, #fff); } html[data-color^="dark-"] .dmu-lucide-picker__section-title { background: var(--bs-modal-bg, #1a1a1a); } .dmu-lucide-picker__section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows: 64px; gap: 4px; } .dmu-lucide-picker__cell { /* Strip the default