/** * Excel-like per-column filter menus (see column-filters.js). * * Two blocks only: * 1. the funnel button inside the table header * 2. the dropdown, which lives on so it is not clipped by * #productsTable_wrapper (overflow-x: auto) * * Palette follows the existing landing page: #243347 text, #0066cc primary, * #f0762d active/applied accent (same orange as the sort indicator). */ /* ------------------------------------------------------------------ */ /* 1. Header funnel button */ /* ------------------------------------------------------------------ */ /* Anchor for the absolutely positioned button. The header keeps `padding: 0 !important`, so room is made with padding-left instead. */ #productsTable thead th, .sc-sticky-thead table.dataTable > thead > tr > th { position: relative; } #productsTable thead th .col-title, .sc-sticky-thead table.dataTable > thead > tr > th .col-title { /* margin-left: 22px; */ } .sc-cf-btn { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #ffffff; cursor: pointer; opacity: 0.75; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .sc-cf-btn svg { width: 20px; height: 20px; fill: currentColor; pointer-events: none; } .sc-cf-btn:hover, .sc-cf-btn[aria-expanded="true"] { opacity: 1; background: #888; } /* Filter applied on this column. */ .sc-cf-btn.is-filtered { opacity: 1; color: #f0762d; background: #888; } .sc-cf-btn.is-filtered:hover { background: #888; } /* ------------------------------------------------------------------ */ /* 2. Dropdown */ /* ------------------------------------------------------------------ */ .sc-cf-menu { position: fixed; z-index: 3000; width: 258px; display: flex; flex-direction: column; max-height: 78vh; background: #ffffff; border: 1px solid #c8cfdb; border-radius: 6px; box-shadow: 0 8px 24px rgba(36, 51, 71, 0.22); font-size: 13px; line-height: 1.35; color: #243347; text-align: left; text-transform: none; font-weight: 400; } .sc-cf-menu__body { overflow-y: auto; padding: 4px 0; flex: 1 1 auto; } .sc-cf-menu__body::-webkit-scrollbar { width: 8px; } .sc-cf-menu__body::-webkit-scrollbar-thumb { background: #c3cad6; border-radius: 6px; } .sc-cf-sep { height: 1px; margin: 4px 0; background: #e4e8ef; } /* Menu rows: Sort A-Z, Sort Z-A, Clear Filter, Text Filters */ .sc-cf-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: #243347; font: inherit; text-align: left; cursor: pointer; } .sc-cf-row:hover:not(:disabled) { background: #eef3fb; } .sc-cf-row:disabled { color: #a5aebd; cursor: default; } .sc-cf-ico { flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; color: #4a5b73; } .sc-cf-row:disabled .sc-cf-ico { color: #b8c0cd; } .sc-cf-ico svg { width: 15px; height: 15px; fill: currentColor; } .sc-cf-row__label { flex: 1 1 auto; } .sc-cf-row--expand { padding-left: 38px; } .sc-cf-chev { flex: 0 0 auto; color: #7c8798; font-size: 16px; transition: transform 0.15s ease; } .sc-cf-row--expand.is-open .sc-cf-chev { transform: rotate(90deg); } /* Text Filters body */ .sc-cf-text { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 10px 38px; } .sc-cf-text[hidden] { display: none; } .sc-cf-op, .sc-cf-text-val, .sc-cf-search-val { width: 100%; padding: 6px 8px; border: 1px solid #c8cfdb; border-radius: 4px; background: #ffffff; font: inherit; color: #243347; } .sc-cf-op:focus, .sc-cf-text-val:focus, .sc-cf-search-val:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); } /* Search box above the value list */ .sc-cf-search { padding: 6px 12px 8px; } /* Checkbox value list */ .sc-cf-values { max-height: 210px; overflow-y: auto; padding: 0 12px 6px; } .sc-cf-values::-webkit-scrollbar { width: 8px; } .sc-cf-values::-webkit-scrollbar-thumb { background: #c3cad6; border-radius: 6px; } .sc-cf-value { display: flex; align-items: flex-start; gap: 8px; padding: 4px 2px; cursor: pointer; font-weight: 400; } .sc-cf-value[hidden] { display: none; } .sc-cf-value:hover { background: #f4f7fc; } .sc-cf-value input { flex: 0 0 auto; margin: 2px 0 0; cursor: pointer; } .sc-cf-value span { flex: 1 1 auto; word-break: break-word; } .sc-cf-value em { color: #8a93a3; font-style: normal; font-size: 12px; } .sc-cf-value--all { font-weight: 600; border-bottom: 1px solid #e4e8ef; margin-bottom: 4px; padding-bottom: 6px; } .sc-cf-note { padding: 4px 12px 12px; color: #7c8798; font-size: 12px; } /* Footer */ .sc-cf-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid #e4e8ef; background: #fafbfd; border-radius: 0 0 6px 6px; flex: 0 0 auto; } .sc-cf-apply, .sc-cf-cancel { padding: 6px 18px; border: 1px solid transparent; border-radius: 5px; font: inherit; font-weight: 600; cursor: pointer; } .sc-cf-apply { background: #f0762d; color: #FFF; } .sc-cf-apply:hover { background: #f0762d; } .sc-cf-cancel { background: #ffffff; border-color: #c8cfdb; color: #243347; } .sc-cf-cancel:hover { background: #eef3fb; } @media (max-width: 600px) { .sc-cf-menu { width: calc(100vw - 24px); } } /* Sort-only menu (no Apply footer, e.g. the P/N column) - narrower, since it holds nothing but the two sort rows. Set by buildMenu() in column-filters.js. */ .sc-cf-menu--compact { width: 196px; } /* ------------------------------------------------------------------ */ /* Active state: which column is sorted / filtered, and which menu */ /* row is currently in effect. Set by column-filters.js. */ /* ------------------------------------------------------------------ */ /* Column is the table's current sort but has no value/text filter. Lighter than .is-filtered so the two states stay distinguishable. Declared BEFORE .is-filtered so a column that is both reads as filtered (the stronger signal). */ .sc-cf-btn.is-sorted { opacity: 1; background: #888; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); } .sc-cf-btn.is-sorted:hover { background: #888; } /* Filter applied wins over sorted. */ .sc-cf-btn.is-sorted.is-filtered { background: #888; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); } /* The menu row that is currently in effect (active sort direction, or an active Text Filter). */ .sc-cf-row.is-active { background: #fdf1e8; color: #b6521a; font-weight: 600; } .sc-cf-row.is-active:hover:not(:disabled) { background: #fbe6d7; } .sc-cf-row.is-active .sc-cf-ico { color: #f0762d; } /* Small check on the right of the active row. */ .sc-cf-row.is-active::after { content: ""; flex: 0 0 auto; width: 6px; height: 10px; margin-left: 2px; border: solid #f0762d; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); } /* The expandable Text Filters row already ends with a chevron, so the tick would collide with it. */ .sc-cf-row--expand.is-active::after { content: none; } /* Ticked value rows in the checkbox list. */ .sc-cf-value:has(.sc-cf-value-cb:checked) { background: #fdf1e8; font-weight: 600; } .sc-cf-value:has(.sc-cf-value-cb:checked):hover { background: #fbe6d7; }