fix(tabs): remove flex; bring ink into same parent as links (#3331)

andrewseguin · kara · commit 00de2d735daf · 2017-03-01T10:49:37.000-08:00
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.html b/src/lib/tabs/tab-nav-bar/tab-nav-bar.html
@@ -1,5 +1,5 @@
 <div class="mat-tab-links">
   <ng-content></ng-content>
+  <md-ink-bar></md-ink-bar>
 </div>
 
-<md-ink-bar></md-ink-bar>
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -7,13 +7,14 @@
 }
 
 .mat-tab-links {
-  display: flex;
   position: relative;
 }
 
 // Wraps each link in the header
 .mat-tab-link {
   @include tab-label;
+  display: inline-block;
+  vertical-align: top;
   text-decoration: none;  // Removes anchor underline styling
   position: relative;
   overflow: hidden;  // Keeps the ripple from extending outside the element bounds

Original file line number	Diff line number	Diff line change
`@@ -7,13 +7,14 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.mat-tab-links {`
`10`		`- display: flex;`
`11`	`10`	`position: relative;`
`12`	`11`	`}`
`13`	`12`
`14`	`13`	`// Wraps each link in the header`
`15`	`14`	`.mat-tab-link {`
`16`	`15`	`@include tab-label;`
	`16`	`+ display: inline-block;`
	`17`	`+ vertical-align: top;`
`17`	`18`	`text-decoration: none; // Removes anchor underline styling`
`18`	`19`	`position: relative;`
`19`	`20`	`overflow: hidden; // Keeps the ripple from extending outside the element bounds`