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

fix(button/chip): move hover styles into media query (#16664)

Browse Source 
This ensures that all :hover styles live inside a (any-hover: hover)
media query.

closes #16108
This commit is contained in:
Cam Wiegert
2018-12-10 15:02:59 -06:00
committed by GitHub
parent f0ef061a6b
commit a2c7b9558b
3 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
core/src/components/button/button.ios.scss
View File

@ -31,12 +31,6 @@
--background-activated: #{ion-color(primary, shade)}; --background-activated: #{ion-color(primary, shade)};
} }
@media (any-hover: hover) {
:host(.button-solid:hover) {
--opacity: #{$button-ios-opacity-hover};
}
}
:host(.button-solid.activated) { :host(.button-solid.activated) {
--opacity: #{$button-ios-opacity-activated}; --opacity: #{$button-ios-opacity-activated};
} }
@ -61,11 +55,6 @@
// iOS Clear Button // iOS Clear Button
// -------------------------------------------------- // --------------------------------------------------
@media (any-hover: hover) {
:host(.button-clear:hover) {
--opacity: #{$button-ios-clear-opacity-hover};
}
}
:host(.button-clear.activated) { :host(.button-clear.activated) {
--opacity: #{$button-ios-clear-opacity-activated}; --opacity: #{$button-ios-clear-opacity-activated};
@ -123,3 +112,17 @@
:host(.button-strong) { :host(.button-strong) {
font-weight: #{$button-ios-strong-font-weight}; font-weight: #{$button-ios-strong-font-weight};
} }
// iOS Button Focus
// --------------------------------------------------
@media (any-hover: hover) {
:host(.button-solid:hover) {
--opacity: #{$button-ios-opacity-hover};
}
:host(.button-clear:hover) {
--opacity: #{$button-ios-clear-opacity-hover};
}
}

38
core/src/components/button/button.md.scss
View File

@ -51,14 +51,6 @@
--color-activated: #{ion-color(primary, base)}; --color-activated: #{ion-color(primary, base)};
} }
:host(.button-outline:hover) .button-native {
background: ion-color(primary, base, .04);
}
:host(.button-outline.ion-color:hover) .button-native {
background: current-color(base, .04);
}
:host(.button-outline.activated.ion-color) .button-native { :host(.button-outline.activated.ion-color) .button-native {
background: transparent; background: transparent;
} }
@ -75,14 +67,6 @@
--color-focused: #{ion-color(primary, base)}; --color-focused: #{ion-color(primary, base)};
} }
:host(.button-clear:hover) .button-native {
background: ion-color(primary, base, .04);
}
:host(.button-clear.ion-color:hover) .button-native {
background: current-color(base, .04);
}
// Material Design Round Button // Material Design Round Button
// -------------------------------------------------- // --------------------------------------------------
@ -130,3 +114,25 @@
::slotted(ion-icon[slot="icon-only"]) { ::slotted(ion-icon[slot="icon-only"]) {
@include padding(0); @include padding(0);
} }
// Material Design Button Sizes
// --------------------------------------------------
@media (any-hover: hover) {
:host(.button-outline:hover) .button-native {
background: ion-color(primary, base, .04);
}
:host(.button-outline.ion-color:hover) .button-native {
background: current-color(base, .04);
}
:host(.button-clear:hover) .button-native {
background: ion-color(primary, base, .04);
}
:host(.button-clear.ion-color:hover) .button-native {
background: current-color(base, .04);
}
}

20
core/src/components/chip/chip.scss
View File

@ -41,7 +41,6 @@
outline: none; outline: none;
} }
:host(:hover),
:host(:focus) { :host(:focus) {
--background: rgba(0, 0, 0, .16); --background: rgba(0, 0, 0, .16);
} }
@ -58,7 +57,6 @@
color: current-color(shade); color: current-color(shade);
} }
:host(.ion-color:hover),
:host(.ion-color:focus) { :host(.ion-color:focus) {
background: current-color(base, .12); background: current-color(base, .12);
} }
@ -85,7 +83,6 @@
border-color: current-color(base, .32); border-color: current-color(base, .32);
} }
:host(.chip-outline:not(.ion-color):hover),
:host(.chip-outline:not(.ion-color):focus) { :host(.chip-outline:not(.ion-color):focus) {
background: rgba(0, 0, 0, .04); background: rgba(0, 0, 0, .04);
} }
@ -128,3 +125,20 @@
::slotted(ion-avatar:last-child) { ::slotted(ion-avatar:last-child) {
@include margin(-4px, -8px, -4px, 8px); @include margin(-4px, -8px, -4px, 8px);
} }
// Hover
@media (any-hover: hover) {
:host(:hover) {
--background: rgba(0, 0, 0, .16);
}
:host(.ion-color:hover) {
background: current-color(base, .12);
}
:host(.chip-outline:not(.ion-color):hover) {
background: rgba(0, 0, 0, .04);
}
}