fix(material/tabs): coloring issues when a backgroundColor is set

Resolves several issues related to the color of icons and ripples in the tab header, when it has a non-default `backgroundColor`. Fixes #22587.
angular · May 2, 2021 · c6015b0 · c6015b0
1 parent 382b1b7
commit c6015b0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -129,8 +129,11 @@ $mat-tab-animation-duration: 500ms !default;
   .mat-mdc-tab-header-pagination-disabled {
     box-shadow: none;
     cursor: default;
-    opacity: 0.4;
     pointer-events: none;
+
+    .mat-mdc-tab-header-pagination-chevron {
+      opacity: 0.4;
+    }
   }
 
   .mat-mdc-tab-list {

diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss
@@ -77,13 +77,19 @@
       @include mdc-theme.prop(color, $foreground-color);
     }
 
+    .mdc-tab-indicator__content--underline,
+    .mat-mdc-tab-header-pagination-chevron,
+    .mat-mdc-focus-indicator::before {
+      @include mdc-theme.prop(border-color, $foreground-color);
+    }
+  }
+
+  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
     .mat-ripple-element, .mdc-tab__ripple::before {
       @include mdc-theme.prop(background-color, $foreground-color);
     }
 
-    .mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron,
-    .mat-mdc-focus-indicator::before,
-    .mat-mdc-focus-indicator::before {
+    .mat-mdc-tab-header-pagination-chevron {
       @include mdc-theme.prop(border-color, $foreground-color);
     }
   }

diff --git a/src/material-experimental/mdc-tabs/tab-header.scss b/src/material-experimental/mdc-tabs/tab-header.scss
@@ -9,12 +9,6 @@
   @include tabs-common.paginated-tab-header-container;
 }
 
-.mat-mdc-tab-header-pagination-disabled {
-  box-shadow: none;
-  cursor: default;
-  opacity: 0.4;
-}
-
 .mat-mdc-tab-labels {
   @include tabs-common.paginated-tab-header-item-wrapper('.mat-mdc-tab-header');
 }
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
@@ -117,20 +117,23 @@
   }
 
   // Set pagination chevrons to contrast background
+  > .mat-tab-header .mat-tab-header-pagination-chevron,
   > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
-  > .mat-tab-links .mat-focus-indicator::before,
+  > .mat-tab-link-container .mat-focus-indicator::before,
   > .mat-tab-header .mat-focus-indicator::before {
     border-color: theming.get-color-from-palette($background-color, default-contrast);
   }
 
+  > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
   > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
     border-color: theming.get-color-from-palette($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-tab-header .mat-ripple-element,
-  > .mat-tab-link-container .mat-ripple-element {
+  > .mat-tab-link-container .mat-ripple-element,
+  > .mat-tab-header-pagination .mat-ripple-element {
     background-color: theming.get-color-from-palette($background-color, default-contrast, 0.12);
   }
 }