mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 04:53:58 +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;
|
$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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
Reference in New Issue
Block a user