From c29d368297e238e6964d8f42626539692ed97689 Mon Sep 17 00:00:00 2001
From: Jade Pennig <jpennig@salesforce.com>
Date: Wed, 2 Aug 2017 12:49:16 -0500
Subject: [PATCH] fix(color-picker-slider-focus): add focus state to color
 picker slider thumb

[Finishes #W-4172014]
---
 ui/components/color-picker/base/_index.scss | 25 +++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/ui/components/color-picker/base/_index.scss b/ui/components/color-picker/base/_index.scss
index 075dbe4e69..f895dd7443 100644
--- 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;
   }