styles: Initial customization of select2 #TASK-7216 #TASK-7100

opencb · Dec 9, 2024 · 8bb4f52 · 8bb4f52
1 parent ed0a824
commit 8bb4f52
Showing 1 changed file with 56 additions and 0 deletions.
diff --git 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;
+}