feat(tabs): support stretched tabs in mat-tab-nav-bar

Adds support for stretched tabs in the tab nav bar. Also removes a duplicate selector. Fixes #8871.
angular · Mar 15, 2018 · f73387c · f73387c
1 parent c490ac1
commit f73387c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
@@ -29,7 +29,6 @@
   }
 }
 
-.mat-tab-group[mat-stretch-tabs] .mat-tab-label,
 .mat-tab-group[mat-stretch-tabs] .mat-tab-label {
   flex-basis: 0;
   flex-grow: 1;

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -8,6 +8,7 @@
 
 .mat-tab-links {
   position: relative;
+  display: flex;
 }
 
 // Wraps each link in the header
@@ -17,8 +18,14 @@
   text-decoration: none;  // Removes anchor underline styling
   position: relative;
   overflow: hidden;  // Keeps the ripple from extending outside the element bounds
+
+  [mat-stretch-tabs] & {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
 }
 
+
 @media ($mat-xsmall) {
   .mat-tab-link {
     min-width: 72px;