Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/tab/sass color mixins #1851

Merged
merged 11 commits into from
Jan 6, 2018
Merged

feat/tab/sass color mixins #1851

Show file tree
Hide file tree
Changes from 4 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
33 changes: 24 additions & 9 deletions demos/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,27 +24,42 @@
@include mdc-tab-label-ink-color($material-color-indigo-500);
}

#basic-tab-bar-custom-label-color .mdc-tab:not(.mdc-tab--active),
#css-tab-bar-custom-label-color .mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-label-ink-color($material-color-deep-purple-200);
#basic-tab-bar-custom-label-color,
Copy link
Contributor

Choose a reason for hiding this comment

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

hmm, i didn't catch this in my first review, but I don't think we should be using ID CSS selectors in our demo pages. Its not what we would recommend our users to use. We would recommend they use CSS classes. So we should do the same.

so like:

.custom-label-color-tab {
  &:not(.mdc-tab--active) {
    @include mdc-tab-label-ink-color(purple);
  }
  &:hover {
    @include mdc-tab-label-ink-color(indigo);
  }
  &.mdc-tab--active {
    @include mdc-tab-label-ink-color(indigo);
  }
}

...and the same for all the CSS below

#css-tab-bar-custom-label-color {
.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);
}
}

#icon-tab-bar-custom-icon-color .mdc-tab--active,
#css-icon-tab-bar-custom-icon-color .mdc-tab--active {
@include mdc-tab-icon-ink-color($material-color-indigo-500);
}

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

#icon-text-tab-bar-custom-colors .mdc-tab--active,
#css-icon-text-tab-bar-custom-colors .mdc-tab--active {
@include mdc-tab-ink-color($material-color-indigo-500);
}

#icon-text-tab-bar-custom-colors .mdc-tab:not(.mdc-tab--active),
#css-icon-text-tab-bar-custom-colors .mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-ink-color($material-color-deep-purple-200);
#icon-text-tab-bar-custom-colors,
#css-icon-text-tab-bar-custom-colors {
.mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-ink-color($material-color-deep-purple-200);
}
.mdc-tab:hover {
@include mdc-tab-label-ink-color($material-color-indigo-500);
}
}
4 changes: 2 additions & 2 deletions packages/mdc-tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,10 +213,10 @@ dots.addEventListener('click', function (evt) {

### Sass Mixins

To customize the label ink color or the icon ink color you can use the following mixins. You would use these mixins on the `.mdc-tab:not(.mdc-tab--active)` selector or on the `.mdc-tab--active` selector to alter label or icon colors in the activated state.
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 icon and label to have the same color. Do not use this if you are using the `mdc-tab-label-ink-color` or `mdc-tab-icon-ink-color` mixins.
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.
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-tabs/tab/mdc-tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ $mdc-tab-with-icon-and-text-height: 72px;


&:hover {
@include mdc-theme-prop(color, text-primary-on-light);
@include mdc-tab-ink-color(text-primary-on-light);
}

&:focus {
Expand Down