fix(Dropdown): fix background color in focus state

webex · Mar 1, 2022 · bf88170 · bf88170
1 parent 98c523f
commit bf88170
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/src/components/inputs/Dropdown/Dropdown.scss b/src/components/inputs/Dropdown/Dropdown.scss
@@ -11,11 +11,6 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-dropdown;
     border-radius: 0.5rem;
     padding: 0.375rem 0.75rem;
 
-    &.#{$C}__expanded {
-      background: var(--wxc-dropdown--active--background);
-      color: var(--wxc-dropdown--active--color);
-    }
-
     .#{$C}__label {
       flex: 1;
       display: block;
@@ -38,27 +33,43 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-dropdown;
       border: var(--wxc-dropdown--normal--border);
       box-shadow: var(--wxc-dropdown--normal--box-shadow);
       color: var(--wxc-dropdown--normal--color);
+      outline: var(--wxc-dropdown--normal--outline);
       cursor: pointer;
 
+      &.#{$C}__expanded {
+        background: var(--wxc-dropdown--active--background);
+        border: var(--wxc-dropdown--active--border);
+        box-shadow: var(--wxc-dropdown--active--box-shadow);
+        color: var(--wxc-dropdown--active--color);
+        outline: var(--wxc-dropdown--active--outline);
+
+        &:focus {
+          background: var(--wxc-dropdown--active--background);
+        }
+      }
+
       &:hover {
         background: var(--wxc-dropdown--hover--background);
         border: var(--wxc-dropdown--hover--border);
         box-shadow: var(--wxc-dropdown--hover--box-shadow);
         color: var(--wxc-dropdown--hover--color);
+        outline: var(--wxc-dropdown--hover--outline);
       }
 
       &:active {
         background: var(--wxc-dropdown--active--background);
         border: var(--wxc-dropdown--active--border);
         box-shadow: var(--wxc-dropdown--active--box-shadow);
         color: var(--wxc-dropdown--active--color);
+        outline: var(--wxc-dropdown--active--outline);
       }
 
       &:focus {
         background: var(--wxc-dropdown--focus--background);
         border: var(--wxc-dropdown--focus--border);
         box-shadow: var(--wxc-dropdown--focus--box-shadow);
         color: var(--wxc-dropdown--focus--color);
+        outline: var(--wxc-dropdown--focus--outline);
       }
     }
   }
@@ -67,7 +78,9 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-dropdown;
     .#{$C}__selected-option {
       background: var(--wxc-dropdown--disabled--background);
       border: var(--wxc-dropdown--disabled--border);
+      box-shadow: var(--wxc-dropdown--disabled--box-shadow);
       color: var(--wxc-dropdown--disabled--color);
+      outline: var(--wxc-dropdown--disabled--outline);
       cursor: default;
     }
   }

diff --git a/src/themes/dark.scss b/src/themes/dark.scss
@@ -161,26 +161,31 @@
   --wxc-dropdown--normal--color: #{$wxc-white-alpha-70};
   --wxc-dropdown--normal--box-shadow: none;
   --wxc-dropdown--normal--border: 1px solid #{$wxc-white-alpha-50};
+  --wxc-dropdown--normal--outline: none;
 
   --wxc-dropdown--hover--background: #{$wxc-white-alpha-07};
   --wxc-dropdown--hover--color: #{$wxc-white-alpha-70};
   --wxc-dropdown--hover--box-shadow: none;
   --wxc-dropdown--hover--border: 1px solid #{$wxc-white-alpha-50};
+  --wxc-dropdown--hover--outline: none;
 
   --wxc-dropdown--active--background: #{$wxc-white-alpha-11};
   --wxc-dropdown--active--color: #{$wxc-white-alpha-95};
-  --wxc-dropdown--active--box-shadow: 0 0 0 2px #{$wxc-blue-40}, 0px 0px 0px 4px #{$wxc-blue-60};
+  --wxc-dropdown--active--box-shadow: 0 0 0 0.25rem #{$wxc-blue-40-alpha-30}, 0 0 0 0.125rem #{$wxc-blue-40};
   --wxc-dropdown--active--border: 1px solid #{$wxc-white-alpha-50};
