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

refactor(theming): alpha color refactor and theme cleanup (#14161)

Browse Source 
* Cleanup for iOS mode used in material variables
Refactor to alpha variables for colors in the color map
updated theme builder with new alpha variables
updated theme builder with duplicate default CSS modes

* moved alpha transform into css-var
removed ion-color-alpha
fixes for disabled css-variable mode
added defaults for user configurable variables

* revert to spinner related code
This commit is contained in:
Ross Gerbasi
2018-03-15 10:53:48 -05:00
committed by Brandy Carney
parent e729610dc8
commit 147a6090e4
38 changed files with 228 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/segment-button/segment-button.ios.scss
View File

@ -117,11 +117,11 @@ ion-segment-button {
color: $color-base;
&:hover:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-hover);
background-color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-hover);
}
&:active:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-activated);
background-color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-activated);
}
&.segment-activated {
@ -131,7 +131,7 @@ ion-segment-button {
}
.segment-button-disabled {
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-disabled);
color: ion-color($colors-ios, $color-name, base, ios, $alpha-ios-disabled);
}
}
}

6
core/src/components/segment-button/segment-button.ios.vars.scss
View File

@ -10,13 +10,13 @@ $segment-button-ios-background-color: transparent !default;
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background of the segment button when hovered
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-hover) !default;
$segment-button-ios-background-color-hover: ion-color($colors-ios, primary, base, ios, $alpha-ios-hover) !default;
/// @prop - Background of the segment button when active
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-activated) !default;
$segment-button-ios-background-color-active: ion-color($colors-ios, primary, base, ios, $alpha-ios-activated) !default;
/// @prop - Background of the activated segment button when active
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-disabled) !default;
$segment-button-ios-background-color-disabled: ion-color($colors-ios, primary, base, ios, $alpha-ios-disabled) !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;