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

chore(): sass vars should use background

Browse Source
This commit is contained in:
Adam Bradley
2015-09-21 16:25:13 -05:00
parent 6d402a9428
commit 0a4e927312
12 changed files with 94 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/switch/modes/ios.scss
View File

@@ -7,17 +7,17 @@ $switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: $switch-ios-height / 2 !default;
$switch-ios-off-bg-color: $list-background-color !default;
$switch-ios-off-background-color: $list-background-color !default;
$switch-ios-off-border-color: grayscale(lighten($list-border-color, 11%)) !default;
$switch-ios-on-bg-color: color(primary) !default;
$switch-ios-on-background-color: color(primary) !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-radius: $switch-ios-handle-height / 2 !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
$switch-ios-handle-bg-color: $switch-ios-off-bg-color !default;
$switch-ios-handle-background-color: $switch-ios-off-background-color !default;
$switch-ios-transition-duration: 300ms !default;
@@ -48,7 +48,7 @@ ion-switch {
&[aria-checked=true] .switch-icon {
// bg track, when checked
background-color: $switch-ios-on-bg-color;
background-color: $switch-ios-on-background-color;
}
@@ -65,7 +65,7 @@ ion-switch {
bottom: $switch-ios-border-width;
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-bg-color;
background-color: $switch-ios-off-background-color;
will-change: transform;
transform: scale3d(1, 1, 1);
@@ -93,7 +93,7 @@ ion-switch {
height: $switch-ios-handle-height;
border-radius: $switch-ios-handle-radius;
background-color: $switch-ios-handle-bg-color;
background-color: $switch-ios-handle-background-color;
box-shadow: $switch-ios-handle-box-shadow;
will-change: transform, width, left;

30
ionic/components/switch/modes/md.scss
View File

@@ -2,20 +2,20 @@
// Material Design Switch
// --------------------------------------------------
$switch-md-active-color: color(primary) !default;
$switch-md-active-color: color(primary) !default;
$switch-md-track-width: 36px !default;
$switch-md-track-height: 14px !default;
$switch-md-track-off-bg-color: $item-md-border-color !default;
$switch-md-track-on-bg-color: lighten($switch-md-active-color, 25%) !default;
$switch-md-track-width: 36px !default;
$switch-md-track-height: 14px !default;
$switch-md-track-off-background-color: $item-md-border-color !default;
$switch-md-track-on-background-color: lighten($switch-md-active-color, 25%) !default;
$switch-md-handle-width: 20px !default;
$switch-md-handle-height: 20px !default;
$switch-md-handle-off-bg-color: $background-color !default;
$switch-md-handle-on-bg-color: $switch-md-active-color !default;
$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$switch-md-handle-width: 20px !default;
$switch-md-handle-height: 20px !default;
$switch-md-handle-off-background-color: $background-color !default;
$switch-md-handle-on-background-color: $switch-md-active-color !default;
$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$switch-md-transition-duration: 300ms !default;
$switch-md-transition-duration: 300ms !default;
ion-switch {
@@ -37,14 +37,14 @@ ion-switch {
pointer-events: none;
border-radius: $switch-md-track-height;
background-color: $switch-md-track-off-bg-color;
background-color: $switch-md-track-off-background-color;
will-change: background-color;
transition: background-color $switch-md-transition-duration
}
&[aria-checked=true] .switch-icon {
// bg track, when not checked
background-color: $switch-md-track-on-bg-color;
background-color: $switch-md-track-on-background-color;
}
@@ -64,7 +64,7 @@ ion-switch {
border-radius: 50%;
box-shadow: $switch-md-handle-box-shadow;
background-color: $switch-md-handle-off-bg-color;
background-color: $switch-md-handle-off-background-color;
will-change: transform, background-color;
transition-property: transform, background-color;
@@ -73,7 +73,7 @@ ion-switch {
&[aria-checked=true] .switch-icon:after {
// knob, when not checked
background-color: $switch-md-handle-on-bg-color;
background-color: $switch-md-handle-on-background-color;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
}