fix(segment): checked can be changed dynamically

This commit is contained in:
Manu Mtz.-Almeida
2018-04-28 15:29:30 +02:00
parent 545d3c29a2
commit 78454b4f62
6 changed files with 30 additions and 43 deletions

View File

@ -42,18 +42,18 @@ ion-segment-button {
line-height: $segment-button-ios-icon-line-height;
}
&.segment-activated {
&.segment-checked {
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-transition-activated;
}
&:hover:not(.segment-activated) {
&:hover:not(.segment-checked) {
background-color: $segment-button-ios-background-color-hover;
transition: $segment-button-ios-transition-hover;
}
&:active:not(.segment-activated) {
&:active:not(.segment-checked) {
background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
@ -116,15 +116,15 @@ ion-segment-button {
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-activated) {
&:hover:not(.segment-checked) {
background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-hover);
}
&:active:not(.segment-activated) {
&:active:not(.segment-checked) {
background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-active);
}
&.segment-activated {
&.segment-checked {
color: $color-contrast;
background-color: $color-base;
}
@ -145,7 +145,7 @@ ion-segment-button {
@include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
.toolbar-ios-#{$color-name} .segment-button-ios.segment-checked {
color: $color-base;
}
}