mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
baa04cde4d
Using the :active pseudo works fine for desktop, but mobile is a completely different beast, especially with the quirks of each platform. By intentionally not using any :active selectors and manually adding/removing a .active class, it gives us a precise control on how the active state works for ALL platforms. Additionally, this places less selectors in the css, and reduces the possibility of unnecessary repaints. Currently this method of using .active instead of :active is being applied to .button and .item elements.
123 lines
3.3 KiB
SCSS
123 lines
3.3 KiB
SCSS
|
|
/**
|
|
* Toggle
|
|
* --------------------------------------------------
|
|
*/
|
|
|
|
/* the overall container of the toggle */
|
|
.toggle {
|
|
// set the color defaults
|
|
@include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: -$toggle-hit-area-expansion;
|
|
padding: $toggle-hit-area-expansion;
|
|
|
|
&.dragging {
|
|
.handle {
|
|
background-color: $toggle-handle-dragging-bg-color !important;
|
|
}
|
|
}
|
|
|
|
&.toggle-light {
|
|
@include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
|
|
}
|
|
&.toggle-stable {
|
|
@include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
|
|
}
|
|
&.toggle-positive {
|
|
@include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
|
|
}
|
|
&.toggle-calm {
|
|
@include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
|
|
}
|
|
&.toggle-assertive {
|
|
@include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
|
|
}
|
|
&.toggle-balanced {
|
|
@include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
|
|
}
|
|
&.toggle-energized {
|
|
@include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
|
|
}
|
|
&.toggle-royal {
|
|
@include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
|
|
}
|
|
&.toggle-dark {
|
|
@include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
|
|
}
|
|
}
|
|
|
|
/* hide the actual input checkbox */
|
|
.toggle input {
|
|
display: none;
|
|
}
|
|
|
|
/* the track appearance when the toggle is "off" */
|
|
.toggle .track {
|
|
@include transition-timing-function(ease-in-out);
|
|
@include transition-duration($toggle-transition-duration);
|
|
@include transition-property((background-color, border));
|
|
|
|
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;
|
|
content: ' ';
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* the handle (circle) thats inside the toggle's track area */
|
|
/* also the handle's appearance when it is "off" */
|
|
.toggle .handle {
|
|
@include transition($toggle-transition-duration ease-in-out);
|
|
position: absolute;
|
|
top: $toggle-border-width + $toggle-hit-area-expansion;
|
|
left: $toggle-border-width + $toggle-hit-area-expansion;
|
|
display: block;
|
|
width: $toggle-handle-width;
|
|
height: $toggle-handle-height;
|
|
border-radius: $toggle-handle-radius;
|
|
background-color: $toggle-handle-off-bg-color;
|
|
|
|
/* used to create a larger (but hidden) hit area to slide the handle */
|
|
&:before {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: ( ($toggle-handle-width / 2) * -1) - 8;
|
|
padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
|
|
content: " ";
|
|
}
|
|
}
|
|
|
|
/* the handle when the toggle is "on" */
|
|
.toggle input:checked + .track .handle {
|
|
@include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
|
|
background-color: $toggle-handle-on-bg-color;
|
|
}
|
|
|
|
/* make sure list item content have enough padding on right to fit the toggle */
|
|
.item-toggle {
|
|
padding-right: ($item-padding * 3) + $toggle-width;
|
|
|
|
&.active {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* position the toggle to the right within a list item */
|
|
.item-toggle .toggle {
|
|
position: absolute;
|
|
top: $item-padding / 2;
|
|
right: $item-padding;
|
|
z-index: $z-index-item-toggle;
|
|
}
|
|
|
|
.toggle input:disabled + .track {
|
|
opacity: .6;
|
|
}
|