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

feat(components): add support for css variables (#13895)

Browse Source 
* wip

* wip

* wip

* wip

* CSS variable cleanup
added css variable example

* reverted example

* wip

* name fixes for tabbar and item

* wip - alpha support

* wip - all the things

* wip

* wip

* PR cleanup

* cleanup to ion-color

* switched to double quotes

* PR cleanup
Added TODO for color-mod comments

* reverted ios variable for transition.

* style cleanup
added -ion prefix to all css variables
updated default.css to mirror SASS values
cleanup/update to oceanic css

* removed 'dark' theme files
cleanup from scss-lint report
This commit is contained in:
Ross Gerbasi
2018-02-05 10:55:50 -06:00
committed by Brandy Carney
parent ded672294f
commit f41bb39ce3
234 changed files with 2699 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/chip-button/chip-button.ios.scss
View File

@ -29,7 +29,9 @@
// Generate iOS Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.chip-button-ios-#{$color-name} {
color: $color-contrast;

8
packages/core/src/components/chip-button/chip-button.ios.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-ios-background-color: color($colors-ios, primary) !default;
$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-ios-icon-fill-color: color-contrast($colors-ios, $chip-button-ios-background-color) !default;
$chip-button-ios-icon-fill-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the clear chip button
$chip-button-ios-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-ios-clear-text-color: color($colors-ios, primary) !default;
$chip-button-ios-clear-text-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-ios-clear-icon-fill-color: color($colors-ios, primary) !default;
$chip-button-ios-clear-icon-fill-color: ion-color($colors-ios, primary, base, ios) !default;

5
packages/core/src/components/chip-button/chip-button.md.scss
View File

@ -29,7 +29,9 @@
// Generate Material Design Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.chip-button-md-#{$color-name} {
color: $color-contrast;
@ -47,5 +49,4 @@
.chip-button-clear-md-#{$color-name} .icon {
fill: $color-base;
}
}

8
packages/core/src/components/chip-button/chip-button.md.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-md-background-color: color($colors-md, primary) !default;
$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-md-icon-fill-color: color-contrast($colors-md, $chip-button-md-background-color) !default;
$chip-button-md-icon-fill-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default;
/// @prop - Background color of the clear chip button
$chip-button-md-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-md-clear-text-color: color($colors-md, primary) !default;
$chip-button-md-clear-text-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-md-clear-icon-fill-color: color($colors-md, primary) !default;
$chip-button-md-clear-icon-fill-color: ion-color($colors-md, primary, base, md) !default;