/* Univerzalni vyhledavaci select - styl ke customSearchSelect.js. Barvy ladi s promennymi v style.css (--barvaZelena, --barvaBorder, ...). */ /* Puvodni nativni select se vizualne schova, ale zustava v DOMu kvuli odeslani formulare. */ .search-select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; opacity: 0; pointer-events: none; } .search-select { position: relative; /* Sirku nastavuje JS podle puvodniho selectu (inline style). */ display: inline-block; font-family: "Open Sans", sans-serif; font-size: .9rem; text-align: left; } .search-select:has(i) { justify-content: left !important; } .search-select__trigger:has(i) { background-color: #2695471a; width: 75px; } /* Tlacitko zobrazujici vybranou hodnotu. */ .search-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 4px 10px; background-color: #fff; border: 1px solid var(--barvaBorder, #bfbfbf); border-radius: 5px; color: #333; font: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .search-select__trigger:hover { /* border-color: var(--barvaZelena, rgb(38, 149, 71)); */ } .search-select.is-open .search-select__trigger { /* border-color: var(--barvaZelena, rgb(38, 149, 71)); */ /* box-shadow: 0 0 0 2px rgba(38, 149, 71, .15); */ } .search-select__value { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .search-select__value.is-placeholder { color: #9aa0a6; } /* Text polozky - orezavame ho na jeden radek s "...". */ .search-select__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-select .search-select__icon { color: var(--barvaZelena); } /* Ikona (napr. bootstrap bi-*). */ .search-select__icon { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; } .search-select__arrow { flex: 0 0 auto; width: 16px; height: 16px; color: rgb(46, 46, 46); transition: transform .2s ease; } .search-select.is-open .search-select__arrow { transform: rotate(180deg); } /* Vyskakovaci panel se seznamem. Je vlozeny primo v a pozicovany fixed pres JS, aby ho neorezal rodic s overflow:hidden a aby byl nad ostatnim obsahem (i nad popupy). */ .search-select__dropdown { position: fixed; z-index: 9999; background-color: #fff; border: 1px solid var(--barvaBorder, #bfbfbf); border-radius: 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .search-select__dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Vyhledavaci policko. */ .search-select__search { padding: 8px; border-bottom: 1px solid var(--barvaSediva, #EDF1F6); } .search-select__input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--barvaBorder, #bfbfbf); border-radius: 5px; font: inherit; color: #333; outline: none; } .search-select__input:focus { border-color: var(--barvaZelena, rgb(38, 149, 71)); box-shadow: 0 0 0 2px rgba(38, 149, 71, .15); } /* Seznam polozek (divy, ne ul/li, aby se nedotklo globalniho stylovani seznamu). */ .search-select__list { padding: 4px; max-height: 240px; overflow-y: auto; outline: none; } .search-select__option:has(i) { justify-content: center; } .search-select__option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 4px; color: #333; cursor: pointer; overflow: hidden; } .search-select__option.is-active { background-color: var(--barvaSediva, #EDF1F6); } .search-select__option.is-selected { color: var(--barvaZelena, rgb(38, 149, 71)); font-weight: 600; } .search-select__option.is-selected.is-active { background-color: rgba(38, 149, 71, .12); } .search-select__option.is-disabled { color: #bdbdbd; cursor: not-allowed; } .search-select__empty { padding: 12px 10px; color: #9aa0a6; text-align: center; } /* Scrollbar v seznamu (Webkit). */ .search-select__list::-webkit-scrollbar { width: 8px; } .search-select__list::-webkit-scrollbar-thumb { background-color: var(--barvaTmaveSediva, #D0D1D5); border-radius: 4px; } .search-select__list::-webkit-scrollbar-track { background-color: transparent; }