fix(pat select2): sanitize select2 CSS to match Bootstrap form controls.

plone · Jan 28, 2025 · eb65930 · eb65930
1 parent aaec1a2
commit eb65930
Showing 1 changed file with 25 additions and 16 deletions.
diff --git a/src/pat/select2/select2.scss b/src/pat/select2/select2.scss
@@ -1,41 +1,41 @@
 .select2-container {
-    margin-bottom: 1em;
+    display: block;
     background: var(--bs-body-bg);
     color: var(--bs-body-color);
-    border-radius: 4px;
 
-    .select2-choice, .select2-choices {
+    .select2-choice,
+    .select2-choices {
         background-image: none;
         background-color: var(--bs-body-bg);
-        border-color: var(--bs-secondary)!important;
+        border-color: var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
         color: var(--bs-body-color);
-        box-shadow: none!important;
+        box-shadow: none !important;
 
         .select2-arrow {
-            border-left: none!important;
+            border-left: none !important;
 
             b {
-                background-color: var(--bs-secondary-bg-subtle)!important;
+                background-color: var(--bs-secondary-bg-subtle) !important;
             }
         }
     }
 
     .select2-search {
-        background-color: var(--bs-secondary-bg-subtle)!important;
-        color: var(--bs-secondary-text)!important;
+        background-color: var(--bs-secondary-bg-subtle) !important;
+        color: var(--bs-secondary-text) !important;
     }
 }
 
 .select2-container-multi {
-    background: #fff!important;
-    color: #000!important;
+    background: #fff !important;
+    color: #000 !important;
 
     .select2-choices {
-        border-color: var(--bs-secondary)!important;
-
         .select2-choice-dragging {
             border-color: #ff0000;
         }
+
         .select2-search-field {
             input {
                 height: inherit;
@@ -46,6 +46,7 @@
 
     .select2-orderable {
         .select2-search-choice {
+
             &,
             & span {
                 cursor: move;
@@ -54,6 +55,14 @@
     }
 }
 
+.select2-dropdown-open {
+
+    .select2-choice,
+    .select2-choices {
+        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
+    }
+}
+
 // Overwrite default styles for dark mode theming
 .select2-drop {
     background: var(--bs-body-bg);
@@ -85,11 +94,11 @@
     }
 
     .select2-no-results {
-        background: transparent!important;
+        background: transparent !important;
     }
 
-    > * {
-        background: transparent!important;
+    >* {
+        background: transparent !important;
     }
 
     .select2-selected {