fix(checkbox): make checkmark in high contrast mode on IE visible. (#…

…2848)
material-components · May 31, 2018 · 9b2c6a1 · 9b2c6a1
1 parent eadec3c
commit 9b2c6a1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/mdc-checkbox/_variables.scss b/packages/mdc-checkbox/_variables.scss
@@ -17,6 +17,7 @@
 @import "@material/theme/variables";
 
 $mdc-checkbox-mark-color: mdc-theme-prop-value(on-primary);
+$mdc-checkbox-mark-color-high-contrast-black-on-white: black !default;
 $mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54);
 $mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), .26);
 $mdc-checkbox-baseline-theme-color: secondary;

diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -35,6 +35,18 @@
   @include mdc-checkbox-disabled-container-color_;
 }
 
+@media screen and (-ms-high-contrast: active) {
+  .mdc-checkbox__mixedmark {
+    margin: 0 1px;  // Extra horizontal space around mixedmark symbol.
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  @at-root {
+    @include mdc-checkbox-ink-color($mdc-checkbox-mark-color-high-contrast-black-on-white);
+  }
+}
+
 // Needed to disable hover effects on CSS-only (non-JS) checkboxes
 .mdc-checkbox--disabled {
   @include mdc-checkbox--disabled_;