javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

8
packages/core/src/components/toggle/toggle.ios.scss
View File

@@ -151,18 +151,18 @@
// iOS Toggle Color Mixin
// --------------------------------------------------
@mixin ios-toggle-theme($color-name, $color-base) {
@mixin ios-toggle-theme($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.toggle-ios-#{$color-name}.toggle-checked .toggle-icon {
background-color: $color-base;
}
}
// Generate iOS Toggle Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-toggle-theme($color-name, $color-base);
@each $color-name, $color-value in $colors-ios {
@include ios-toggle-theme($color-name);
}

6
packages/core/src/components/toggle/toggle.ios.vars.scss
View File

@@ -18,13 +18,13 @@ $toggle-ios-border-width: 2px !default;
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
/// @prop - Background color of the unchecked toggle
$toggle-ios-background-color-off: $list-ios-background-color !default;
$toggle-ios-background-color-off: $item-ios-background-color !default;
/// @prop - Border color of the unchecked toggle
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
$toggle-ios-border-color-off: $background-ios-color-step-100 !default;
/// @prop - Background color of the checked toggle
$toggle-ios-background-color-on: color($colors-ios, primary) !default;
$toggle-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Width of the toggle handle
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;

11
packages/core/src/components/toggle/toggle.md.scss
View File

@@ -118,22 +118,23 @@
// Material Design Color Mixin
// --------------------------------------------------
@mixin toggle-theme-md($color-name, $color-base) {
@mixin toggle-theme-md($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-tint: ion-color($colors-md, $color-name, tint, md);
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
background-color: lighten($color-base, 25%);
background-color: $color-tint;
}
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
background-color: $color-base;
}
}
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include toggle-theme-md($color-name, $color-base);
@each $color-name, $color-value in $colors-md {
@include toggle-theme-md($color-name);
}

6
packages/core/src/components/toggle/toggle.md.vars.scss
View File

@@ -6,7 +6,7 @@
// --------------------------------------------------
/// @prop - Color of the active toggle
$toggle-md-active-color: color($colors-md, primary) !default;
$toggle-md-active-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Width of the toggle track
$toggle-md-track-width: 36px !default;
@@ -15,10 +15,10 @@ $toggle-md-track-width: 36px !default;
$toggle-md-track-height: 14px !default;
/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off: $list-md-border-color !default;
$toggle-md-track-background-color-off: $item-md-border-color !default;
/// @prop - Background color of the checked toggle track
$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
$toggle-md-track-background-color-on: ion-color-alpha($colors-md, primary, $alpha-md-medium, md) !default;
/// @prop - Width of the toggle handle
$toggle-md-handle-width: 20px !default;