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

feat(core): add ionic colors (#29707)

Browse Source 
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-07-19 11:37:57 -07:00
committed by GitHub
parent 476a6ac837
commit 25e765d1f0
132 changed files with 797 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,6 +69,29 @@
}
}
// Button Colors
// --------------------------------------------------
// Solid Button with Color
:host(.button-solid.ion-color) .button-native {
background: globals.current-color(base);
color: globals.current-color(contrast);
}
// Outline Button with Color
:host(.button-outline.ion-color) .button-native {
border-color: globals.current-color(base);
background: transparent;
color: globals.current-color(base);
}
// Clear Button with Color
:host(.button-clear.ion-color) .button-native {
background: transparent;
color: globals.current-color(base);
}
// Button Sizes
// -------------------------------------------------------------------------------
@ -231,6 +254,32 @@
--background-hover: #{globals.$ionic-color-neutral-100};
}
/**
* Only allow overriding of opacity here
* as developers should not be overriding
* colors when using the color prop.
*/
:host(.button-solid.ion-color.ion-focused) .button-native::after {
background: #{current-color(contrast)};
}
:host(.button-clear.ion-color.ion-focused) .button-native::after,
:host(.button-outline.ion-color.ion-focused) .button-native::after {
background: #{current-color(base)};
}
@media (any-hover: hover) {
:host(.button-solid.ion-color:hover) .button-native::after {
background: #{current-color(contrast)};
}
:host(.button-clear.ion-color:hover) .button-native::after,
:host(.button-outline.ion-color:hover) .button-native::after {
background: #{current-color(base)};
}
}
// Button: Disabled
// --------------------------------------------------
@ -257,9 +306,9 @@
// Default Outline Color
:host(.button-outline) {
--border-color: #{globals.$ionic-color-primary-base};
--border-color: #{globals.ion-color(primary, base)};
--background: #{globals.$ionic-color-base-white};
--color: #{globals.$ionic-color-primary-base};
--color: #{globals.ion-color(primary, base)};
}
// Clear Button