diff --git a/demos/tabs.html b/demos/tabs.html index 1fdd68810fa..38a07ff4bed 100644 --- a/demos/tabs.html +++ b/demos/tabs.html @@ -202,10 +202,18 @@
CSS-Only Tab Bar
@@ -214,10 +222,18 @@
CSS-Only Tab Bar w/ Custom Label Color
@@ -296,14 +312,16 @@

Tab Bar with Scroller

@@ -314,14 +332,16 @@

Tab Bar with Scroller

@@ -375,18 +395,20 @@

Tab Bar with Scroller

Recents + Favorites + Nearby + - -
+
@@ -396,18 +418,20 @@

Tab Bar with Scroller

Recents + Favorites + Nearby + - -
+
@@ -426,10 +450,18 @@

Tab Bar with Scroller

Primary Color Indicator - CSS-Only
@@ -450,10 +482,18 @@

Tab Bar with Scroller

Secondary Color Indicator - CSS-Only
@@ -535,10 +575,18 @@

Title

@@ -583,10 +631,18 @@

Title

@@ -629,10 +685,18 @@

Title

diff --git a/packages/mdc-tabs/README.md b/packages/mdc-tabs/README.md index e0a746ef743..fd4400e098c 100644 --- a/packages/mdc-tabs/README.md +++ b/packages/mdc-tabs/README.md @@ -86,6 +86,27 @@ icon-only, and text with icon. An example of each is available on the demo site. ``` +#### CSS Only Support + +In order for the indicator to appear, you will need to change your mark up if you are using CSS Only. Each `.mdc-tab` will have a child element with the class `.mdc-tab__indicator` as shown below: + +```html + +``` + #### RTL Support Tab Bars will reverse the order of their tabs if they are placed within an diff --git a/packages/mdc-tabs/_mixins.scss b/packages/mdc-tabs/_mixins.scss new file mode 100644 index 00000000000..c19c1757732 --- /dev/null +++ b/packages/mdc-tabs/_mixins.scss @@ -0,0 +1,8 @@ +@mixin mdc-tab-bar-indicator-mixin_ { + @include mdc-theme-prop(background-color, text-primary-on-light); + + position: absolute; + left: 0; + height: 2px; + visibility: hidden; +} diff --git a/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss b/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss index 67b866102be..4618ac988e9 100644 --- a/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss +++ b/packages/mdc-tabs/tab-bar/mdc-tab-bar.scss @@ -17,6 +17,12 @@ @import "@material/animation/functions"; @import "@material/theme/mixins"; @import "@material/rtl/mixins"; +@import "../mixins"; + +.mdc-tab-bar__indicator { + @include mdc-tab-bar-indicator-mixin_; + bottom: 0; +} // postcss-bem-linter: define tab-bar .mdc-tab-bar { @@ -27,13 +33,7 @@ text-transform: uppercase; &__indicator { - position: absolute; - bottom: 0; - left: 0; width: 100%; - height: 2px; - - @include mdc-theme-prop(background-color, text-primary-on-light); @include mdc-theme-dark(".mdc-tab-bar") { @include mdc-theme-prop(background-color, text-primary-on-dark); @@ -42,7 +42,6 @@ transform-origin: left top; transition: mdc-animation-enter(transform, 240ms); will-change: transform; - visibility: hidden; } // postcss-bem-linter: ignore diff --git a/packages/mdc-tabs/tab/mdc-tab.scss b/packages/mdc-tabs/tab/mdc-tab.scss index 12f8410fe1a..b13dbaa68dc 100644 --- a/packages/mdc-tabs/tab/mdc-tab.scss +++ b/packages/mdc-tabs/tab/mdc-tab.scss @@ -21,6 +21,7 @@ @import "@material/ripple/mixins"; @import "@material/rtl/mixins"; @import "./mixins"; +@import "../mixins"; $mdc-tab-with-text-height: 48px; $mdc-tab-with-icon-and-text-height: 72px; @@ -109,55 +110,35 @@ $mdc-tab-with-icon-and-text-height: 72px; } } -// stylelint-disable plugin/selector-bem-pattern -.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab { - position: relative; - - &::after { - display: none; - position: absolute; - top: $mdc-tab-with-text-height - 2px; - left: 0; - width: calc(100% - 4px); - height: 2px; - content: ""; - pointer-events: none; - - @include mdc-theme-prop(background-color, text-primary-on-light); +.mdc-tab__indicator { + @include mdc-tab-bar-indicator-mixin_; - @include mdc-theme-dark(".mdc-tab-bar", true) { - @include mdc-theme-prop(background-color, text-primary-on-dark); - } + bottom: 2px; + width: calc(100% - 4px); +} - .mdc-toolbar & { - @include mdc-theme-prop(background-color, text-primary-on-primary); - } +.mdc-tab-bar:not(.mdc-tab-bar-upgraded) { + .mdc-tab { + position: relative; } - &--active, - &:active, - &:hover { - &::after { - display: block; + .mdc-tab--active, + .mdc-tab:hover, + .mdc-tab:active { + .mdc-tab__indicator { + visibility: visible; } } - &:not(.mdc-tab--active):hover::after { + .mdc-tab:not(.mdc-tab--active):hover .mdc-tab__indicator { opacity: .38; } - &--active, - &:not(.mdc-tab--active):active::after { + .mdc-tab--active, + .mdc-tab:not(.mdc-tab--active):active .mdc-tab__indicator { opacity: .87; } } -// stylelint-enable plugin/selector-bem-pattern - -// stylelint-disable plugin/selector-bem-pattern -.mdc-tab-bar--icons-with-text:not(.mdc-tab-bar-upgraded) .mdc-tab::after { - top: $mdc-tab-with-icon-and-text-height - 2px; -} -// stylelint-enable plugin/selector-bem-pattern .mdc-tab.mdc-ripple-upgraded { @include mdc-ripple-surface;