fix(slider): Update CSS to better conform to spec.

Remove grey focus ring in favor of transparent background ring. fixes #2427. closes $4241.
angular · Aug 19, 2015 · 7fd8b09 · 7fd8b09
1 parent fbb6b28
commit 7fd8b09
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/slider/slider-theme.scss b/src/components/slider/slider-theme.scss
@@ -10,7 +10,7 @@ md-slider.md-THEME_NAME-theme {
     background-color: '{{foreground-2}}';
   }
   .md-focus-ring {
-    border-color: '{{foreground-4}}';
+    background-color: '{{accent-color}}';
   }
   .md-disabled-thumb {
     border-color: '{{background-color}}';
@@ -37,6 +37,9 @@ md-slider.md-THEME_NAME-theme {
   }
 
   &.md-warn {
+    .md-focus-ring {
+      background-color: '{{warn-color}}';
+    }
     .md-track.md-track-fill {
       background-color: '{{warn-color}}';
     }
@@ -57,6 +60,9 @@ md-slider.md-THEME_NAME-theme {
   }
 
   &.md-primary {
+    .md-focus-ring {
+      background-color: '{{primary-color}}';
+    }
     .md-track.md-track-fill {
       background-color: '{{primary-color}}';
     }

diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
@@ -183,10 +183,9 @@ md-slider {
   }
   .md-focus-ring {
     @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
-    border: 2px solid #D6D6D6;
-    background-color: transparent;
     transform: scale(0);
     transition: all 0.2s linear;
+    opacity: 0.26;
   }
   .md-disabled-thumb {
     @include slider-thumb-position(