/* * Select2 4.x — match form-control + dropdown-menu styling so widgets line up * with native Bootstrap inputs. * * Loaded at the END of in base.html (NOT in ) because * django-select2's form widget injects its own CSS files inline with the form * rendering (admin/css/vendor/select2/select2.min.css and * django_select2/django_select2.css). Those re-bring Select2's default rules * mid-document; loading this file last guarantees our overrides win the * cascade regardless of where on the page the form sits. */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border: 1px solid var(--bs-border-color); border-radius: 0.5rem; min-height: calc(1.5em + 0.75rem + 2px); font-size: 0.8125rem; background-color: #fff; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple { border: 1px solid #c9d2f7; box-shadow: 0 0 0 3px rgba(41, 69, 196, 0.12); outline: 0; } .select2-container--default .select2-selection--single { display: flex; align-items: center; padding: 0.375rem 0.625rem; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--bs-body-color); line-height: 1.5; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--bs-body-tertiary-color); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 0.5rem; } .select2-container--default .select2-selection--multiple { padding: 0.125rem 0.375rem; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border: 1px solid var(--bs-primary-border-subtle); border-radius: 999px; padding: 0.0625rem 0.5rem 0.0625rem 0.4375rem; margin: 0.125rem 0; font-size: 0.75rem; font-weight: 500; line-height: 1.4; display: inline-flex; align-items: center; gap: 0.25rem; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--bs-primary-text-emphasis); opacity: 0.55; margin-right: 0.125rem; border: 0; background: transparent; font-weight: 600; font-size: 0.875rem; line-height: 1; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { color: var(--bs-primary-text-emphasis); background: transparent; opacity: 1; } .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { font-size: 0.8125rem; margin: 0.1875rem 0.25rem; height: auto; line-height: 1.5; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--bs-body-tertiary-color); margin-left: 0.125rem; } .select2-container--default .select2-selection__clear { color: var(--bs-body-tertiary-color); margin-right: 0.25rem; font-weight: 600; } .select2-container--default .select2-selection__clear:hover { color: var(--bs-body-color); } .select2-container--default .select2-dropdown { border-color: var(--bs-border-color); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(27, 31, 42, 0.10); overflow: hidden; } .select2-container--default .select2-search--dropdown { padding: 0.375rem; } .select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--bs-border-color); border-radius: 0.375rem; padding: 0.375rem 0.5rem; font-size: 0.8125rem; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #c9d2f7; box-shadow: 0 0 0 3px rgba(41, 69, 196, 0.12); outline: 0; } .select2-container--default .select2-results__option { font-size: 0.8125rem; padding: 0.375rem 0.625rem; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--selected { background-color: var(--bs-secondary-bg-subtle); color: var(--bs-body-color); } .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--bs-body-tertiary-color); }