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

crisbeto · jelbourn · commit 0398d53bae82 · 2018-12-20T10:26:44.000-08:00
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.
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 {

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,8 @@`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`.mat-checkbox-disabled {`
`64`		`- &.mat-checkbox-checked:not(.mat-checkbox-indeterminate) {`
	`64`	`+ &.mat-checkbox-checked,`
	`65`	`+ &.mat-checkbox-indeterminate {`
`65`	`66`	`.mat-checkbox-background {`
`66`	`67`	`background-color: $disabled-color;`
`67`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -360,12 +360,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;`
`360`	`360`	`opacity: 1;`
`361`	`361`	`transform: scaleX(1) rotate(0deg);`
`362`	`362`	`}`
`363`		`-`
`364`		`- &.mat-checkbox-disabled {`
`365`		`- .mat-checkbox-inner-container {`
`366`		`- opacity: 0.5;`
`367`		`- }`
`368`		`- }`
`369`	`363`	`}`
`370`	`364`
`371`	`365`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,8 @@`
`43`	`43`	`background: mat-color(map-get($theme, warn));`
`44`	`44`	`}`
`45`	`45`
`46`		`- .mat-pseudo-checkbox-checked {`
	`46`	`+ .mat-pseudo-checkbox-checked,`
	`47`	`+ .mat-pseudo-checkbox-indeterminate {`
`47`	`48`	`&.mat-pseudo-checkbox-disabled {`
`48`	`49`	`background: $disabled-color;`
`49`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,10 +45,6 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad`
`45`	`45`
`46`	`46`	`.mat-pseudo-checkbox-disabled {`
`47`	`47`	`cursor: default;`
`48`		`-`
`49`		`- &.mat-pseudo-checkbox-indeterminate {`
`50`		`- opacity: 0.5;`
`51`		`- }`
`52`	`48`	`}`
`53`	`49`
`54`	`50`	`.mat-pseudo-checkbox-indeterminate::after {`