+  --wxc-dropdown--active--outline: none;
 
   --wxc-dropdown--disabled--background: #{$wxc-white-alpha-11};
   --wxc-dropdown--disabled--color: #{$wxc-white-alpha-40};
   --wxc-dropdown--disabled--box-shadow: 0 0 0 2px #{$wxc-blue-40}, 0px 0px 0px 4px #{$wxc-blue-60};
   --wxc-dropdown--disabled--border: 1px solid #{$wxc-white-alpha-11};
+  --wxc-dropdown--disabled--outline: none;
 
-  --wxc-dropdown--focus--background: #{$wxc-white-alpha-11};
+  --wxc-dropdown--focus--background: #{$wxc-black-alpha-100};
   --wxc-dropdown--focus--color: #{$wxc-white-alpha-95};
-  --wxc-dropdown--focus--box-shadow: 0 0 0 2px #{$wxc-blue-40}, 0px 0px 0px 4px #{$wxc-blue-60};
+  --wxc-dropdown--focus--box-shadow: 0 0 0 0.25rem #{$wxc-blue-40-alpha-30}, 0 0 0 0.125rem #{$wxc-blue-40};
   --wxc-dropdown--focus--border: 1px solid #{$wxc-white-alpha-90};
+  --wxc-dropdown--focus--outline: none;
 
   --wxc-input-field--normal--background: #{$wxc-black-alpha-00};
   --wxc-input-field--normal--color: #{$wxc-white-alpha-95};

diff --git a/src/themes/light.scss b/src/themes/light.scss
@@ -161,26 +161,31 @@
   --wxc-dropdown--normal--color: #{$wxc-black-alpha-60};
   --wxc-dropdown--normal--box-shadow: none;
   --wxc-dropdown--normal--border: 1px solid #{$wxc-black-alpha-50};
+  --wxc-dropdown--normal--outline: none;
 
   --wxc-dropdown--hover--background: #{$wxc-black-alpha-07};
   --wxc-dropdown--hover--color: #{$wxc-black-alpha-60};
   --wxc-dropdown--hover--box-shadow: none;
   --wxc-dropdown--hover--border: 1px solid #{$wxc-black-alpha-50};
+  --wxc-dropdown--hover--outline: none;
 
   --wxc-dropdown--active--background: #{$wxc-black-alpha-11};
   --wxc-dropdown--active--color: #{$wxc-black-alpha-95};
-  --wxc-dropdown--active--box-shadow: 0 0 0 2px #{$wxc-blue-60}, 0px 0px 0px 4px #{$wxc-blue-40};
+  --wxc-dropdown--active--box-shadow: 0 0 0 0.25rem #{$wxc-blue-60-alpha-30}, 0 0 0 0.125rem #{$wxc-blue-60};
   --wxc-dropdown--active--border: 1px solid #{$wxc-black-alpha-50};
+  --wxc-dropdown--active--outline: none;
 
   --wxc-dropdown--disabled--background: #{$wxc-black-alpha-11};
   --wxc-dropdown--disabled--color: #{$wxc-black-alpha-40};
-  --wxc-dropdown--disabled--box-shadow: 0 0 0 2px #{$wxc-blue-60}, 0px 0px 0px 4px #{$wxc-blue-40};
+  --wxc-dropdown--disabled--box-shadow: none;
   --wxc-dropdown--disabled--border: 1px solid #{$wxc-black-alpha-11};
+  --wxc-dropdown--disabled--outline: none;
 
   --wxc-dropdown--focus--background: #{$wxc-black-alpha-11};
   --wxc-dropdown--focus--color: #{$wxc-black-alpha-95};
-  --wxc-dropdown--focus--box-shadow: 0 0 0 2px #{$wxc-blue-60}, 0px 0px 0px 4px #{$wxc-blue-40};
+  --wxc-dropdown--focus--box-shadow: 0 0 0 0.25rem #{$wxc-blue-60-alpha-30}, 0 0 0 0.125rem #{$wxc-blue-60};
   --wxc-dropdown--focus--border: 1px solid #{$wxc-black-alpha-90};
+  --wxc-dropdown--focus--outline: none;
 
   --wxc-input-field--normal--background: #{$wxc-white-alpha-100};
   --wxc-input-field--normal--color: #{$wxc-black-alpha-95};