/* ============================================ SELECT2 — the app's skin Every select2 on the site runs select2's `default` theme: django-select2 widgets via SELECT2_THEME, manual inits via `data-select2-init`. The only vendor CSS under it is vendor/select2.min.css, so this file is the skin. Watch the cascade here. django-select2 can inject its own copy of select2's CSS through `{{ form.media }}`, which lands in — after every stylesheet, including this one — and silently outranks it. SELECT2_CSS = [] in settings keeps that from happening. ============================================ */ /* --- container plumbing --- */ .content .select2-container, .modal .select2-container, .swal2-html-container .select2-container { width: 100% !important; } /* sidebar.css slide-outs sit at 1000001 to clear this */ .select2-container.select2-container--open { z-index: 1000000 !important; } /* --- before init --- A select2 field is authored as a plain it has taken over - says the widget exists. The box never changes size, and nothing paints in it that is not the finished control. */ select.django-select2:not(.select2-hidden-accessible), select[data-select2-init]:not(.select2-hidden-accessible) { height: 38px; min-height: 38px; visibility: hidden; } select.django-select2.form-control-sm:not(.select2-hidden-accessible), select[data-select2-init].form-control-sm:not(.select2-hidden-accessible) { height: 32px; min-height: 32px; } /* collapse the original in place and renders its own wrapper * next to it, so the group's flex row ends up holding a box that matches none * of Bootstrap's `.input-group > .form-control` rules. Untreated it takes the * 100% width the container rule at the top of this file gives it and wraps * onto its own line, pushing the addons out of the group. The hidden