fix(switch): Refactor switch styles to show up in HC windows mode. (#…

…2853)
material-components · Jun 1, 2018 · ef159c8 · ef159c8
1 parent 9b2c6a1
commit ef159c8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
@@ -24,13 +24,15 @@
 @mixin mdc-switch-track-color($color) {
   .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background::before {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
 @mixin mdc-switch-knob-color($color) {
   // stylelint-disable-next-line selector-max-specificity
   .mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
@@ -48,13 +50,15 @@
 @mixin mdc-switch-unchecked-track-color_($color) {
   .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background::before {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
 @mixin mdc-switch-unchecked-knob-color_($color) {
   // stylelint-disable-next-line selector-max-specificity
   .mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob {
     @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
@@ -65,10 +69,18 @@
   }
 }
 
-@mixin mdc-switch-tap-target_ {
+@mixin mdc-switch-native-control_ {
   position: absolute;
   top: -14px;
   left: -14px;
   width: $mdc-switch-focus-ring-diameter;
   height: $mdc-switch-focus-ring-diameter;
 }
+
+@mixin mdc-switch-tap-target_ {
+  position: absolute;
+  top: -24px;
+  left: -24px;
+  width: $mdc-switch-focus-ring-diameter;
+  height: $mdc-switch-focus-ring-diameter;
+}
diff --git a/packages/mdc-switch/mdc-switch.scss b/packages/mdc-switch/mdc-switch.scss
@@ -26,10 +26,11 @@
   position: relative;
 
   &__native-control {
-    @include mdc-switch-tap-target_;
+    @include mdc-switch-native-control_;
 
     display: inline-block;
     margin-top: $mdc-switch-knob-vertical-offset_;
+    margin-left: 0;
     transition: mdc-switch-transition(transform);
     opacity: 0;
     cursor: pointer;
@@ -73,7 +74,9 @@
     left: 0;
     transition:
       mdc-switch-transition(opacity),
-      mdc-switch-transition(background-color);
+      mdc-switch-transition(background-color),
+      mdc-switch-transition(border-color);
+    border: 1px solid;
     border-radius: 7px;
     opacity: .38;
     content: "";
@@ -87,12 +90,15 @@
   display: block;
   position: absolute;
   top: $mdc-switch-knob-vertical-offset_;
+  box-sizing: border-box;
   width: $mdc-switch-knob-diameter;
   height: $mdc-switch-knob-diameter;
   transform: translateX(0);
   transition:
     mdc-switch-transition(transform),
-    mdc-switch-transition(background-color);
+    mdc-switch-transition(background-color),
+    mdc-switch-transition(border-color);
+  border: $mdc-switch-knob-diameter / 2 solid;
   border-radius: 50%;
   z-index: 1;
 
@@ -149,6 +155,8 @@
   }
 
   .mdc-switch__knob {
+    border-width: 1px;  // In high contrast mode, only show outline of the knob.
+    border-color: $mdc-switch-disabled-knob-color;
     background-color: $mdc-switch-disabled-knob-color;
   }
 }