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

fix(button): update ion-color for ionic theme

Browse Source
This commit is contained in:
Maria Hutt
2025-11-05 09:59:17 -08:00
parent 21293da293
commit c546566b04
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,13 +53,6 @@
--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
// -------------------------------------------------- // --------------------------------------------------
@ -76,13 +69,6 @@
--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 {
border-color: #{globals.current-color(foreground)}; border-color: #{globals.current-color(foreground)};
@ -103,9 +89,16 @@
--ripple-color: var(--background-activated); --ripple-color: var(--background-activated);
} }
:host(.button-clear.ion-color) { // Ripple Effect
--background-activated: #{globals.current-color(shade, $subtle: true)}; // -------------------------------------------------------------------------------
--background-hover: #{globals.current-color(shade, $subtle: true)};
:host(.button-solid.ion-color) ion-ripple-effect {
color: globals.current-color(shade);
}
:host(.button-outline.ion-color) ion-ripple-effect,
:host(.button-clear.ion-color) ion-ripple-effect {
color: globals.current-color(shade, $subtle: true);
} }
// Button Sizes // Button Sizes
@ -225,8 +218,15 @@
background: globals.current-color(shade); background: globals.current-color(shade);
} }
:host(.button-outline.ion-color.ion-activated) .button-native::after,
:host(.button-clear.ion-color.ion-activated) .button-native::after {
background: globals.current-color(shade, $subtle: true);
}
:host(.ion-activated) .button-native:has(ion-ripple-effect)::after, :host(.ion-activated) .button-native:has(ion-ripple-effect)::after,
:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after { :host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after,
:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after {
background: transparent; background: transparent;
} }
@ -237,6 +237,11 @@
:host(.button-solid.ion-color:hover) .button-native::after { :host(.button-solid.ion-color:hover) .button-native::after {
background: globals.current-color(shade); background: globals.current-color(shade);
} }
:host(.button-outline.ion-color:hover) .button-native::after,
:host(.button-clear.ion-color:hover) .button-native::after {
background: globals.current-color(shade, $subtle: true);
}
} }
// Button: Disabled // Button: Disabled