/* * Portal Select2 styling for relationship-type dropdowns. * * The back-office stylesheet ships a Bootstrap-flavoured override for Select2 * that is scoped under `.light-style` on . The portal does not opt in to * that theme class, so without these rules the Select2 rendering of the * RENXT relationship-type dropdown falls back to the library's bare defaults * (28px tall, no border, no chevron) and visually disappears next to the * adjacent Bootstrap 4 `form-control` inputs. * * Selectors are scoped to `.portal_relationship_type_select` so they only * touch the relationship dropdowns and never bleed into other Select2 usage * on portal pages (e.g. the profile address dropdowns). */ .portal_relationship_type_select + .select2-container--default .select2-selection--single { height: calc(1.5em + 0.75rem + 2px); padding: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .portal_relationship_type_select + .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0.375rem 1.875rem 0.375rem 0.75rem; line-height: 1.5; color: #495057; } .portal_relationship_type_select + .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6c757d; } .portal_relationship_type_select + .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + 0.75rem); top: 1px; right: 1px; width: 1.875rem; } .portal_relationship_type_select + .select2-container--default .select2-selection--single .select2-selection__arrow b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 12px 8px; background-position: center; border: 0; height: 12px; width: 12px; left: 50%; top: 50%; margin-left: -6px; margin-top: -4px; } .portal_relationship_type_select + .select2-container--default .select2-selection--single .select2-selection__clear { color: #6c757d; font-weight: bold; margin-right: 1.5rem; cursor: pointer; } .portal_relationship_type_select + .select2-container--default.select2-container--open .select2-selection--single, .portal_relationship_type_select + .select2-container--default.select2-container--focus .select2-selection--single { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* * Required-field indicator. The portal's `checkDataEntry` validator adds * `is-invalid` to the underlying , the inline red border the * validator also sets is invisible. These rules paint the sibling Select2 * container in Bootstrap 4's danger color so the patron can see which * field needs attention. The override is split out from the base * border-color rule so it wins regardless of stylesheet load order. */ .portal_relationship_type_select.is-invalid + .select2-container--default .select2-selection--single { border-color: #dc3545; } .portal_relationship_type_select.is-invalid + .select2-container--default.select2-container--open .select2-selection--single, .portal_relationship_type_select.is-invalid + .select2-container--default.select2-container--focus .select2-selection--single { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } /* * Ensure the open dropdown menu always sits above Bootstrap 4 modals * (`.modal` uses z-index: 1050; `.modal-backdrop` is 1040). Without this the * dropdown is clipped inside the modal when `dropdownParent` is set. */ .select2-container--open { z-index: 1056; }