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

fix(segment): apply hover properly for segment with color (#18549)

Browse Source
This commit is contained in:
Brandy Carney
2019-06-21 16:17:09 -04:00
committed by GitHub
parent 832306cf6e
commit 78e477b2a7
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/segment/segment.ios.scss
View File

@ -27,7 +27,6 @@
:host(.ion-color)::slotted(ion-segment-button) { :host(.ion-color)::slotted(ion-segment-button) {
--border-color: #{current-color(base)}; --border-color: #{current-color(base)};
--background-hover: #{current-color(base, .04)};
background: transparent; background: transparent;
color: #{current-color(base)}; color: #{current-color(base)};
@ -52,6 +51,12 @@
color: #{current-color(contrast, $segment-ios-opacity-disabled)}; color: #{current-color(contrast, $segment-ios-opacity-disabled)};
} }
@media (any-hover: hover) {
:host(.ion-color)::slotted(ion-segment-button:hover:not(.segment-button-checked)) {
background: #{current-color(base, .1)};
}
}
// Segment: Default Toolbar // Segment: Default Toolbar
// -------------------------------------------------- // --------------------------------------------------

6
core/src/components/segment/segment.md.scss
View File

@ -23,7 +23,6 @@
// -------------------------------------------------- // --------------------------------------------------
:host(.ion-color)::slotted(ion-segment-button) { :host(.ion-color)::slotted(ion-segment-button) {
--background-hover: #{current-color(base, .04)};
--background-activated: #{current-color(base, .16)}; --background-activated: #{current-color(base, .16)};
--ripple-color: #{current-color(base)}; --ripple-color: #{current-color(base)};
@ -40,6 +39,11 @@
color: #{current-color(base)}; color: #{current-color(base)};
} }
@media (any-hover: hover) {
:host(.ion-color)::slotted(ion-segment-button:hover) {
background: #{current-color(base, .04)};
}
}
// Segment: Default Toolbar // Segment: Default Toolbar
// -------------------------------------------------- // --------------------------------------------------