_toggle.scss
3.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
/**
* Toggle
* --------------------------------------------------
*/
.item-toggle {
pointer-events: none;
}
.toggle {
// set the color defaults
@include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
position: relative;
display: inline-block;
pointer-events: auto;
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);
}
}
.toggle input {
// hide the actual input checkbox
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;
pointer-events: none;
}
/* Fix to avoid background color bleeding */
/* (occured on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
.platform-android4_2 .toggle .track {
-webkit-background-clip: padding-box;
}
/* 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;
display: block;
width: $toggle-handle-width;
height: $toggle-handle-height;
border-radius: $toggle-handle-radius;
background-color: $toggle-handle-off-bg-color;
top: $toggle-border-width + $toggle-hit-area-expansion;
left: $toggle-border-width + $toggle-hit-area-expansion;
&:before {
// used to create a larger (but hidden) hit area to slide the handle
position: absolute;
top: -4px;
left: ( ($toggle-handle-width / 2) * -1) - 8;
padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
content: " ";
}
}
.toggle input:checked + .track .handle {
// the handle when the toggle is "on"
@include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
background-color: $toggle-handle-on-bg-color;
}
.item-toggle.active {
box-shadow: none;
}
.item-toggle,
.item-toggle.item-complex .item-content {
// make sure list item content have enough padding on right to fit the toggle
padding-right: ($item-padding * 3) + $toggle-width;
}
.item-toggle.item-complex {
padding-right: 0;
}
.item-toggle .toggle {
// position the toggle to the right within a list item
position: absolute;
top: $item-padding / 2;
right: $item-padding;
z-index: $z-index-item-toggle;
}
.toggle input:disabled + .track {
opacity: .6;
}