fix(tabs): add sass variable for inactive opacity and pass it to the …

…colors loop
ionic-team · Jul 15, 2016 · 99efa36 · 99efa36
1 parent 0386476
commit 99efa36
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
@@ -12,7 +12,8 @@ $tabbar-md-item-icon-size:           2.4rem !default;
 $tabbar-md-item-height:              4.8rem !default;
 
 $tab-button-md-active-color:         $toolbar-md-active-color !default;
-$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, .7) !default;
+$tab-button-md-inactive-opacity:     .7 !default;
+$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, $tab-button-md-inactive-opacity) !default;
 
 
 ion-tabbar {
@@ -103,7 +104,7 @@ tab-highlight {
     background-color: $color-base;
 
     .tab-button {
-      color: $color-contrast;
+      color: rgba($color-contrast, $tab-button-md-inactive-opacity);
     }
 
     .tab-button:hover:not(.disable-hover),

diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
@@ -12,7 +12,8 @@ $tabbar-wp-item-icon-size:           2.4rem !default;
 $tabbar-wp-item-height:              4.8rem !default;
 
 $tab-button-wp-active-color:         $toolbar-wp-active-color !default;
-$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, .7) !default;
+$tab-button-wp-inactive-opacity:     .7 !default;
+$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, $tab-button-wp-inactive-opacity) !default;
 
 $tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
 
@@ -96,7 +97,7 @@ ion-tabbar {
     background-color: $color-base;
 
     .tab-button {
-      color: $color-contrast;
+      color: rgba($color-contrast, $tab-button-wp-inactive-opacity);
     }
 
     .tab-button:hover:not(.disable-hover),