fix(tabs): centered and adjusted vertical placement of css-only tab i…

…ndicator (#2141)
material-components · Feb 1, 2018 · e01bb84 · e01bb84
1 parent 0979105
commit e01bb84
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/packages/mdc-tabs/_mixins.scss b/packages/mdc-tabs/_mixins.scss
@@ -2,7 +2,7 @@
   @include mdc-theme-prop(background-color, text-primary-on-light);
 
   position: absolute;
-  left: 0;
+  bottom: 0;
   height: 2px;
   visibility: hidden;
 }
diff --git a/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss b/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss
@@ -20,11 +20,6 @@
 @import "./mixins";
 @import "../mixins";
 
-.mdc-tab-bar__indicator {
-  @include mdc-tab-bar-indicator-mixin_;
-  bottom: 0;
-}
-
 // postcss-bem-linter: define tab-bar
 
 @at-root {
@@ -37,14 +32,16 @@
   height: 48px;
   margin: 0 auto;
   text-transform: uppercase;
+}
 
-  &__indicator {
-    width: 100%;
+.mdc-tab-bar__indicator {
+  @include mdc-tab-bar-indicator-mixin_;
 
-    transform-origin: left top;
-    transition: mdc-animation-enter(transform, 240ms);
-    will-change: transform;
-  }
+  width: 100%;
+  left: 0;
+  transform-origin: left top;
+  transition: mdc-animation-enter(transform, 240ms);
+  will-change: transform;
 }
 
 .mdc-tab-bar--icons-with-text {

diff --git a/packages/mdc-tabs/tab/mdc-tab.scss b/packages/mdc-tabs/tab/mdc-tab.scss
@@ -97,7 +97,7 @@ $mdc-tab-with-icon-and-text-height: 72px;
 .mdc-tab__indicator {
   @include mdc-tab-bar-indicator-mixin_;
 
-  bottom: 2px;
+  left: 2px;
   width: calc(100% - 4px);
 }