diff --git a/styles/jsorolla-ui.scss b/styles/jsorolla-ui.scss index bdb8d2453..4428d29f2 100644 --- a/styles/jsorolla-ui.scss +++ b/styles/jsorolla-ui.scss @@ -118,3 +118,59 @@ body { .fs-8 { font-size: $font-size-base * 0.75; } + + +// select2 styles override + +.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field { + line-height: 1.8; // fix vertical alignment of the placeholder +} +.select2-selection__choice__display { + white-space: break-spaces; // selected tag on multiple lines if needed +} +.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { + margin-right: 9px !important; +} +.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { + border: 1px solid #cdd5e3; + position: relative; + vertical-align: middle; + padding: 3px 0 0 5px; + background-color: #eff2f7; + border-radius: 2px; + line-height: 1; + word-break: break-all; /* selected tag on multiple lines if needed */ +} +.select2-results__option.select2-results__option--selected { + background-color: #eee; +} +.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { + background: transparent; + border: 0; +} +.select2-container .select2-selection--multiple { + cursor: text; + padding-right: 20px; +} +/* fix the select2 UI in case the autocomplete dropdown is hidden */ +select.no-data + .select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection { + border-bottom-color: rgb(126, 182, 226); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px +} +/* adapt select2 placeholder text to the default BT ones */ +.select2-container--bootstrap-5 .select2-search--inline .select2-search__field { + font-family: inherit !important; // "Lato", Helvetica, Arial, sans-serif; + font-size: $font-size-base !important; + line-height: 1.5; +} +/* dynamic width: it renders active area for the dropdown and selected tokens in one line, where possible */ +.select2-selection__rendered { + width: auto; +} +.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered { + width: auto; +} +.select2-search.select2-search--inline { + display: inline-block; +}