mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
75 lines
1.6 KiB
SCSS
75 lines
1.6 KiB
SCSS
|
|
// Switch
|
|
// --------------------------------------------------
|
|
|
|
$switch-padding: 0 15px !default;
|
|
$switch-width: 52px !default;
|
|
$switch-height: 32px !default;
|
|
$switch-border-width: 2px !default;
|
|
$switch-slider-off-background: #ccc !default;
|
|
$switch-slider-on-background: #387ef5 !default;
|
|
$switch-toggle-on-background: #fff !default;
|
|
|
|
|
|
.switch .item-media {
|
|
padding: $switch-padding;
|
|
}
|
|
|
|
.switch-toggle {
|
|
position: relative;
|
|
|
|
width: $switch-width;
|
|
height: $switch-height;
|
|
border-radius: $switch-height / 2;
|
|
|
|
background: $switch-slider-off-background;
|
|
}
|
|
|
|
.switch-toggle:before {
|
|
position: absolute;
|
|
left: $switch-border-width;
|
|
top: $switch-border-width;
|
|
|
|
width: $switch-width - ($switch-border-width * 2);
|
|
height: $switch-height - ($switch-border-width * 2);
|
|
border-radius: $switch-height / 2;
|
|
|
|
transition-duration: 300ms;
|
|
content: ' ';
|
|
}
|
|
|
|
.switch[aria-checked=true] .switch-toggle {
|
|
background: $switch-slider-on-background;
|
|
}
|
|
|
|
.switch .switch-toggle:after {
|
|
position: absolute;
|
|
left: $switch-border-width;
|
|
top: $switch-border-width;
|
|
|
|
width: $switch-height - ($switch-border-width * 2);
|
|
height: $switch-height - ($switch-border-width * 2);
|
|
|
|
border-radius: $switch-height - ($switch-border-width * 2);
|
|
background: $switch-toggle-on-background;
|
|
|
|
transition-duration: 300ms;
|
|
|
|
content: ' ';
|
|
}
|
|
|
|
.switch[aria-checked=true] .switch-toggle:after {
|
|
transform: translate3d(20px,0,0);
|
|
}
|
|
|
|
.switch[aria-disabled=true] {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
color: gray;
|
|
}
|
|
|
|
.switch .item-media,
|
|
.switch .item-content {
|
|
pointer-events: none;
|
|
}
|