Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat/tab/sass color mixins #1851

Merged
merged 11 commits into from
Jan 6, 2018
+181 −3
Merged

feat/tab/sass color mixins #1851

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7c658a6
WIP
Jan 3, 2018
8415d6a
Merge branch 'master' into feat/tab/sass-color-mixins
Jan 3, 2018
e5b7c65
fix(tabs): fixed merge conflict
Jan 3, 2018
2e071b4
Merge branch 'master' into feat/tab/sass-color-mixins
Jan 3, 2018
3b761a7
Merge branch 'master' into feat/tab/sass-color-mixins
Jan 3, 2018
c006c69
feat(tabs): update readme, add sass mixins for hover state
Jan 4, 2018
fa6e3f1
Merge branch 'master' into feat/tab/sass-color-mixins
Jan 4, 2018
314a31d
refactor(tabs): renamed ids in demo to use classes
Jan 5, 2018
c811dcd
Merge branch 'master' into feat/tab/sass-color-mixins
Jan 5, 2018
7e3d6ec
feat(tabs): update README and consolidate demo css
Jan 6, 2018
8c3a94e
Merge branch 'master' into feat/tab/sass-color-mixins
Jan 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions demos/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,18 @@
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Basic Tab Bar w/ Custom Label Color</legend>
<nav id="basic-tab-bar-custom-label-color" class="custom-label-color-tab mdc-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">CSS-Only Tab Bar</legend>
Expand All @@ -197,6 +209,18 @@
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">CSS-Only Tab Bar w/ Custom Label Color</legend>
<nav class="custom-label-color-tab mdc-tab-bar">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>

<section>
<div class="demo-tabs__scroller">
<h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
Expand Down Expand Up @@ -247,6 +271,24 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Icon Tab Labels w/ Custom Icon Color</legend>
<nav id="icon-tab-bar-custom-icon-color" class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
<a class="mdc-tab mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
</a>
<a class="mdc-tab" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-label="Favorites">favorite</i>
</a>
<a class="mdc-tab" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-label="nearby">person_pin</i>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">CSS-Only Icon Tab Labels</legend>
Expand All @@ -265,6 +307,24 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">CSS-Only Icon Tab Labels w/ Custom Icon Color</legend>
<nav class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
<a class="mdc-tab mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
</a>
<a class="mdc-tab" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-label="Favorites">favorite</i>
</a>
<a class="mdc-tab" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-label="nearby">person_pin</i>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Icon &amp; Text Labels</legend>
Expand All @@ -286,6 +346,27 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Icon &amp; Text Labels w/ Custom Colors</legend>
<nav id="icon-text-tab-bar-custom-colors" class="custom-ink-color-tab mdc-tab-bar mdc-tab-bar--icons-with-text">
<a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
<span class="mdc-tab__icon-text">Recents</span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-hidden="true">favorite</i>
<span class="mdc-tab__icon-text">Favorites</span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-hidden="true">person_pin</i>
<span class="mdc-tab__icon-text">Nearby</span>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">CSS-Only Icon &amp; Text Labels</legend>
Expand All @@ -307,6 +388,27 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
<fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">CSS-Only Icon &amp; Text Labels w/ Custom Colors</legend>
<nav class="custom-ink-color-tab mdc-tab-bar mdc-tab-bar--icons-with-text">
<a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
<i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
<span class="mdc-tab__icon-text">Recents</span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#favorites">
<i class="material-icons mdc-tab__icon" aria-hidden="true">favorite</i>
<span class="mdc-tab__icon-text">Favorites</span>
</a>
<a class="mdc-tab mdc-tab--with-icon-and-text" href="#nearby">
<i class="material-icons mdc-tab__icon" aria-hidden="true">person_pin</i>
<span class="mdc-tab__icon-text">Nearby</span>
</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
<fieldset>
</section>

<section>
<fieldset>
<legend class="mdc-typography--title">Primary Color Indicator</legend>
Expand Down Expand Up @@ -578,9 +680,12 @@ <h1 class="mdc-toolbar__title">Title</h1>

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'));
Expand Down Expand Up @@ -651,10 +756,13 @@ <h1 class="mdc-toolbar__title">Title</h1>

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();
Expand Down
40 changes: 40 additions & 0 deletions demos/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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--active {
@include mdc-tab-label-ink-color($material-color-indigo-500);
}

.custom-label-color-tab {
.mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-label-ink-color($material-color-deep-purple-200);
}
.mdc-tab:hover {
@include mdc-tab-label-ink-color($material-color-indigo-500);
}
}

.custom-icon-color-tab .mdc-tab--active {
@include mdc-tab-icon-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);
}
.mdc-tab:hover {
@include mdc-tab-icon-ink-color($material-color-indigo-500);
}
}

.custom-ink-color-tab .mdc-tab--active {
@include mdc-tab-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);
}
.mdc-tab:hover {
@include mdc-tab-ink-color($material-color-indigo-500);
}
}
13 changes: 13 additions & 0 deletions packages/mdc-tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, and `.foo-tab.mdc-tab--active` to select your active tabs.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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, and .foo-tab.mdc-tab--active to select your active tabs.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I definitely have to get better at Readmes

Thanks!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe also mention the :hover case as well.

#### `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
Expand Down
16 changes: 16 additions & 0 deletions packages/mdc-tabs/tab/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}
7 changes: 4 additions & 3 deletions packages/mdc-tabs/tab/mdc-tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down