[CNFT1-3638]: fixing height for race field (#2129)

* fixing height for race field * wrapping multiselect class over other classes in the multiselectinput field * adding border radius 0
CDCgov · Dec 20, 2024 · 7b21215 · 7b21215
1 parent 32aa873
commit 7b21215
Showing 1 changed file with 40 additions and 43 deletions.
diff --git a/apps/modernization-ui/src/components/selection/multi/MultiSelectInput.scss b/apps/modernization-ui/src/components/selection/multi/MultiSelectInput.scss
@@ -1,62 +1,59 @@
 @use 'styles/colors';
 @use 'styles/components';
 
-.multi-select {
-    border-width: 1px;
-    border-style: solid;
-    border-color: colors.$base-dark;
-}
-
 .multi-select-selection__indicator {
     height: 1.25rem;
     width: 1.25rem;
     background-repeat: no-repeat;
     background-size: 1.25rem;
 }
 
-.multi-select__control {
-    // height: unset;
-    // min-height: unset !important;
-
-    .multi-select__indicator {
-        color: colors.$base-darker !important;
-
-        height: 2rem;
-        width: 2rem;
-        padding: 0.5rem;
-    }
+.multi-select {
+    .multi-select__control {
+        border-width: 1px;
+        border-style: solid;
+        border-color: colors.$base-dark;
+        min-height: 2.5rem;
+        border-radius: 0;
+
+        .multi-select__indicator {
+            color: colors.$base-darker !important;
+            height: 2rem;
+            width: 2rem;
+            padding: 0.5rem;
+        }
 
-    .multi-select__indicator-separator {
-        background-color: colors.$base-lighter !important;
-    }
+        .multi-select__indicator-separator {
+            background-color: colors.$base-lighter !important;
+        }
 
-    .multi-select__multi-value {
-        background-color: colors.$primary-lighter !important;
-        border-radius: 0.125rem !important;
-    }
+        .multi-select__multi-value {
+            background-color: colors.$primary-lighter !important;
+        }
 
-    .multi-select__multi-value__label {
-        color: colors.$primary-dark !important;
-        font-size: 100% !important;
-    }
+        .multi-select_multi-value_label {
+            color: colors.$primary-dark !important;
+            font-size: 100% !important;
+        }
 
-    .multi-select__multi-value__remove {
-        color: colors.$primary-dark !important;
-    }
+        .multi-select_multi-value_remove {
+            color: colors.$primary-dark !important;
+        }
 
-    .multi-select__multi-value__path {
-        display: none !important;
-    }
+        .multi-select_multi-value_path {
+            display: none !important;
+        }
 
-    .multi-select__placeholder {
-        color: colors.$base-darkest !important;
-        margin: 0;
-        padding-left: 0.25rem;
-    }
+        .multi-select__placeholder {
+            color: colors.$base-darkest !important;
+            margin: 0;
+            padding-left: 0.25rem;
+        }
 
-    .multi-select__input {
-        margin: 0;
-        padding-left: 0.25rem;
+        .multi-select__input {
+            margin: 0;
+            padding-left: 0.25rem;
+        }
     }
 }
 
@@ -77,4 +74,4 @@
             }
         }
     }
-}
+}