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

md switch

Browse Source
This commit is contained in:
Adam Bradley
2015-08-18 13:25:32 -05:00
parent e9343e4ead
commit 34bcf3ff32
4 changed files with 106 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,16 +43,14 @@ $switch-ios-transition-duration: 200ms !default;
}
.switch-track {
background-color: $switch-ios-off-bg-color;
border: solid $switch-ios-border-width $switch-ios-off-border-color;
border-radius: $switch-ios-border-radius;
width: 100%;
height: 100%;
border: solid $switch-ios-border-width $switch-ios-off-border-color;
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-off-bg-color;
will-change: border-width, opacity;
transition-property: border-width, opacity;
transition-duration: $switch-ios-transition-duration + 50ms;
transition-delay: 100ms;
}
.switch-track::before {

97
ionic/components/switch/modes/material.scss Normal file
View File

@ -0,0 +1,97 @@
// Material Design Switch
// --------------------------------------------------
$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: $list-border-color !default;
$switch-md-track-on-bg-color: lighten($switch-md-active-color, 20%) !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-transition-duration: 280ms !default;
.switch[mode=md] {
.item-media {
margin: 0;
padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20);
}
.switch-icon {
position: relative;
pointer-events: none;
}
.switch-track {
width: $switch-md-track-width;
height: $switch-md-track-height;
background-color: $switch-md-track-off-bg-color;
border-radius: $switch-md-track-height;
}
.switch-handle {
position: absolute;
top: ($switch-md-handle-height - $switch-md-track-height) / -2;
left: 0;// ($switch-md-handle-height - $switch-md-track-height) / -2;
width: $switch-md-handle-width;
height: $switch-md-handle-height;
border-radius: 50%;
background-color: $switch-md-handle-off-bg-color;
box-shadow: $switch-md-handle-box-shadow;
will-change: transform;
transition-property: transform;
transition-duration: $switch-md-transition-duration;
}
&[aria-checked=true] .switch-track {
background-color: $switch-md-track-on-bg-color;
}
&[aria-checked=true] .switch-handle {
background-color: $switch-md-handle-on-bg-color;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
}
}
// Material Design Color Mixin
// --------------------------------------------------
@mixin switch-theme-md($color-name, $bg-on) {
.switch[mode=md][#{$color-name}] {
&[aria-checked=true] .switch-track {
background-color: lighten($bg-on, 20%);
}
&[aria-checked=true] .switch-handle {
background-color: $bg-on;
}
}
}
// Generate Material Design Switch Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in auxiliary-colors() {
@include switch-theme-md($color-name, $value);
}