diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 351373c7fa..4fdf99a16d 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -31,12 +31,6 @@ --background-activated: #{ion-color(primary, shade)}; } -@media (any-hover: hover) { - :host(.button-solid:hover) { - --opacity: #{$button-ios-opacity-hover}; - } -} - :host(.button-solid.activated) { --opacity: #{$button-ios-opacity-activated}; } @@ -61,11 +55,6 @@ // iOS Clear Button // -------------------------------------------------- -@media (any-hover: hover) { - :host(.button-clear:hover) { - --opacity: #{$button-ios-clear-opacity-hover}; - } -} :host(.button-clear.activated) { --opacity: #{$button-ios-clear-opacity-activated}; @@ -123,3 +112,17 @@ :host(.button-strong) { 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}; + } +} diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index b16279a7e3..cbc821fefd 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -51,14 +51,6 @@ --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 { background: transparent; } @@ -75,14 +67,6 @@ --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 // -------------------------------------------------- @@ -130,3 +114,25 @@ ::slotted(ion-icon[slot="icon-only"]) { @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); + } +} diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index 805ac98796..b8d5c3c66c 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -41,7 +41,6 @@ outline: none; } -:host(:hover), :host(:focus) { --background: rgba(0, 0, 0, .16); } @@ -58,7 +57,6 @@ color: current-color(shade); } -:host(.ion-color:hover), :host(.ion-color:focus) { background: current-color(base, .12); } @@ -85,7 +83,6 @@ border-color: current-color(base, .32); } -:host(.chip-outline:not(.ion-color):hover), :host(.chip-outline:not(.ion-color):focus) { background: rgba(0, 0, 0, .04); } @@ -128,3 +125,20 @@ ::slotted(ion-avatar:last-child) { @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); + } +}