fix(tabs): incorrect ripple color for tabs with background (#8123)

devversion · andrewseguin · commit 02d3eb6c30e5 · 2017-11-01T20:21:35.000-07:00
* Tabs with a background color need to set the ripple colors to be the contrast color. Otherwise the ripples might be too dark/or light, depending on the color palette that is being used.
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
@@ -111,6 +111,12 @@
   .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
     border-color: mat-color($background-color, default-contrast, 0.4);
   }
+
+  // Set ripples color to be the contrast color of the new background. Otherwise the ripple
+  // color will be based on the app background color.
+  .mat-ripple-element {
+    background-color: mat-color($background-color, default-contrast, 0.12);
+  }
 }
 
 @mixin mat-tabs-typography($config) {

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,12 @@`
`111`	`111`	`.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {`
`112`	`112`	`border-color: mat-color($background-color, default-contrast, 0.4);`
`113`	`113`	`}`
	`114`	`+`
	`115`	`+ // Set ripples color to be the contrast color of the new background. Otherwise the ripple`
	`116`	`+ // color will be based on the app background color.`
	`117`	`+ .mat-ripple-element {`
	`118`	`+ background-color: mat-color($background-color, default-contrast, 0.12);`
	`119`	`+ }`
`114`	`120`	`}`
`115`	`121`
`116`	`122`	`@mixin mat-tabs-typography($config) {`