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

- fallback for primary when color is not defined;

Browse Source 
- define outline warning color ;
This commit is contained in:
João Ferreira
2025-11-03 23:04:52 +00:00
parent 2037c36db1
commit 87034286bf
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,12 +43,12 @@
// -------------------------------------------------- // --------------------------------------------------
:host(.button-solid) { :host(.button-solid) {
--background-activated: #{globals.current-color(shade)}; --background-activated: var(--ion-color-shade, #{globals.ion-color(primary, shade)});
--background-hover: #{globals.ion-color(primary, shade)}; --background-hover: var(--ion-color-shade, #{globals.ion-color(primary, shade)});
--background-focused: transparent; --background-focused: transparent;
--background-hover-opacity: 1; --background-hover-opacity: 1;
--background: #{globals.ion-color(primary, base)}; --background: var(--ion-color-base, #{globals.ion-color(primary, base)});
--color: #{globals.ion-color(primary, contrast)}; --color: var(--ion-color-contrast, #{globals.ion-color(primary, contrast)});
--ripple-opacity: var(--background-activated-opacity, 1); --ripple-opacity: var(--background-activated-opacity, 1);
--ripple-color: var(--background-activated); --ripple-color: var(--background-activated);
} }
@ -59,23 +59,28 @@
:host(.button-outline) { :host(.button-outline) {
--border-width: #{globals.$ion-border-size-025}; --border-width: #{globals.$ion-border-size-025};
--border-style: #{globals.$ion-border-style-solid}; --border-style: #{globals.$ion-border-style-solid};
--background-activated: #{globals.current-color(shade, $subtle: true)}; --background-activated: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
--background-focused: transparent; --background-focused: transparent;
--background-hover: #{globals.current-color(shade, $subtle: true)}; --background-hover: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
--background-hover-opacity: 1; --background-hover-opacity: 1;
--border-color: #{globals.ion-color(primary, base)}; --border-color: var(--ion-color-base, #{globals.ion-color(primary, base)});
--color: #{globals.ion-color(primary, base)}; --color: var(--ion-color-base, #{globals.ion-color(primary, base)});
--ripple-opacity: var(--background-activated-opacity, 1); --ripple-opacity: var(--background-activated-opacity, 1);
--ripple-color: var(--background-activated); --ripple-color: var(--background-activated);
} }
// Warning Outline Button - use foreground color for text and border
:host(.button-outline.ion-color-warning) .button-native {
--ion-color-base: var(--ion-color-warning-foreground);
}
// Clear Button // Clear Button
// -------------------------------------------------- // --------------------------------------------------
:host(.button-clear) { :host(.button-clear) {
--background-activated: #{globals.current-color(shade, $subtle: true)}; --background-activated: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
--background-focused: transparent; --background-focused: transparent;
--background-hover: #{globals.current-color(shade, $subtle: true)}; --background-hover: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)});
--background-hover-opacity: 1; --background-hover-opacity: 1;
--color: #{globals.ion-color(primary, foreground)}; --color: #{globals.ion-color(primary, foreground)};
--ripple-opacity: var(--background-activated-opacity, 1); --ripple-opacity: var(--background-activated-opacity, 1);