fix(MultiSelect.Filterable): dynamically resize input field

carbon-design-system · Dec 11, 2020 · 6428b8c · 6428b8c
1 parent ccfc7c1
commit 6428b8c
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss
@@ -56,6 +56,19 @@
     color: $text-01;
   }
 
+  .#{$prefix}--multi-select--filterable .#{$prefix}--text-input {
+    padding-left: $spacing-03;
+  }
+
+  .#{$prefix}--multi-select--filterable:hover .#{$prefix}--text-input {
+    background-color: $hover-ui;
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
+    .#{$prefix}--text-input {
+    background-color: $field-01;
+  }
+
   .#{$prefix}--multi-select--filterable {
     .#{$prefix}--list-box__selection--multi {
       margin: 0 0 0 $spacing-05;