From 6edebbb689b74150ac219140e2ec709e4df4bcdc Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 5 Dec 2014 12:10:05 -0600 Subject: [PATCH] feat(tabs): add active color state --- scss/_tabs.scss | 26 +++++ test/html/tabs-active.html | 198 +++++++++++++++++++++++++++++++++++++ 2 files changed, 224 insertions(+) create mode 100644 test/html/tabs-active.html diff --git a/scss/_tabs.scss b/scss/_tabs.scss index 4317a0add7..559b4bc9bc 100644 --- a/scss/_tabs.scss +++ b/scss/_tabs.scss @@ -208,6 +208,32 @@ @include tabs-color('tabs-color-energized',$energized); @include tabs-color('tabs-color-royal', $royal); @include tabs-color('tabs-color-dark', $dark); + +} + +@mixin tabs-standard-color($style, $color, $off-color:$dark) { + &.#{$style} { + .tab-item { + color: $off-color; + &.tab-item-active, + &.active, + &.activated { + color: $color; + } + } + } +} + +ion-tabs { + @include tabs-standard-color('tabs-color-active-light', $light, $dark); + @include tabs-standard-color('tabs-color-active-stable', $stable, $dark); + @include tabs-standard-color('tabs-color-active-positive', $positive, $dark); + @include tabs-standard-color('tabs-color-active-calm', $calm, $dark); + @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark); + @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark); + @include tabs-standard-color('tabs-color-active-energized',$energized, $dark); + @include tabs-standard-color('tabs-color-active-royal', $royal, $dark); + @include tabs-standard-color('tabs-color-active-dark', $dark, $light); } .tabs-top { diff --git a/test/html/tabs-active.html b/test/html/tabs-active.html new file mode 100644 index 0000000000..4f20989778 --- /dev/null +++ b/test/html/tabs-active.html @@ -0,0 +1,198 @@ + + + + + Tab Bars + + + + + + + + + + +
+

Tasks

+
+ + + + + + + {{item.title}} + + + + + + + +
+

Deadlines

+
+ +

Deadlines

+ + + + +
+

Settings

+
+ +

Settings

+ + + + +
+

Settings

+
+ +

Settings

+ + + + + + + + + + + +