diff --git a/src/lib/tabs/_tabs-common.scss b/src/lib/tabs/_tabs-common.scss index c1ebd8464fc5..579a3939cbe5 100644 --- a/src/lib/tabs/_tabs-common.scss +++ b/src/lib/tabs/_tabs-common.scss @@ -1,12 +1,10 @@ @import '../core/style/variables'; $mat-tab-bar-height: 48px !default; - $mat-tab-animation-duration: 500ms !default; // Mixin styles for labels that are contained within the tab header. @mixin tab-label { - line-height: $mat-tab-bar-height; height: $mat-tab-bar-height; padding: 0 12px; cursor: pointer; @@ -14,6 +12,10 @@ $mat-tab-animation-duration: 500ms !default; opacity: 0.6; min-width: 160px; text-align: center; + display: inline-flex; + justify-content: center; + align-items: center; + white-space: nowrap; &:focus { outline: none; diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss index ce68eafd8ce5..8fe9274aea88 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss @@ -13,7 +13,6 @@ // 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; @@ -29,4 +28,4 @@ // Styling for the ink bar that displays near the activated anchor .mat-ink-bar { @include ink-bar; -} \ No newline at end of file +}