fix(checkbox): Fix visibility in Windows high-contrast mode (#2672)

material-components · May 31, 2018 · eadec3c · eadec3c
1 parent a02397a
commit eadec3c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss
@@ -76,7 +76,7 @@
   }
 
   .mdc-checkbox__mixedmark {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 
@@ -365,9 +365,11 @@
 
 @mixin mdc-checkbox__mixedmark_ {
   width: 100%;
-  height: floor($mdc-checkbox-mark-stroke-size);
+  height: 0;
   transform: scaleX(0) rotate(0deg);
   transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
+  border-width: floor($mdc-checkbox-mark-stroke-size) / 2;
+  border-style: solid;
   opacity: 0;
 }
 

diff --git a/packages/mdc-radio/_mixins.scss b/packages/mdc-radio/_mixins.scss
@@ -34,7 +34,7 @@
 @mixin mdc-radio-ink-color($color) {
   // stylelint-disable-next-line selector-max-specificity
   .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(border-color, $color);
   }
 }
 

diff --git a/packages/mdc-radio/mdc-radio.scss b/packages/mdc-radio/mdc-radio.scss
@@ -41,7 +41,7 @@
   cursor: pointer;
 
   /* @alternate */
-  will-change: opacity, transform, border-color, background-color, color;
+  will-change: opacity, transform, border-color, color;
 
   // Container for radio circles and ripple.
   &__background {
@@ -88,7 +88,9 @@
     width: 100%;
     height: 100%;
     transform: scale(0, 0);
-    transition: mdc-radio-exit(transform), mdc-radio-exit(background-color);
+    transition: mdc-radio-exit(transform), mdc-radio-exit(border-color);
+    border-width: 10px;
+    border-style: solid;
     border-radius: 50%;
   }
 
@@ -124,7 +126,7 @@
     }
 
     .mdc-radio__inner-circle {
-      transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
+      transition: mdc-radio-enter(transform), mdc-radio-enter(border-color);
     }
   }
 }
@@ -138,7 +140,7 @@
   + .mdc-radio__background {
     .mdc-radio__inner-circle {
       transform: scale(.5);
-      transition: mdc-radio-enter(transform), mdc-radio-enter(background-color);
+      transition: mdc-radio-enter(transform), mdc-radio-enter(border-color);
     }
   }
 }
@@ -153,7 +155,7 @@
     }
 
     .mdc-radio__inner-circle {
-      background-color: $mdc-radio-circle-color;
+      border-color: $mdc-radio-circle-color;
     }
   }
 }