From 02d3eb6c30e58d60929778c509658bf782d270ff Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 2 Nov 2017 04:21:35 +0100
Subject: [PATCH] fix(tabs): incorrect ripple color for tabs with background
 (#8123)

* 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.
---
 src/lib/tabs/_tabs-theme.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
index a0874b1c3c7..a887e1acee8 100644
--- 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) {