From 6e88be3dcf3d7d807a240d4103f298f358c90c66 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Wed, 20 Mar 2019 08:14:53 -0700 Subject: [PATCH 1/5] feat(tab): Add Tab Sass mixins targeting active state colors --- demos/tab-bar.scss | 7 ++----- packages/mdc-tab/README.md | 3 +++ packages/mdc-tab/_mixins.scss | 17 +++++++++++++++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/demos/tab-bar.scss b/demos/tab-bar.scss index 1e1122da2af..a77abcffdc2 100644 --- a/demos/tab-bar.scss +++ b/demos/tab-bar.scss @@ -48,11 +48,8 @@ @include mdc-tab-text-label-color($material-color-blue-600); @include mdc-tab-icon-color($material-color-blue-600); @include mdc-tab-states-color($material-color-yellow-700); - } - - .mdc-tab--active { - @include mdc-tab-text-label-color($material-color-blue-900); - @include mdc-tab-icon-color($material-color-blue-900); + @include mdc-tab-active-text-label-color($material-color-blue-900); + @include mdc-tab-active-icon-color($material-color-blue-900); } .mdc-tab-indicator { diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index 5b1b21c7010..617b30484c7 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -136,8 +136,11 @@ Mixin | Description `mdc-tab-icon-color($color)` | Customizes the color of the tab icon. `mdc-tab-states-color($color)`| Customizes the base states color, which affects hover/focus states and the press ripple. `mdc-tab-ink-color($color)` | Customizes the text label, icon, and base states color. +`mdc-tab-active-text-label-color($color)` | Customizes the color of the active tab's text label. +`mdc-tab-active-icon-color($color)` | Customizes the color of the active tab's icon. `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-text-transform($transform)` | Sets the `text-transform` CSS property of the tab element. ## `MDCTab` Properties and Methods diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss index ae1fdd9c4a2..919f671ecdb 100644 --- a/packages/mdc-tab/_mixins.scss +++ b/packages/mdc-tab/_mixins.scss @@ -49,6 +49,18 @@ @include mdc-tab-text-label-color($color); } +@mixin mdc-tab-active-text-label-color($color) { + &.mdc-tab--active .mdc-tab__text-label { + @include mdc-theme-prop(color, $color); + } +} + +@mixin mdc-tab-active-icon-color($color) { + &.mdc-tab--active .mdc-tab__icon { + @include mdc-theme-prop(color, $color); + } +} + @mixin mdc-tab-parent-positioning { position: relative; } @@ -56,3 +68,8 @@ @mixin mdc-tab-fixed-width($width) { flex: 0 1 $width; } + +@mixin mdc-tab-text-transform($transform) { + text-transform: $transform; +} + From 94087e71c83f0d3a546f90a05e84d142c5e148a1 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Wed, 20 Mar 2019 08:46:41 -0700 Subject: [PATCH 2/5] WIP --- packages/mdc-tab/_mixins.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss index 919f671ecdb..079bb48f3c8 100644 --- a/packages/mdc-tab/_mixins.scss +++ b/packages/mdc-tab/_mixins.scss @@ -50,14 +50,14 @@ } @mixin mdc-tab-active-text-label-color($color) { - &.mdc-tab--active .mdc-tab__text-label { - @include mdc-theme-prop(color, $color); + &.mdc-tab--active { + @include mdc-tab-text-label-color($color); } } @mixin mdc-tab-active-icon-color($color) { - &.mdc-tab--active .mdc-tab__icon { - @include mdc-theme-prop(color, $color); + &.mdc-tab--active { + @include mdc-tab-icon-color($color); } } From db477311a8e1fda68493dc258808d4ebc05b32d5 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Wed, 20 Mar 2019 09:05:52 -0700 Subject: [PATCH 3/5] WIP --- packages/mdc-tab/_mixins.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss index 079bb48f3c8..4ab4f6c3128 100644 --- a/packages/mdc-tab/_mixins.scss +++ b/packages/mdc-tab/_mixins.scss @@ -69,7 +69,3 @@ flex: 0 1 $width; } -@mixin mdc-tab-text-transform($transform) { - text-transform: $transform; -} - From 4f096dd085c7f799a5ad1bd4c2749b61ab21f836 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Wed, 20 Mar 2019 09:08:30 -0700 Subject: [PATCH 4/5] WIP --- packages/mdc-tab/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index 617b30484c7..65858f49cf1 100644 --- a/packages/mdc-tab/README.md +++ b/packages/mdc-tab/README.md @@ -140,7 +140,6 @@ Mixin | Description `mdc-tab-active-icon-color($color)` | Customizes the color of the active tab's icon. `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-text-transform($transform)` | Sets the `text-transform` CSS property of the tab element. ## `MDCTab` Properties and Methods From 0a5968e041aca18405c27c08198fc77b54cc1057 Mon Sep 17 00:00:00 2001 From: Brendan O'Brien Date: Wed, 20 Mar 2019 09:10:08 -0700 Subject: [PATCH 5/5] WIP --- packages/mdc-tab/_mixins.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss index 4ab4f6c3128..eef2e5e7fb2 100644 --- a/packages/mdc-tab/_mixins.scss +++ b/packages/mdc-tab/_mixins.scss @@ -68,4 +68,3 @@ @mixin mdc-tab-fixed-width($width) { flex: 0 1 $width; } -