Skip to content

Commit 517b698

Browse files
committed
fix(button): button hover should match pressed state
1 parent 0806f51 commit 517b698

File tree

1 file changed

+17
-8
lines changed

1 file changed

+17
-8
lines changed

core/src/components/button/button.ionic.scss

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@
4444

4545
:host(.button-solid) {
4646
--background-activated: #{globals.ion-color(primary, shade)};
47-
--background-hover: #{globals.ion-color(primary, contrast)};
47+
--background-hover: #{globals.ion-color(primary, shade)};
4848
--background-focused: transparent;
49-
--background-hover-opacity: 0.08;
49+
--background-hover-opacity: 1;
5050
--ripple-opacity: var(--background-activated-opacity, 1);
5151
--ripple-color: var(--background-activated);
5252
}
@@ -57,10 +57,10 @@
5757
:host(.button-outline) {
5858
--border-width: #{globals.$ion-border-size-025};
5959
--border-style: #{globals.$ion-border-style-solid};
60-
--background-activated: #{globals.$ion-primitives-neutral-200};
60+
--background-activated: #{globals.$ion-bg-neutral-subtlest-press};
6161
--background-focused: transparent;
62-
--background-hover: #{globals.ion-color(primary, base)};
63-
--background-hover-opacity: 0.04;
62+
--background-hover: #{globals.$ion-bg-neutral-subtlest-press};
63+
--background-hover-opacity: 1;
6464
--ripple-opacity: var(--background-activated-opacity, 1);
6565
--ripple-color: var(--background-activated);
6666
}
@@ -69,10 +69,10 @@
6969
// --------------------------------------------------
7070

7171
:host(.button-clear) {
72-
--background-activated: #{globals.$ion-primitives-neutral-200};
72+
--background-activated: #{globals.$ion-bg-neutral-subtlest-press};
7373
--background-focused: transparent;
74-
--background-hover: #{globals.ion-color(primary, base)};
75-
--background-hover-opacity: 0.04;
74+
--background-hover: #{globals.$ion-bg-neutral-subtlest-press};
75+
--background-hover-opacity: 1;
7676
--ripple-opacity: var(--background-activated-opacity, 1);
7777
--ripple-color: var(--background-activated);
7878
}
@@ -228,6 +228,15 @@
228228
background: transparent;
229229
}
230230

231+
// Button: Hover
232+
// --------------------------------------------------
233+
234+
@media (any-hover: hover) {
235+
:host(.button-solid.ion-color:hover) .button-native::after {
236+
background: globals.current-color(shade);
237+
}
238+
}
239+
231240
// Button: Disabled
232241
// --------------------------------------------------
233242

0 commit comments

Comments
 (0)