feat(tab): Improved mixins (#4675)

material-components · May 3, 2019 · 252009f · 252009f
1 parent 7cc0832
commit 252009f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md
@@ -141,6 +141,7 @@ Mixin | Description
 `mdc-tab-active-states-color($color)`  | Customizes the color of the active tab's states.
 `mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.
 `mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.
+`mdc-tab-horizontal-padding($padding)` | Sets the horizontal padding of the tab.
 
 ## `MDCTab` Properties and Methods
 

diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss
@@ -25,6 +25,10 @@
 
 // Public mixins
 
+@mixin mdc-tab-horizontal-padding($padding) {
+  padding: 0 $padding;
+}
+
 @mixin mdc-tab-text-label-color($color) {
   .mdc-tab__text-label {
     @include mdc-theme-prop(color, $color);

diff --git a/packages/mdc-tab/_variables.scss b/packages/mdc-tab/_variables.scss
@@ -23,5 +23,10 @@
 $mdc-tab-icon-size: 24px !default;
 $mdc-tab-height: 48px !default;
 $mdc-tab-stacked-height: 72px !default;
+$mdc-tab-horizontal-padding: 24px !default;
 $mdc-tab-text-label-opacity: .6 !default;
 $mdc-tab-icon-opacity: .54 !default;
+$mdc-tab-text-label-color-default: rgba(mdc-theme-prop-value(on-surface), $mdc-tab-text-label-opacity) !default;
+$mdc-tab-icon-color-default: rgba(mdc-theme-prop-value(on-surface), $mdc-tab-icon-opacity) !default;
+$mdc-tab-text-label-color-active: mdc-theme-prop-value(primary);
+$mdc-tab-icon-color-active: mdc-theme-prop-value(primary);
diff --git a/packages/mdc-tab/mdc-tab.scss b/packages/mdc-tab/mdc-tab.scss
@@ -31,10 +31,11 @@
 // postcss-bem-linter: define tab
 
 .mdc-tab {
-  @include mdc-tab-text-label-color(on-surface);
-  @include mdc-tab-icon-color(on-surface);
+  @include mdc-tab-text-label-color($mdc-tab-text-label-color-default);
+  @include mdc-tab-icon-color($mdc-tab-icon-color-default);
   @include mdc-tab-indicator-surface;
   @include mdc-typography(button);
+  @include mdc-tab-horizontal-padding($mdc-tab-horizontal-padding);
 
   display: flex;
   flex: 1 0 auto;
@@ -43,7 +44,6 @@
   height: $mdc-tab-height;
   // Explicitly setting margin to 0 is to override safari default margin for button elements.
   margin: 0;
-  padding: 0 24px;
   border: none;
   outline: none;
   background: none;
@@ -89,13 +89,12 @@
 
 .mdc-tab__text-label,
 .mdc-tab__icon {
-  transition: 150ms color linear, 150ms opacity linear;
+  transition: 150ms color linear;
   z-index: 2;
 }
 
 .mdc-tab__text-label {
   display: inline-block;
-  opacity: $mdc-tab-text-label-opacity;
   // Setting line-height here overrides the line-height from the typography
   // mixin above. The line-height needs to be overridden so that the spacing
   // between the text label and the icon as well as the text label and the
@@ -106,7 +105,6 @@
 .mdc-tab__icon {
   width: $mdc-tab-icon-size;
   height: $mdc-tab-icon-size;
-  opacity: $mdc-tab-icon-opacity;
   font-size: $mdc-tab-icon-size;
 }
 
@@ -129,13 +127,12 @@
 }
 
 .mdc-tab--active {
-  @include mdc-tab-text-label-color(primary);
-  @include mdc-tab-icon-color(primary);
+  @include mdc-tab-text-label-color($mdc-tab-text-label-color-active);
+  @include mdc-tab-icon-color($mdc-tab-icon-color-active);
 
   .mdc-tab__text-label,
   .mdc-tab__icon {
     transition-delay: 100ms;
-    opacity: 1;
   }
 }