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

ionic-team · Jun 21, 2019 · 78e477b · 78e477b
1 parent 832306c
commit 78e477b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
@@ -27,7 +27,6 @@
 
 :host(.ion-color)::slotted(ion-segment-button) {
   --border-color: #{current-color(base)};
-  --background-hover: #{current-color(base, .04)};
 
   background: transparent;
   color: #{current-color(base)};
@@ -52,6 +51,12 @@
   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
 // --------------------------------------------------

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