mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
fix(tabs): make the text color opaque instead of the entire button
this affects `md` and `wp` mode. fixes #6638
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
Reference in New Issue
Block a user