| 13542 |
anikendra |
1 |
|
|
|
2 |
/**
|
|
|
3 |
* Checkbox
|
|
|
4 |
* --------------------------------------------------
|
|
|
5 |
*/
|
|
|
6 |
|
|
|
7 |
.checkbox {
|
|
|
8 |
// set the color defaults
|
|
|
9 |
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
|
|
|
10 |
|
|
|
11 |
position: relative;
|
|
|
12 |
display: inline-block;
|
|
|
13 |
padding: ($checkbox-height / 4) ($checkbox-width / 4);
|
|
|
14 |
cursor: pointer;
|
|
|
15 |
}
|
|
|
16 |
.checkbox-light {
|
|
|
17 |
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
|
|
|
18 |
}
|
|
|
19 |
.checkbox-stable {
|
|
|
20 |
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
|
|
|
21 |
}
|
|
|
22 |
.checkbox-positive {
|
|
|
23 |
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
|
|
|
24 |
}
|
|
|
25 |
.checkbox-calm {
|
|
|
26 |
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
|
|
|
27 |
}
|
|
|
28 |
.checkbox-assertive {
|
|
|
29 |
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
|
|
|
30 |
}
|
|
|
31 |
.checkbox-balanced {
|
|
|
32 |
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
|
|
|
33 |
}
|
|
|
34 |
.checkbox-energized{
|
|
|
35 |
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
|
|
|
36 |
}
|
|
|
37 |
.checkbox-royal {
|
|
|
38 |
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
|
|
|
39 |
}
|
|
|
40 |
.checkbox-dark {
|
|
|
41 |
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
|
|
|
42 |
}
|
|
|
43 |
|
|
|
44 |
.checkbox input:disabled:before,
|
|
|
45 |
.checkbox input:disabled + .checkbox-icon:before {
|
|
|
46 |
border-color: $checkbox-off-border-light;
|
|
|
47 |
}
|
|
|
48 |
|
|
|
49 |
.checkbox input:disabled:checked:before,
|
|
|
50 |
.checkbox input:disabled:checked + .checkbox-icon:before {
|
|
|
51 |
background: $checkbox-on-bg-light;
|
|
|
52 |
}
|
|
|
53 |
|
|
|
54 |
|
|
|
55 |
.checkbox.checkbox-input-hidden input {
|
|
|
56 |
display: none !important;
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
.checkbox input,
|
|
|
60 |
.checkbox-icon {
|
|
|
61 |
position: relative;
|
|
|
62 |
width: $checkbox-width;
|
|
|
63 |
height: $checkbox-height;
|
|
|
64 |
display: block;
|
|
|
65 |
border: 0;
|
|
|
66 |
background: transparent;
|
|
|
67 |
cursor: pointer;
|
|
|
68 |
-webkit-appearance: none;
|
|
|
69 |
|
|
|
70 |
&:before {
|
|
|
71 |
// what the checkbox looks like when its not checked
|
|
|
72 |
display: table;
|
|
|
73 |
width: 100%;
|
|
|
74 |
height: 100%;
|
|
|
75 |
border-width: $checkbox-border-width;
|
|
|
76 |
border-style: solid;
|
|
|
77 |
border-radius: $checkbox-border-radius;
|
|
|
78 |
background: $checkbox-off-bg-color;
|
|
|
79 |
content: ' ';
|
|
|
80 |
@include transition(background-color 20ms ease-in-out);
|
|
|
81 |
}
|
|
|
82 |
}
|
|
|
83 |
|
|
|
84 |
.checkbox input:checked:before,
|
|
|
85 |
input:checked + .checkbox-icon:before {
|
|
|
86 |
border-width: $checkbox-border-width + 1;
|
|
|
87 |
}
|
|
|
88 |
|
|
|
89 |
// the checkmark within the box
|
|
|
90 |
.checkbox input:after,
|
|
|
91 |
.checkbox-icon:after {
|
|
|
92 |
@include transition(opacity .05s ease-in-out);
|
|
|
93 |
@include rotate(-45deg);
|
|
|
94 |
position: absolute;
|
|
|
95 |
top: 33%;
|
|
|
96 |
left: 25%;
|
|
|
97 |
display: table;
|
|
|
98 |
width: ($checkbox-width / 2);
|
|
|
99 |
height: ($checkbox-width / 4) - 1;
|
|
|
100 |
border: $checkbox-check-width solid $checkbox-check-color;
|
|
|
101 |
border-top: 0;
|
|
|
102 |
border-right: 0;
|
|
|
103 |
content: ' ';
|
|
|
104 |
opacity: 0;
|
|
|
105 |
}
|
|
|
106 |
|
|
|
107 |
.platform-android .checkbox-platform input:before,
|
|
|
108 |
.platform-android .checkbox-platform .checkbox-icon:before,
|
|
|
109 |
.checkbox-square input:before,
|
|
|
110 |
.checkbox-square .checkbox-icon:before {
|
|
|
111 |
border-radius: 2px;
|
|
|
112 |
width: 72%;
|
|
|
113 |
height: 72%;
|
|
|
114 |
margin-top: 14%;
|
|
|
115 |
margin-left: 14%;
|
|
|
116 |
border-width: 2px;
|
|
|
117 |
}
|
|
|
118 |
|
|
|
119 |
.platform-android .checkbox-platform input:after,
|
|
|
120 |
.platform-android .checkbox-platform .checkbox-icon:after,
|
|
|
121 |
.checkbox-square input:after,
|
|
|
122 |
.checkbox-square .checkbox-icon:after {
|
|
|
123 |
border-width: 2px;
|
|
|
124 |
top: 19%;
|
|
|
125 |
left: 25%;
|
|
|
126 |
width: ($checkbox-width / 2) - 1;
|
|
|
127 |
height: 7px;
|
|
|
128 |
}
|
|
|
129 |
|
|
|
130 |
.grade-c .checkbox input:after,
|
|
|
131 |
.grade-c .checkbox-icon:after {
|
|
|
132 |
@include rotate(0);
|
|
|
133 |
top: 3px;
|
|
|
134 |
left: 4px;
|
|
|
135 |
border: none;
|
|
|
136 |
color: $checkbox-check-color;
|
|
|
137 |
content: '\2713';
|
|
|
138 |
font-weight: bold;
|
|
|
139 |
font-size: 20px;
|
|
|
140 |
}
|
|
|
141 |
|
|
|
142 |
// what the checkmark looks like when its checked
|
|
|
143 |
.checkbox input:checked:after,
|
|
|
144 |
input:checked + .checkbox-icon:after {
|
|
|
145 |
opacity: 1;
|
|
|
146 |
}
|
|
|
147 |
|
|
|
148 |
// make sure item content have enough padding on left to fit the checkbox
|
|
|
149 |
.item-checkbox {
|
|
|
150 |
padding-left: ($item-padding * 2) + $checkbox-width;
|
|
|
151 |
|
|
|
152 |
&.active {
|
|
|
153 |
box-shadow: none;
|
|
|
154 |
}
|
|
|
155 |
}
|
|
|
156 |
|
|
|
157 |
// position the checkbox to the left within an item
|
|
|
158 |
.item-checkbox .checkbox {
|
|
|
159 |
position: absolute;
|
|
|
160 |
top: 50%;
|
|
|
161 |
right: $item-padding / 2;
|
|
|
162 |
left: $item-padding / 2;
|
|
|
163 |
z-index: $z-index-item-checkbox;
|
|
|
164 |
margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1;
|
|
|
165 |
}
|
|
|
166 |
|
|
|
167 |
|
|
|
168 |
.item-checkbox.item-checkbox-right {
|
|
|
169 |
padding-right: ($item-padding * 2) + $checkbox-width;
|
|
|
170 |
padding-left: $item-padding;
|
|
|
171 |
}
|
|
|
172 |
|
|
|
173 |
.item-checkbox-right .checkbox input,
|
|
|
174 |
.item-checkbox-right .checkbox-icon {
|
|
|
175 |
float: right;
|
|
|
176 |
}
|