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

fix(tabs): Fix tab img icon styling. #5041

Merged
merged 3 commits into from
Aug 29, 2019
Merged

fix(tabs): Fix tab img icon styling. #5041

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09b02b0
Fix tab img icon styling.
joyzhong Aug 29, 2019
dd02b6c
Add feat target
joyzhong Aug 29, 2019
55b18fc
Separate styles
joyzhong Aug 29, 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
47 changes: 27 additions & 20 deletions packages/mdc-tab/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
// from the other tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.
@mixin mdc-tab-without-ripple($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
$feat-animation: mdc-feature-create-target($query, animation);

// postcss-bem-linter: define tab

Expand All @@ -59,7 +60,32 @@

.mdc-tab__text-label,
.mdc-tab__icon {
@include mdc-tab__content-child_($query);
@include mdc-feature-targets($feat-animation) {
transition: 150ms color linear;
}

@include mdc-feature-targets($feat-structure) {
z-index: 2;
}
}

.mdc-tab__text-label {
@include mdc-feature-targets($feat-structure) {
display: inline-block;
// 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
// bottom of the tab remain the same.
line-height: 1;
}
}

.mdc-tab__icon {
@include mdc-feature-targets($feat-structure) {
width: $mdc-tab-icon-size;
height: $mdc-tab-icon-size;
font-size: $mdc-tab-icon-size;
}
}

.mdc-tab--stacked {
Expand Down Expand Up @@ -237,25 +263,6 @@
}
}

@mixin mdc-tab__content-child_($query: mdc-feature-all()) {
$feat-animation: mdc-feature-create-target($query, animation);
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-feature-targets($feat-animation) {
transition: 150ms color linear;
}

@include mdc-feature-targets($feat-structure) {
display: inline-block;
// 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
// bottom of the tab remain the same.
line-height: 1;
z-index: 2;
}
}

@mixin mdc-tab--stacked_($query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);

Expand Down