From 9bb3be544b5b2390e7a7ab31cf40047028494e20 Mon Sep 17 00:00:00 2001 From: Matty Goo Date: Fri, 5 Jan 2018 19:20:35 -0800 Subject: [PATCH] feat(tab): sass color mixins (#1851) --- demos/tabs.html | 108 +++++++++++++++++++++++++++++ demos/tabs.scss | 40 +++++++++++ packages/mdc-tabs/README.md | 13 ++++ packages/mdc-tabs/tab/_mixins.scss | 16 +++++ packages/mdc-tabs/tab/mdc-tab.scss | 7 +- 5 files changed, 181 insertions(+), 3 deletions(-) create mode 100644 packages/mdc-tabs/tab/_mixins.scss diff --git a/demos/tabs.html b/demos/tabs.html index bf552018bee..4879472eb96 100644 --- a/demos/tabs.html +++ b/demos/tabs.html @@ -185,6 +185,18 @@ +
+
+ Basic Tab Bar w/ Custom Label Color + +
+
+
CSS-Only Tab Bar @@ -197,6 +209,18 @@
+
+
+ CSS-Only Tab Bar w/ Custom Label Color + +
+
+

Tab Bar with Scroller

@@ -247,6 +271,24 @@

Tab Bar with Scroller

+
+
+ Icon Tab Labels w/ Custom Icon Color + +
+
+
CSS-Only Icon Tab Labels @@ -265,6 +307,24 @@

Tab Bar with Scroller

+
+
+ CSS-Only Icon Tab Labels w/ Custom Icon Color + +
+
+
Icon & Text Labels @@ -286,6 +346,27 @@

Tab Bar with Scroller

+
+
+ Icon & Text Labels w/ Custom Colors + +
+
+
CSS-Only Icon & Text Labels @@ -307,6 +388,27 @@

Tab Bar with Scroller

+
+
+ CSS-Only Icon & Text Labels w/ Custom Colors + +
+
+
Primary Color Indicator @@ -578,9 +680,12 @@

Title

window.demoTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#demo-tab-bar')); window.basicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#basic-tab-bar')); + window.basicTabBarCustomLabel = new mdc.tabs.MDCTabBar(document.querySelector('#basic-tab-bar-custom-label-color')); window.tabBarScroller = new mdc.tabs.MDCTabBarScroller(document.querySelector('#tab-bar-scroller')); window.iconTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#icon-tab-bar')); + window.iconTabBarCustomIcon = new mdc.tabs.MDCTabBar(document.querySelector('#icon-tab-bar-custom-icon-color')); window.iconTextTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#icon-text-tab-bar')); + window.iconTextTabBarLabel = new mdc.tabs.MDCTabBar(document.querySelector('#icon-text-tab-bar-custom-colors')); window.toolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar')); window.toolbarTabBarModified = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-modified')); window.primaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#primary-indicator-tab-bar')); @@ -651,10 +756,13 @@

Title

window.demoTabBar.layout(); window.basicTabBar.layout(); + window.basicTabBarCustomLabel.layout(); window.tabBarScroller.layout(); window.tabBarScroller.tabBar.layout(); + window.iconTabBarCustomIcon.layout(); window.iconTabBar.layout(); window.iconTextTabBar.layout(); + window.iconTextTabBarLabel.layout(); window.toolbarTabBar.layout(); window.primaryIndicatorTabBar.layout(); window.secondaryIndicatorTabBar.layout(); diff --git a/demos/tabs.scss b/demos/tabs.scss index dba7532d51c..7d2dc2b2661 100644 --- a/demos/tabs.scss +++ b/demos/tabs.scss @@ -15,5 +15,45 @@ // @import "./common"; +@import "../packages/mdc-tabs/tab/mixins"; @import "../packages/mdc-button/mdc-button"; @import "../packages/mdc-tabs/mdc-tabs"; + +.custom-label-color-tab { + .mdc-tab:not(.mdc-tab--active) { + @include mdc-tab-label-ink-color($material-color-deep-purple-200); + } +} + +.custom-label-color-tab { + .mdc-tab--active, + .mdc-tab:hover { + @include mdc-tab-label-ink-color($material-color-indigo-500); + } +} + +.custom-icon-color-tab { + .mdc-tab:not(.mdc-tab--active) { + @include mdc-tab-icon-ink-color($material-color-deep-purple-200); + } +} + +.custom-icon-color-tab { + .mdc-tab--active, + .mdc-tab:hover { + @include mdc-tab-icon-ink-color($material-color-indigo-500); + } +} + +.custom-ink-color-tab{ + .mdc-tab:not(.mdc-tab--active) { + @include mdc-tab-ink-color($material-color-deep-purple-200); + } +} + +.custom-ink-color-tab { + .mdc-tab--active, + .mdc-tab:hover { + @include mdc-tab-ink-color($material-color-indigo-500); + } +} diff --git a/packages/mdc-tabs/README.md b/packages/mdc-tabs/README.md index 1b653a3cf46..08bc8cb0a70 100644 --- a/packages/mdc-tabs/README.md +++ b/packages/mdc-tabs/README.md @@ -211,6 +211,19 @@ dots.addEventListener('click', function (evt) { }) ``` +### Sass Mixins + +To customize the ink color of any part of the tab, use the following mixins. We recommend you apply these mixins within CSS selectors like `.foo-tab:not(.mdc-tab--active)` to select your inactive tabs, `foo-tab:hover` to select the hover state of your tabs, and `.foo-tab.mdc-tab--active` to select your active tabs. + +#### `mdc-tab-ink-color` +Use this mixin to set the color of all ink on the tab. + +#### `mdc-tab-icon-ink-color` +This mixin customizes the icon ink color. + +#### `mdc-tab-label-ink-color` +This mixin customizes the label ink color. + ### Using the CSS-Only Component `mdc-tab-bar` ships with css for styling a tab layout according to the Material diff --git a/packages/mdc-tabs/tab/_mixins.scss b/packages/mdc-tabs/tab/_mixins.scss new file mode 100644 index 00000000000..dfd9fc88aa7 --- /dev/null +++ b/packages/mdc-tabs/tab/_mixins.scss @@ -0,0 +1,16 @@ +@import "@material/theme/mixins"; + +@mixin mdc-tab-ink-color($color) { + @include mdc-tab-label-ink-color($color); + @include mdc-tab-icon-ink-color($color); +} + +@mixin mdc-tab-label-ink-color($color) { + @include mdc-theme-prop(color, $color); +} + +@mixin mdc-tab-icon-ink-color($color) { + .mdc-tab__icon { + @include mdc-theme-prop(color, $color); + } +} diff --git a/packages/mdc-tabs/tab/mdc-tab.scss b/packages/mdc-tabs/tab/mdc-tab.scss index 32311316a27..12f8410fe1a 100644 --- a/packages/mdc-tabs/tab/mdc-tab.scss +++ b/packages/mdc-tabs/tab/mdc-tab.scss @@ -20,6 +20,7 @@ @import "@material/ripple/common"; @import "@material/ripple/mixins"; @import "@material/rtl/mixins"; +@import "./mixins"; $mdc-tab-with-text-height: 48px; $mdc-tab-with-icon-and-text-height: 72px; @@ -32,6 +33,7 @@ $mdc-tab-with-icon-and-text-height: 72px; // postcss-bem-linter: define tab .mdc-tab { @include mdc-typography(body2); + @include mdc-tab-ink-color(text-secondary-on-light); display: table-cell; position: relative; @@ -46,10 +48,9 @@ $mdc-tab-with-icon-and-text-height: 72px; overflow: hidden; vertical-align: middle; - @include mdc-theme-prop(color, text-secondary-on-light); &:hover { - @include mdc-theme-prop(color, text-primary-on-light); + @include mdc-tab-ink-color(text-primary-on-light); } &:focus { @@ -97,7 +98,7 @@ $mdc-tab-with-icon-and-text-height: 72px; } .mdc-tab--active { - @include mdc-theme-prop(color, text-primary-on-light); + @include mdc-tab-ink-color(text-primary-on-light); @include mdc-theme-dark(".mdc-tab-bar") { @include mdc-theme-prop(color, text-primary-on-dark);