fix(select): improve hover style

baloise · Dec 12, 2022 · 4ce3676 · 4ce3676
1 parent 5e064e1
commit 4ce3676
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/components/src/components/form/bal-select/bal-select.sass b/packages/components/src/components/form/bal-select/bal-select.sass
@@ -39,11 +39,13 @@
     min-height: 3rem
     +modifier(focused)
       border-color: var(--bal-color-primary)
-    &:not(#{&}--disabled):not(#{&}--invalid):not(&:focus-within):hover
+    &:not(#{&}--disabled):not(#{&}--invalid):hover
       border-color: var(--bal-color-border-grey)
       background-color: var(--bal-color-grey-1)
+      .bal-select__control__input
+        background-color: var(--bal-color-grey-1)
     &:focus-within
-      border-color: var(--bal-color-primary)
+      border-color: var(--bal-color-primary) !important
     &--invalid:not(#{&}--disabled)
       border-color: var(--bal-color-border-danger) !important
       background: var(--bal-color-danger-1) !important

diff --git a/packages/components/src/components/form/bal-select/test/bal-select.cy.html b/packages/components/src/components/form/bal-select/test/bal-select.cy.html
@@ -64,7 +64,7 @@
 
         <bal-heading>Multi-Select</bal-heading>
         <section>
-          <bal-select multiple placeholder="Try finding your hero" data-testid="multiple">
+          <bal-select multiple placeholder="Try finding your hero" data-testid="multiple" scrollable="248">
             <bal-select-option checkbox value="BlackWidow" label="Black Widow">
               <b style="display: block">Black Widow</b>
               <span>S.H.I.E.L.D.</span>