fix(input): incorrectly handling nested themes (#19637)

crisbeto · jelbourn · commit 4a8ce63320e7 · 2020-06-29T08:51:06.000-07:00
The color selectors in the input theme were too broad which means that they won't work correctly if themes are nested. The issue can be reproduced by placing a form field inside a tab group with an `accent` palette. These changes fix the issue by making the selector more specific.
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
@@ -45,11 +45,11 @@
     }
   }
 
-  .mat-accent .mat-input-element {
+  .mat-form-field.mat-accent .mat-input-element {
     caret-color: mat-color($accent, text);
   }
 
-  .mat-warn .mat-input-element,
+  .mat-form-field.mat-warn .mat-input-element,
   .mat-form-field-invalid .mat-input-element {
     caret-color: mat-color($warn, text);
   }

Original file line number	Diff line number	Diff line change
`@@ -45,11 +45,11 @@`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`
`48`		`- .mat-accent .mat-input-element {`
	`48`	`+ .mat-form-field.mat-accent .mat-input-element {`
`49`	`49`	`caret-color: mat-color($accent, text);`
`50`	`50`	`}`
`51`	`51`
`52`		`- .mat-warn .mat-input-element,`
	`52`	`+ .mat-form-field.mat-warn .mat-input-element,`
`53`	`53`	`.mat-form-field-invalid .mat-input-element {`
`54`	`54`	`caret-color: mat-color($warn, text);`
`55`	`55`	`}`