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): Improved mixins #4675

Merged
merged 4 commits into from
May 3, 2019
Merged

feat(tab): Improved mixins #4675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d325756
feat(tab): Improved mixins
patrickrodee May 3, 2019
2bbc166
WIP fixed
patrickrodee May 3, 2019
a1218de
Merge branch 'master' into tabmixins
patrickrodee May 3, 2019
da39816
WIP update readme
patrickrodee May 3, 2019
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
1 change: 1 addition & 0 deletions packages/mdc-tab/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 4 additions & 0 deletions packages/mdc-tab/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
5 changes: 5 additions & 0 deletions packages/mdc-tab/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
15 changes: 6 additions & 9 deletions packages/mdc-tab/mdc-tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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;
}

Expand All @@ -129,13 +127,12 @@
}

.mdc-tab--active {
@include mdc-tab-text-label-color(primary);
Copy link
Contributor

Choose a reason for hiding this comment

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

This breaks CSS Vars for label and icon color. We might need to revert this change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There's a PR to fix this I think: #4688

@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;
}
}

Expand Down