mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
65 lines
1.5 KiB
SCSS
65 lines
1.5 KiB
SCSS
|
|
/* the overall container of the toggle */
|
|
.toggle {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* hide the actual checkbox */
|
|
.toggle input {
|
|
display: none;
|
|
}
|
|
|
|
/* the background of the toggle's track area */
|
|
/* also the track appearance when the toggle is "off" */
|
|
.toggle .track {
|
|
position: relative;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: $toggle-width;
|
|
height: $toggle-height;
|
|
border: solid $toggle-border-width $toggle-off-border-color;
|
|
border-radius: $toggle-border-radius;
|
|
background-color: $toggle-off-bg-color;
|
|
cursor: pointer;
|
|
|
|
transition: $toggle-transition-duration + .1s ease;
|
|
}
|
|
|
|
/* the switch (dot) thats inside the toggle's slide area */
|
|
/* also the appearance when the switch is "off" */
|
|
.toggle .switch {
|
|
position: absolute;
|
|
display: block;
|
|
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 4px 5px rgba(0,0,0,0.25);
|
|
border-radius: $toggle-switch-radius;
|
|
background-color: $toggle-switch-off-bg-color;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: $toggle-border-radius;
|
|
|
|
transition: .2s ease;
|
|
transition-property: left, right;
|
|
transition-delay: 0s, .05s;
|
|
}
|
|
|
|
|
|
/* When the toggle is "on" */
|
|
.toggle :checked + .track {
|
|
|
|
/* the track when the toggle is "on" */
|
|
border-color: $toggle-on-border-color;
|
|
background-color: #ccc;
|
|
box-shadow: inset 0 0 0 $toggle-border-radius $toggle-on-bg-color;
|
|
transition: $toggle-transition-duration - .2s ease;
|
|
|
|
/* the switch when the toggle is "on" */
|
|
.switch {
|
|
background-color: $toggle-switch-on-bg-color;
|
|
right: 0;
|
|
left: $toggle-border-radius;
|
|
|
|
transition-delay: .05s, 0s;
|
|
}
|
|
}
|