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

- remove var usage;

Browse Source
This commit is contained in:
João Ferreira
2025-11-04 17:07:22 +00:00
parent b3fd9fb911
commit 00ee275caa
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,44 +43,58 @@
// -------------------------------------------------- // --------------------------------------------------
:host(.button-solid) { :host(.button-solid) {
--background-activated: var(--ion-color-shade, #{globals.ion-color(primary, shade)}); --background-activated: #{globals.$ion-bg-primary-base-press};
--background-hover: var(--ion-color-shade, #{globals.ion-color(primary, shade)}); --background-hover: #{globals.$ion-bg-primary-base-press};
--background-focused: transparent; --background-focused: transparent;
--background-hover-opacity: 1; --background-hover-opacity: 1;
--background: var(--ion-color-base, #{globals.ion-color(primary, base)}); --background: #{globals.ion-color(primary, base)};
--color: var(--ion-color-contrast, #{globals.ion-color(primary, contrast)}); --color: #{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);
} }
:host(.button-solid.ion-color) {
--background-activated: #{globals.current-color(shade)};
--background-hover: #{globals.current-color(shade)};
--background: #{globals.current-color(base)};
--color: #{globals.current-color(contrast)};
}
// Outline Button // Outline Button
// -------------------------------------------------- // --------------------------------------------------
: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: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)}); --background-activated: #{globals.$ion-bg-primary-subtle-press};
--background-focused: transparent; --background-focused: transparent;
--background-hover: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)}); --background-hover: #{globals.$ion-bg-primary-subtle-press};
--background-hover-opacity: 1; --background-hover-opacity: 1;
--border-color: var(--ion-color-base, #{globals.ion-color(primary, base)}); --border-color: #{globals.ion-color(primary, base)};
--color: var(--ion-color-base, #{globals.ion-color(primary, base)}); --color: #{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);
} }
:host(.button-outline.ion-color) {
--background-activated: #{globals.current-color(shade, $subtle: true)};
--background-hover: #{globals.current-color(shade, $subtle: true)};
--border-color: #{globals.current-color(base)};
--color: #{globals.current-color(base)};
}
// Warning Outline Button - use foreground color for text and border // Warning Outline Button - use foreground color for text and border
:host(.button-outline.ion-color-warning) .button-native { :host(.button-outline.ion-color-warning) .button-native {
--ion-color-base: var(--ion-color-warning-foreground); --ion-color-base: #{globals.ion-color(warning, foreground)};
} }
// Clear Button // Clear Button
// -------------------------------------------------- // --------------------------------------------------
:host(.button-clear) { :host(.button-clear) {
--background-activated: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)}); --background-activated: #{globals.$ion-bg-primary-subtle-press};
--background-focused: transparent; --background-focused: transparent;
--background-hover: var(--ion-color-subtle-shade, #{globals.ion-color(primary, shade, $subtle: true)}); --background-hover: #{globals.$ion-bg-primary-subtle-press};
--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);
@ -88,8 +102,11 @@
} }
:host(.button-clear.ion-color) { :host(.button-clear.ion-color) {
--background-activated: #{globals.current-color(shade, $subtle: true)};
--background-hover: #{globals.current-color(shade, $subtle: true)};
.button-native { .button-native {
--ion-color-base: var(--ion-color-foreground, #{globals.current-color(foreground)}); --ion-color-base: #{globals.current-color(foreground)};
} }
} }