fix(checkbox): incorrect ripple color when unchecked (#13569)

Currently no matter whether the checkbox is checked, its ripple always uses the theme color. These changes align it with the other components and the spec where the ripple is the base color when unchecked.
angular · May 14, 2019 · b4a9c62 · b4a9c62
1 parent 6643735
commit b4a9c62
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
@@ -92,17 +92,24 @@
     }
   }
 
-  .mat-checkbox:not(.mat-checkbox-disabled) {
-    &.mat-primary .mat-checkbox-ripple .mat-ripple-element {
-      background-color: mat-color($primary);
+  // Switch this to a solid color since we're using `opacity`
+  // to control how opaque the ripple should be.
+  .mat-checkbox .mat-ripple-element {
+    background-color: map_get(map-get($theme, foreground), base);
+  }
+
+  .mat-checkbox-checked:not(.mat-checkbox-disabled),
+  .mat-checkbox:active:not(.mat-checkbox-disabled) {
+    &.mat-primary .mat-ripple-element {
+      background: mat-color($primary);
     }
 
-    &.mat-accent .mat-checkbox-ripple .mat-ripple-element {
-      background-color: mat-color($accent);
+    &.mat-accent .mat-ripple-element {
+      background: mat-color($accent);
     }
 
-    &.mat-warn .mat-checkbox-ripple .mat-ripple-element {
-      background-color: mat-color($warn);
+    &.mat-warn .mat-ripple-element {
+      background: mat-color($warn);
     }
   }
 }