javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
this affects `md` and `wp` mode.

fixes #6638
This commit is contained in:
Brandy Carney
2016-07-08 17:20:18 -04:00
parent d3be0af46d
commit dd969a2958
2 changed files with 2 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/tabs/tabs.md.scss
View File

@ -12,7 +12,7 @@ $tabbar-md-item-icon-size: 2.4rem !default;
$tabbar-md-item-height: 4.8rem !default; $tabbar-md-item-height: 4.8rem !default;
$tab-button-md-active-color: $toolbar-md-active-color !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 { ion-tabbar {
@ -31,11 +31,9 @@ ion-tabbar {
font-weight: $tabbar-md-item-font-weight; font-weight: $tabbar-md-item-font-weight;
color: $tab-button-md-inactive-color; color: $tab-button-md-inactive-color;
box-shadow: none; box-shadow: none;
opacity: .7;
&[aria-selected=true] { &[aria-selected=true] {
color: $tab-button-md-active-color; color: $tab-button-md-active-color;
opacity: 1;
} }
} }

4
src/components/tabs/tabs.wp.scss
View File

@ -12,7 +12,7 @@ $tabbar-wp-item-icon-size: 2.4rem !default;
$tabbar-wp-item-height: 4.8rem !default; $tabbar-wp-item-height: 4.8rem !default;
$tab-button-wp-active-color: $toolbar-wp-active-color !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; $tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
@ -32,12 +32,10 @@ ion-tabbar {
font-weight: $tabbar-wp-item-font-weight; font-weight: $tabbar-wp-item-font-weight;
color: $tab-button-wp-inactive-color; color: $tab-button-wp-inactive-color;
box-shadow: none; box-shadow: none;
opacity: .7;
&[aria-selected=true] { &[aria-selected=true] {
border-bottom-color: $tab-button-wp-active-color; border-bottom-color: $tab-button-wp-active-color;
color: $tab-button-wp-active-color; color: $tab-button-wp-active-color;
opacity: 1;
} }
&.activated { &.activated {