/* ========================================================================== select2-custom.css Оформление Select2-фильтра шапки (.b-filter) под дизайн «Москва завтра». Пришло на смену chosen-custom.css (библиотека сменилась Chosen → Select2). Только CSS-оверрайды — разметку и JS Select2 не трогает. ПОДКЛЮЧАТЬ ПОСЛЕДНИМ: после select2.min.css и style.css. Пилюля (закрытое поле) — внутри .b-filter__control. Выпадающий список Select2 крепится к (внутри .select2-container--open), поэтому его правила ГЛОБАЛЬНЫЕ (без привязки к .b-filter). Значения — из токенов :root. Фильтры над картой (.b-mapfilter) — отдельно (сделаю, когда поднимется /map/). ========================================================================== */ /* --- Контейнер поля: на всю ширину (Select2 по умолчанию ужимает по контенту) - */ /* Пилюля/caret одинаковы для фильтра шапки (.b-filter__control) и фильтра над картой (.b-mapfilter__control) — селекторы сгруппированы (DRY). Токены --filter-pill-h / --fs-filter-field у каждого блока свои. */ .b-filter__control .select2-container, .b-mapfilter__control .select2-container { width: 100% !important; display: block; } /* поля фильтра карты — задаём базовую ширину (нативный select скрыт Select2, его min-width на раскладку не влияет), чтобы пилюли были ровными в ряд */ .b-mapfilter__field { min-width: clamp(180px, 14vw, 240px); } /* --- Пилюля (закрытое состояние) ---------------------------------------- */ .b-filter__control .select2-selection--single, .b-mapfilter__control .select2-selection--single { display: flex; align-items: center; height: var(--filter-pill-h); padding: 0 44px 0 30px; /* слева текст, справа место под синий caret */ border: 1px solid var(--color-control-border); border-radius: calc(var(--filter-pill-h) / 2); background: var(--color-surface, #fff); outline: none; } .b-filter__control .select2-selection--single .select2-selection__rendered, .b-mapfilter__control .select2-selection--single .select2-selection__rendered { flex: 1; min-width: 0; /* чтобы работал ellipsis */ margin: 0; padding: 0; color: var(--color-ink); font-family: var(--font-main); font-size: var(--fs-filter-field, 16px); line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .b-filter__control .select2-selection__placeholder, .b-mapfilter__control .select2-selection__placeholder { color: var(--color-ink-soft); } /* убираем родную стрелку Select2 — остаётся синий caret из разметки */ .b-filter__control .select2-selection--single .select2-selection__arrow, .b-mapfilter__control .select2-selection--single .select2-selection__arrow { display: none; } /* активное/фокус поле: акцентная рамка + поворот нашего caret */ .b-filter__control .select2-container--open .select2-selection--single, .b-filter__control .select2-container--focus .select2-selection--single, .b-mapfilter__control .select2-container--open .select2-selection--single, .b-mapfilter__control .select2-container--focus .select2-selection--single { border-color: var(--color-accent); } .b-filter__control .select2-container--open + .b-filter__caret, .b-mapfilter__control .select2-container--open + .b-mapfilter__caret { transform: translateY(-50%) rotate(180deg); } /* открытое поле стыкуется с выпадашкой: примыкающие углы делаем плоскими */ .b-filter__control .select2-container--open.select2-container--below .select2-selection--single, .b-mapfilter__control .select2-container--open.select2-container--below .select2-selection--single { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .b-filter__control .select2-container--open.select2-container--above .select2-selection--single, .b-mapfilter__control .select2-container--open.select2-container--above .select2-selection--single { border-top-left-radius: 0; border-top-right-radius: 0; } /* --- Кнопка очистки (×) в выбранном поле --------------------------------- */ /* Select2 рисует текстовый символ «×» с большим отступом (float + margin 20px). Поле — flex-строка [× · текст · caret]; заменяем глиф на тонкий крестик, как в поле поиска (.b-search__clear), и подтягиваем к левому краю. */ /* при выбранном значении сдвигаем содержимое влево — освобождаем место под × */ .b-filter__control .select2-selection--single.select2-selection--clearable, .b-mapfilter__control .select2-selection--single.select2-selection--clearable { padding-left: 16px; } .b-filter__control .select2-selection--single .select2-selection__clear, .b-mapfilter__control .select2-selection--single .select2-selection__clear { order: -1; /* × перед текстом (в flex-строке поля) */ flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 8px 0 0; /* небольшой зазор до текста (перебиваем 20px Select2) */ padding: 0; border: 0; background: none; color: var(--color-ink-soft); cursor: pointer; transition: color var(--transition, 0.2s); } .b-filter__control .select2-selection__clear:hover, .b-mapfilter__control .select2-selection__clear:hover { color: var(--color-accent); } /* прячем родной символ «×» ... */ .b-filter__control .select2-selection__clear > span, .b-mapfilter__control .select2-selection__clear > span { display: none; } /* ... и рисуем такой же тонкий крестик, как в поиске (маска → красится currentColor) */ .b-filter__control .select2-selection__clear::before, .b-mapfilter__control .select2-selection__clear::before { content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } /* --- Выпадающий список (крепится к body — правила глобальные) ------------ */ /* Примыкает к полю ВПЛОТНУЮ (без зазора) и стыкуется рамкой/скруглением, чтобы не выглядел «оторванным»: акцентная рамка как у открытого поля, у стыкующегося края — без рамки и без скругления, с другого края — скругление 16. */ .select2-container--default .select2-dropdown { padding: 6px; border: 1px solid var(--color-accent); background: var(--color-surface, #fff); box-shadow: 0 18px 44px rgba(0, 40, 110, 0.18); overflow: hidden; } .select2-container--default .select2-dropdown--below { margin-top: 0; border-top: 0; border-radius: 0 0 16px 16px; } .select2-container--default .select2-dropdown--above { margin-bottom: 0; border-bottom: 0; border-radius: 16px 16px 0 0; } /* --- Поиск внутри списка ------------------------------------------------- */ .select2-container--default .select2-search--dropdown { padding: 2px 2px 8px; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 40px; padding: 0 40px 0 16px; border: 1px solid var(--color-control-border); border-radius: 20px; background: var(--color-surface, #fff) no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); background-size: 18px 18px; background-position: right 14px center; font-family: var(--font-main); font-size: var(--fs-ui, 16px); color: var(--color-ink); outline: none; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--color-accent); } /* --- Пункты списка ------------------------------------------------------- */ .select2-container--default .select2-results__options { max-height: 260px; scrollbar-width: thin; scrollbar-color: var(--color-accent) transparent; } .select2-container--default .select2-results__option { margin: 2px 0; padding: 10px 20px; border-radius: 12px; font-family: var(--font-main); /* Выпадашка крепится к — вне .b-filter/.b-mapfilter, поэтому наследует крупный :root --fs-filter-field (до 30px). Задаём тот же компактный кегль, что у поля фильтра (16→22px): пункты вровень с полем и длинные названия («Зеленоградский», «Северо-Восточный») помещаются в ширину выпадашки. */ font-size: clamp(16px, calc(16px + (100vw - 1280px) * 0.005357), 22px); line-height: 1.2; color: var(--color-ink); } /* наведение / клавиатура. ВАЖНО: в Select2 4.1.0-rc atrribute aria-selected="true" вешается на АКТИВНЫЙ (подсвеченный) пункт для скринридеров, а НЕ на выбранное значение — выбранное помечается классом .select2-results__option--selected. Поэтому опираемся на классы --highlighted / --selected, иначе подсвеченный пункт под курсором ловил правило «выбранного» (прозрачный фон + белый текст) и становился невидимым. */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background-color: var(--color-accent); color: #fff; } /* выбранное значение (класс --selected, НЕ атрибут aria-selected) */ .select2-container--default .select2-results__option--selected { background: transparent; color: var(--color-accent); font-weight: 700; } /* выбранное И под курсором — подсветка важнее (акцентный фон, белый текст) */ .select2-container--default .select2-results__option--selected.select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--selected.select2-results__option--highlighted { background-color: var(--color-accent); color: #fff; } /* приглушённые (disabled / «поиск…») */ .select2-container--default .select2-results__option--disabled, .select2-container--default .select2-results__option.loading-results, .select2-container--default .select2-results__message { color: var(--color-muted); } /* тонкий скроллбар списка в цветах сайта */ .select2-container--default .select2-results__options::-webkit-scrollbar { width: 6px; } .select2-container--default .select2-results__options::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; } .select2-container--default .select2-results__options::-webkit-scrollbar-track { background: transparent; }