fix(tabs): make the text color opaque instead of the entire button

this affects `md` and `wp` mode. fixes #6638
ionic-team · Jul 8, 2016 · dd969a2 · dd969a2
1 parent d3be0af
commit dd969a2
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 6 deletions.
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
@@ -12,7 +12,7 @@ $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:       $toolbar-md-inactive-color !default;
+$tab-button-md-inactive-color:       rgba($toolbar-md-inactive-color, .7) !default;
 
 
 ion-tabbar {
@@ -31,11 +31,9 @@ ion-tabbar {
   font-weight: $tabbar-md-item-font-weight;
   color: $tab-button-md-inactive-color;
   box-shadow: none;
-  opacity: .7;
 
   &[aria-selected=true] {
     color: $tab-button-md-active-color;
-    opacity: 1;
   }
 }
 

diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
@@ -12,7 +12,7 @@ $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:       $toolbar-wp-inactive-color !default;
+$tab-button-wp-inactive-color:       rgba($toolbar-wp-inactive-color, .7) !default;
 
 $tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
 
@@ -32,12 +32,10 @@ ion-tabbar {
   font-weight: $tabbar-wp-item-font-weight;
   color: $tab-button-wp-inactive-color;
   box-shadow: none;
-  opacity: .7;
 
   &[aria-selected=true] {
     border-bottom-color: $tab-button-wp-active-color;
     color: $tab-button-wp-active-color;
-    opacity: 1;
   }
 
   &.activated {