|
44 | 44 |
|
45 | 45 | :host(.button-solid) { |
46 | 46 | --background-activated: #{globals.ion-color(primary, shade)}; |
47 | | - --background-hover: #{globals.ion-color(primary, contrast)}; |
| 47 | + --background-hover: #{globals.ion-color(primary, shade)}; |
48 | 48 | --background-focused: transparent; |
49 | | - --background-hover-opacity: 0.08; |
| 49 | + --background-hover-opacity: 1; |
50 | 50 | --ripple-opacity: var(--background-activated-opacity, 1); |
51 | 51 | --ripple-color: var(--background-activated); |
52 | 52 | } |
|
57 | 57 | :host(.button-outline) { |
58 | 58 | --border-width: #{globals.$ion-border-size-025}; |
59 | 59 | --border-style: #{globals.$ion-border-style-solid}; |
60 | | - --background-activated: #{globals.$ion-primitives-neutral-200}; |
| 60 | + --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; |
61 | 61 | --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; |
64 | 64 | --ripple-opacity: var(--background-activated-opacity, 1); |
65 | 65 | --ripple-color: var(--background-activated); |
66 | 66 | } |
|
69 | 69 | // -------------------------------------------------- |
70 | 70 |
|
71 | 71 | :host(.button-clear) { |
72 | | - --background-activated: #{globals.$ion-primitives-neutral-200}; |
| 72 | + --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; |
73 | 73 | --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; |
76 | 76 | --ripple-opacity: var(--background-activated-opacity, 1); |
77 | 77 | --ripple-color: var(--background-activated); |
78 | 78 | } |
|
228 | 228 | background: transparent; |
229 | 229 | } |
230 | 230 |
|
| 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 | + |
231 | 240 | // Button: Disabled |
232 | 241 | // -------------------------------------------------- |
233 | 242 |
|
|
0 commit comments