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

- fix outline and clear colors and ripple-effect;

Browse Source
This commit is contained in:
João Ferreira
2025-10-30 18:13:28 +00:00
parent 183a90ad84
commit 427dce0731
2 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,39 +59,56 @@
: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.$ion-bg-neutral-subtlest-press}; --background-activated: var(--ion-color-subtle-shade, #{globals.current-color(shade, $subtle: true)});
--background-focused: transparent; --background-focused: transparent;
--background-hover: #{globals.$ion-bg-neutral-subtlest-press}; --background-hover: var(--ion-color-subtle-shade, #{globals.current-color(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);
} }
// Provide fallbacks for ion-color-base for all colors
:host(.button-outline.ion-color.ion-color-warning){
.button-native {
--ion-color-base: #{globals.$ion-text-warning};
}
ion-ripple-effect {
--ion-color-base: var(--ion-color-base, #{globals.current-color(shade, $subtle: true)});
}
}
// Clear Button // Clear Button
// -------------------------------------------------- // --------------------------------------------------
:host(.button-clear) { :host(.button-clear) {
--background-activated: #{globals.$ion-bg-neutral-subtlest-press}; --background-activated: var(--ion-color-subtle-shade, #{globals.current-color( shade, $subtle: true)});
--background-focused: transparent; --background-focused: transparent;
--background-hover: #{globals.$ion-bg-neutral-subtlest-press}; --background-hover: var(--ion-color-subtle-shade, #{globals.current-color( 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);
--ripple-color: var(--background-activated); --ripple-color: var(--background-activated);
} }
:host(.button-clear.ion-color) {
.button-native {
--ion-color-base: var(--ion-color-foreground, #{globals.current-color(foreground)});
}
}
// Ripple Effect // Ripple Effect
// ------------------------------------------------------------------------------- // -------------------------------------------------------------------------------
:host(.button-solid.ion-color) ion-ripple-effect { :host(.button-solid.ion-color) ion-ripple-effect {
color: globals.current-color(shade); color: var(--ion-color-shade, #{globals.ion-color(primary, shade)});
} }
:host(.button-outline.ion-color) ion-ripple-effect, :host(.button-outline.ion-color) ion-ripple-effect,
:host(.button-clear.ion-color) ion-ripple-effect { :host(.button-clear.ion-color) ion-ripple-effect {
color: globals.$ion-primitives-neutral-200; color: var(--ion-color-subtle-shade, #{globals.current-color(shade, $subtle: true)});
} }
// Button Sizes // Button Sizes

3
core/src/components/button/test/theme-ionic/index.html
View File

@ -56,7 +56,8 @@
<ion-select-option value="primary">Primary</ion-select-option> <ion-select-option value="primary">Primary</ion-select-option>
<ion-select-option value="success">Success</ion-select-option> <ion-select-option value="success">Success</ion-select-option>
<ion-select-option value="warning">Warning</ion-select-option> <ion-select-option value="warning">Warning</ion-select-option>
<ion-select-option value="neutral">Neutral</ion-select-option> <ion-select-option value="medium">Medium</ion-select-option>
<ion-select-option value="danger">Danger</ion-select-option>
</ion-select> </ion-select>
</p> </p>