fix(checkbox): Ignore CSS variables in Edge for __background::before

material-components · Sep 29, 2017 · 67129e9 · 67129e9
1 parent a7e2db4
commit 67129e9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md
@@ -255,4 +255,11 @@ not return an object.
 
 ## Theming
 
-> TK once mdc-theming lands.
+MDC Checkboxes use the theme's primary color by default for checked and indeterminate states, and are completely dark theme
+aware.
+
+### Caveat: Edge and CSS Variables
+
+In browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.
+However, due to Edge's buggy CSS variable support, the `background-color` for `.mdc-checkbox__background::before` will not honor CSS variables in Edge.
+This means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -98,7 +98,7 @@
     // The frame's ::before element is used as a focus indicator for the checkbox
     &::before {
       @include mdc-checkbox-cover-element;
-      @include mdc-theme-prop(background, primary);
+      @include mdc-theme-prop(background, primary, $edgeOptOut: true);
 
       width: 100%;
       height: 100%;