fix(color-picker-slider-focus): add focus state to color picker slide…

…r thumb [Finishes #W-4172014]
salesforce-ux · Aug 2, 2017 · c29d368 · c29d368
1 parent dd85217
commit c29d368
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/ui/components/color-picker/base/_index.scss b/ui/components/color-picker/base/_index.scss
@@ -231,10 +231,6 @@
     $color-stops
   );
 
-  &:focus {
-    outline: none;
-  }
-
   @mixin thumb-styles {
     appearance: none;
     cursor: pointer;
@@ -245,6 +241,11 @@
     background: $color-picker-slider-thumb-color-background;
   }
 
+  @mixin thumb-styles-focus {
+      border-color: $color-border-input-active;
+      box-shadow: $shadow-button-focus;
+    }
+
   &::-webkit-slider-thumb {
     @include thumb-styles;
   }
@@ -258,6 +259,22 @@
     height: $color-picker-slider-height;
   }
 
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      @include thumb-styles-focus;
+    }
+
+    &::-moz-range-thumb {
+      @include thumb-styles-focus;
+    }
+
+    &::-ms-thumb {
+      @include thumb-styles-focus;
+    }
+  }
+
   &::-moz-range-track {
     height: 0;
   }