mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
86 lines
2.4 KiB
SCSS
86 lines
2.4 KiB
SCSS
|
|
// Toggle
|
|
// -------------------------------
|
|
|
|
/* the overall container of the toggle */
|
|
.toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.toggle input {
|
|
/* set the actual checkbox input to have a width/height */
|
|
/* but hide its appearance, then use :after to style it */
|
|
width: $toggle-width;
|
|
height: $toggle-height;
|
|
border: 0;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
|
|
/* the track appearance when the toggle is "off" */
|
|
&:after {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: solid $toggle-border-width $toggle-off-border-color;
|
|
border-radius: $toggle-border-radius;
|
|
background-color: $toggle-off-bg-color;
|
|
content: ' ';
|
|
cursor: pointer;
|
|
|
|
transition-timing-function: ease-in-out;
|
|
transition-duration: $toggle-transition-duration;
|
|
transition-property: background-color, border;
|
|
}
|
|
}
|
|
|
|
/* the handle (circle) thats inside the toggle's track area */
|
|
/* also the appearance when the handle is "off" */
|
|
.toggle .handle {
|
|
position: absolute;
|
|
top: $toggle-border-width;
|
|
left: $toggle-border-width;
|
|
display: block;
|
|
width: $toggle-handle-width;
|
|
height: $toggle-handle-height;
|
|
border-radius: $toggle-handle-radius;
|
|
background-color: $toggle-handle-off-bg-color;
|
|
transition: -webkit-transform $toggle-transition-duration ease-in-out;
|
|
|
|
/* used to create a larger (but hidden) hit area to slide the handle */
|
|
&:before {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: ( ($toggle-handle-width / 2) * -1) - 2;
|
|
display: table;
|
|
padding: ($toggle-handle-height / 2) + 3 ($toggle-handle-width + 2);
|
|
content: " ";
|
|
}
|
|
}
|
|
|
|
/* The track when the toggle is "on" */
|
|
.toggle input:checked:after {
|
|
border-color: $toggle-on-border-color;
|
|
background-color: $toggle-on-bg-color;
|
|
}
|
|
|
|
/* the handle when the toggle is "on" */
|
|
.toggle input:checked + .handle {
|
|
background-color: $toggle-handle-on-bg-color;
|
|
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
|
|
}
|
|
|
|
/* make sure list item content have enough padding on right to fit the toggle */
|
|
.toggle-item .list-item-content {
|
|
padding-right: ($list-item-padding * 3) + $toggle-width;
|
|
}
|
|
|
|
/* position the toggle to the right within a list item */
|
|
.toggle-item .toggle {
|
|
position: absolute;
|
|
top: $list-item-padding / 3;
|
|
right: $list-item-padding;
|
|
z-index: 3;
|
|
}
|