OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* Searchable dropdown ("ssd") – shared component for UniFi pages.
   Markup:
     <div class="ssd" id="my-ssd" [data-ssd-fixed]>
       <div class="ssd__trigger" onclick="ssdToggle('my-ssd')">
         <span class="ssd__value">Label</span><span class="ssd__arrow">▾</span>
       </div>
       <div class="ssd__panel" style="display:none">
         <input class="ssd__search" oninput="ssdFilter('my-ssd', this.value)">
         <div class="ssd__list">
           <div class="ssd__item" data-value="x" onclick="ssdSelect('my-ssd','x','Label')">…</div>
         </div>
       </div>
     </div>
   On selection a `ssd:select` CustomEvent (detail: {id,value,label}) bubbles from
   the .ssd element – each page wires its own behaviour by listening for it. */
.ssd { position: relative; }
.ssd__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .35rem .8rem; border: 1px solid var(--gray-300); border-radius: .35rem;
    font-size: .85rem; cursor: pointer; color: var(--gray-700); background: var(--color-bg);
    user-select: none; min-width: 200px;
}
.ssd__trigger:hover { background: var(--gray-100); }
.ssd__arrow { font-size: .65rem; opacity: .7; transition: transform .15s; }
.ssd.open .ssd__arrow { transform: rotate(180deg); }

.ssd__panel {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 240px; max-width: calc(100vw - 1rem); background: var(--color-bg);
    border: 1px solid var(--gray-200); border-radius: .45rem; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999; overflow: hidden;
}
/* Fixed-Variante (für Dropdowns in scroll-/overflow-Containern) – Position setzt das JS. */
.ssd[data-ssd-fixed] .ssd__panel { position: fixed; top: auto; left: auto; }

.ssd__search {
    width: 100%; padding: .5rem .75rem; border: none; border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50); color: var(--gray-700); font-size: .85rem; outline: none; box-sizing: border-box;
}
.ssd__search::placeholder { color: var(--gray-400); }
.ssd__list { max-height: 240px; overflow-y: auto; }
.ssd__item { padding: .45rem .75rem; font-size: .82rem; color: var(--gray-700); cursor: pointer; }
.ssd__item:hover { background: var(--gray-100); }
.ssd__item.selected { background: var(--color-primary-pale); color: var(--color-primary-strong); }
.ssd__item.hidden { display: none; }