Merge pull request #1347 from plone/petschki-relateditems-styling

Fix `pat-relateditems` styling when inside a modal.
plone · Oct 20, 2023 · ed30701 · ed30701
2 parents e6e58d2 + e5d5aa9
commit ed30701
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/src/pat/relateditems/relateditems.scss b/src/pat/relateditems/relateditems.scss
@@ -4,11 +4,21 @@
     width: 100%;
 
     .select2-container {
+        /* generalize from .form-control */
+        border: var(--bs-border-width) solid var(--bs-border-color);
+        padding: 0.325rem 0.5rem;
         min-width: 100%;
+        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
+        &.select2-dropdown-open {
+            border-radius:0;
+            border-bottom-style:none;
+        }
     }
 
+
     .toolbar {
         background-color: var(--bs-secondary-bg);
+        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 ;
 
         .mode-selector {
             display: inline-block;
@@ -39,6 +49,12 @@
 }
 
 .pat-relateditems-dropdown {
+
+    &.select2-drop-active {
+        border-color: var(--bs-border-color);
+        box-shadow: none;
+    }
+
     .select2-results {
         max-height: 950px;
 
@@ -92,8 +108,18 @@
 
     &.select2-container-multi {
         .select2-choices {
+            border: none;
+            background: none;
+
+            .select2-search-field input {
+                padding:0;
+            }
+
             .select2-search-choice {
                 background-image: none;
+                background-color: var(--bs-gray-100);
+                border-color:var(--bs-border-color);
+                box-shadow: none;
                 margin: 0.2em;
                 padding: 0;
                 // make choices list compact:
@@ -111,6 +137,12 @@
                 }
             }
         }
+
+        &.select2-container-active {
+            .select2-choices {
+                border:none;
+            }
+        }
     }
 }