diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index efd9b3c5a7..9e04406781 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -26,9 +26,10 @@ // iOS Solid Button // -------------------------------------------------- - -:host(.button-solid:hover) { - --opacity: #{$button-ios-opacity-hover}; +@media (any-hover: hover) { + :host(.button-solid:hover) { + --opacity: #{$button-ios-opacity-hover}; + } } :host(.button-solid.activated) { @@ -55,9 +56,10 @@ // iOS Clear Button // -------------------------------------------------- - -:host(.button-clear:hover) { - --opacity: #{$button-ios-clear-opacity-hover}; +@media (any-hover: hover) { + :host(.button-clear:hover) { + --opacity: #{$button-ios-clear-opacity-hover}; + } } :host(.button-clear.activated) { diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index da777a4377..f4cc3669c9 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -40,8 +40,10 @@ // iOS Toolbar Button Solid // -------------------------------------------------- -::slotted(*) .button-solid-ios:hover { - opacity: .4; +@media (any-hover: hover) { + ::slotted(*) .button-solid-ios:hover { + opacity: .4; + } } diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss index c9d0e9ddb9..e1ec9f797e 100644 --- a/core/src/components/searchbar/searchbar.ios.scss +++ b/core/src/components/searchbar/searchbar.ios.scss @@ -151,8 +151,10 @@ color: #{current-color(base)}; } -:host(.ion-color) .searchbar-cancel-button:hover { - color: #{current-color(tint)}; +@media (any-hover: hover) { + :host(.ion-color) .searchbar-cancel-button:hover { + color: #{current-color(tint)}; + } } // Searchbar in Toolbar Color diff --git a/core/src/components/tabbar/tab-button.scss b/core/src/components/tabbar/tab-button.scss index 84e0a7c7f9..2fff3cd560 100644 --- a/core/src/components/tabbar/tab-button.scss +++ b/core/src/components/tabbar/tab-button.scss @@ -34,7 +34,12 @@ background: var(--background-focused); } -.tab-btn:hover, +@media (any-hover: hover) { + .tab-btn:hover { + color: var(--color-selected); + } +} + .tab-btn-selected { color: var(--color-selected); } @@ -125,4 +130,4 @@ .tab-btn-selected .tab-btn-icon { transform: var(--icon-transform-selected); -} \ No newline at end of file +}