fix(checkbox): incorrect color for disabled indeterminate checkbox (#…

…14478) When we were implementing the new Material Design spec, [we based our checkbox state off this design](https://camo.githubusercontent.com/293e382a98c90eb68f6e537a714379e843493dd0/68747470733a2f2f73746f726167652e676f6f676c65617069732e636f6d2f737065632d686f73742d6261636b75702f6d696f2d64657369676e25324661737365747325324631374173385659376a4c4b4f53346e443170794e39343539667168386c65724b7525324673656c656374696f6e636f6e74726f6c732d636865636b626f7865732d7374617465732e706e67) which shows selected disabled checkboxes to be greyed out, whereas indeterminate disabled checkboxes having a slight opacity. After checking with the MDC team, the above-mentioned designs are incorrect and all disabled checkboxes are supposed to be grey. Fixes #14415.
angular · Dec 20, 2018 · 0398d53 · 0398d53
1 parent 3824a05
commit 0398d53
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 12 deletions.
diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss
@@ -61,7 +61,8 @@
   }
 
   .mat-checkbox-disabled {
-    &.mat-checkbox-checked:not(.mat-checkbox-indeterminate) {
+    &.mat-checkbox-checked,
+    &.mat-checkbox-indeterminate {
       .mat-checkbox-background {
         background-color: $disabled-color;
       }

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
@@ -360,12 +360,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
     opacity: 1;
     transform: scaleX(1) rotate(0deg);
   }
-
-  &.mat-checkbox-disabled {
-    .mat-checkbox-inner-container {
-      opacity: 0.5;
-    }
-  }
 }
 
 

diff --git a/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -43,7 +43,8 @@
     background: mat-color(map-get($theme, warn));
   }
 
-  .mat-pseudo-checkbox-checked {
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate {
     &.mat-pseudo-checkbox-disabled {
       background: $disabled-color;
     }

diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -45,10 +45,6 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
 
 .mat-pseudo-checkbox-disabled {
   cursor: default;
-
-  &.mat-pseudo-checkbox-indeterminate {
-    opacity: 0.5;
-  }
 }
 
 .mat-pseudo-checkbox-indeterminate::after {