提交 | 用户 | 时间
|
58d006
|
1 |
//some checkbox & switch variables |
A |
2 |
@checkbox-color: #32A3CE; |
|
3 |
@checkbox-border-color: #C8C8C8; |
|
4 |
@checkbox-checked-border: #ADB8C0; |
|
5 |
@checkbox-hover-border: #FF893C; |
|
6 |
@checkbox2-bg: #F9A021; |
|
7 |
|
|
8 |
@switch-checked-bg: #8AB2C9; |
|
9 |
@switch-checked-border: #6A8CA8; |
|
10 |
@switch4-bg: #8B9AA3; |
|
11 |
@switch4-color: #939393; |
|
12 |
@switch4-checked-bg: #468FCC; |
|
13 |
|
|
14 |
@switch6-checked-border: #B7D3E5; |
|
15 |
@switch6-checked-bg: #FF893C; |
|
16 |
|
|
17 |
@switch7-checked-bg: #468FCC; |
|
18 |
@switch7-checked-border: #6FB3E0; |
|
19 |
|
|
20 |
|
|
21 |
@switch-1-text: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF"; |
|
22 |
@switch-2-text: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0NO"; |
|
23 |
@switch-4-text: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF"; |
|
24 |
@switch-5-text: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0NO"; |
|
25 |
@switch-7-text: "OFF\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0ON"; |
|
26 |
|
|
27 |
@lbl_selector: ~"+ .lbl"; |
|
28 |
//@lbl_selector: ~"~ .lbl";//uncomment for ASP.NET or use css builder tool |
|
29 |
|
|
30 |
.enable_checkbox() when(@enable-checkbox = true) { |
|
31 |
//Checkbox & Radio |
|
32 |
|
|
33 |
@lbl: @lbl_selector;//+ .lbl or ~ .lbl (for ASP.NET) |
|
34 |
|
|
35 |
input[type=checkbox].ace , input[type=radio].ace { |
|
36 |
opacity: 0; |
|
37 |
position: absolute; |
|
38 |
z-index: 1;//so that it is clickable and above (.lbl) |
|
39 |
|
|
40 |
width: 18px; |
|
41 |
height: 18px; |
|
42 |
cursor: pointer; |
|
43 |
|
|
44 |
label & { |
|
45 |
z-index: -100 !important; |
|
46 |
width: 1px !important;//width '0' has issues with jQuery Validate not recognizing this |
|
47 |
height: 1px !important; |
|
48 |
clip: rect(1px, 1px, 1px, 1px); |
|
49 |
position: absolute;//"fixed" causes issues on iOS safari?! |
|
50 |
//we don't need it to be hoverable/clickable when inside a label |
|
51 |
} |
|
52 |
|
|
53 |
&:checked, &:focus { |
|
54 |
outline: none !important; |
|
55 |
} |
|
56 |
|
|
57 |
@{lbl} { |
|
58 |
position: relative; |
|
59 |
display:inline-block; |
|
60 |
margin:0; |
|
61 |
line-height:20px; |
|
62 |
|
|
63 |
min-height:18px; |
|
64 |
min-width:18px; |
|
65 |
font-weight:normal; |
|
66 |
|
|
67 |
cursor: pointer; |
|
68 |
|
|
69 |
&::before { |
|
70 |
cursor: pointer; |
|
71 |
|
|
72 |
font-family: fontAwesome; |
|
73 |
font-weight: normal; |
|
74 |
font-size: @font-size-checkbox; |
|
75 |
color: #FFF; |
|
76 |
content: "\a0"; |
|
77 |
display: inline-block; |
|
78 |
background-color: #FAFAFA; |
|
79 |
border: 1px solid @checkbox-border-color; |
|
80 |
box-shadow: 0 1px 2px rgba(0,0,0,0.05);/*, inset 0px -15px 10px -12px rgba(0,0,0,0.05);*/ |
|
81 |
border-radius: 0; |
|
82 |
display: inline-block; |
|
83 |
text-align: center; |
|
84 |
|
|
85 |
//vertical-align: text-bottom; |
|
86 |
//vertical-align: middle; |
|
87 |
|
|
88 |
height: 16px; |
|
89 |
line-height: 14px; |
|
90 |
min-width: 16px; |
|
91 |
|
|
92 |
margin-right: 1px; |
|
93 |
|
|
94 |
position: relative; |
|
95 |
top: -1px; |
|
96 |
} |
|
97 |
}//.lbl |
|
98 |
|
|
99 |
|
|
100 |
|
|
101 |
&:checked @{lbl}::before , |
|
102 |
{ |
|
103 |
display:inline-block; |
|
104 |
content: '\f00c'; |
|
105 |
color: @checkbox-color; |
|
106 |
background-color: #F5F8FC; |
|
107 |
border-color: @checkbox-checked-border; |
|
108 |
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); |
|
109 |
} |
|
110 |
&:hover @{lbl}::before , @{lbl}:hover::before { |
|
111 |
border-color:@checkbox-hover-border; |
|
112 |
} |
|
113 |
|
|
114 |
&:focus @{lbl}::before { |
|
115 |
border-color: @input-border-focus; |
|
116 |
} |
|
117 |
|
|
118 |
|
|
119 |
&:active , &:checked:active { |
|
120 |
@{lbl}::before { |
|
121 |
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); |
|
122 |
} |
|
123 |
} |
|
124 |
|
|
125 |
|
|
126 |
&.ace-checkbox-2 @{lbl}::before { |
|
127 |
box-shadow: none; |
|
128 |
} |
|
129 |
&.ace-checkbox-2:checked @{lbl}::before { |
|
130 |
background-color: @checkbox2-bg; |
|
131 |
border-color: @checkbox2-bg; |
|
132 |
color: #FFF; |
|
133 |
} |
|
134 |
|
|
135 |
&:disabled @{lbl}::before , |
|
136 |
&[disabled] @{lbl}::before , |
|
137 |
&.disabled @{lbl}::before { |
|
138 |
background-color:#DDD !important; |
|
139 |
border-color:#CCC !important; |
|
140 |
box-shadow:none !important; |
|
141 |
color:#BBB; |
|
142 |
} |
|
143 |
} |
|
144 |
//opera fix |
|
145 |
//no_such_element:-o-prefocus, input[type=checkbox].ace @{lbl}::before, input[type=radio].ace @{lbl}::before { |
|
146 |
//vertical-align: middle; |
|
147 |
//} |
|
148 |
|
|
149 |
|
|
150 |
|
|
151 |
.checkbox label input[type=checkbox].ace @{lbl}, .radio label input[type=radio].ace @{lbl} { |
|
152 |
margin-left: -10px; |
|
153 |
} |
|
154 |
|
|
155 |
|
|
156 |
|
|
157 |
|
|
158 |
/** |
|
159 |
input[type=radio].ace @{lbl}::before { |
|
160 |
border-radius:100%; |
|
161 |
font-size: 34px; |
|
162 |
font-family: Helvetica, Arial, "Sans-Serif";//looks better but incosistent |
|
163 |
line-height: 13px; |
|
164 |
} |
|
165 |
*/ |
|
166 |
input[type=radio].ace @{lbl}::before { |
|
167 |
border-radius: 100%; |
|
168 |
font-size: @font-size-radio; |
|
169 |
font-family: FontAwesome;//let's use a fonts that's available everywhere |
|
170 |
text-shadow: 0 0 1px @checkbox-color; |
|
171 |
|
|
172 |
line-height: 15px; |
|
173 |
|
|
174 |
height: 17px; |
|
175 |
min-width: 17px; |
|
176 |
} |
|
177 |
input[type=radio].ace:checked @{lbl}::before { |
|
178 |
content:"\f111"; |
|
179 |
} |
|
180 |
|
|
181 |
|
|
182 |
input[type=checkbox].ace.input-lg @{lbl}::before{ |
|
183 |
border-radius: 4px; |
|
184 |
font-size: @font-size-checkbox-large; |
|
185 |
|
|
186 |
height: 24px; |
|
187 |
line-height: 21px; |
|
188 |
min-width: 24px; |
|
189 |
|
|
190 |
top: auto; |
|
191 |
} |
|
192 |
input[type=radio].ace.input-lg @{lbl}::before { |
|
193 |
font-size: @font-size-radio-large; |
|
194 |
|
|
195 |
height: 24px; |
|
196 |
line-height: 22px; |
|
197 |
min-width: 24px; |
|
198 |
|
|
199 |
top: auto; |
|
200 |
} |
|
201 |
|
|
202 |
|
|
203 |
|
|
204 |
/* CSS3 on/off switches */ |
|
205 |
//use like <input type="checkbox" class="ace ace-switch" /> <span class="lbl"></span> |
|
206 |
|
|
207 |
.enable_switches() when(@enable-switch = true) { |
|
208 |
|
|
209 |
input[type=checkbox].ace.ace-switch { |
|
210 |
width: 55px; |
|
211 |
height: 25px; |
|
212 |
|
|
213 |
@{lbl} { |
|
214 |
margin:0 4px; |
|
215 |
min-height:24px; |
|
216 |
|
|
217 |
&::before { |
|
218 |
font-family: 'Open Sans'; |
|
219 |
content: @switch-1-text; |
|
220 |
|
|
221 |
color: #999; |
|
222 |
text-shadow: 0 0 0 #999; |
|
223 |
font-weight: normal; |
|
224 |
font-size: @font-size-switch-1-text; |
|
225 |
|
|
226 |
line-height: 17px;// line-height:21px \9;/*ie9*/ |
|
227 |
height: 20px; |
|
228 |
overflow: hidden; |
|
229 |
|
|
230 |
border-radius: 12px; |
|
231 |
|
|
232 |
background-color: #F5F5F5; |
|
233 |
//.box-shadow(~"inset 0px 2px 2px 0px rgba(0,0,0,.2)"); |
|
234 |
.box-shadow(~"inset 0 1px 1px 0 rgba(0, 0, 0, 0.15)"); |
|
235 |
|
|
236 |
|
|
237 |
border: 1px solid #CCC; |
|
238 |
|
|
239 |
text-align: left; |
|
240 |
float: left; |
|
241 |
padding: 0; |
|
242 |
width: 52px; |
|
243 |
text-indent: -21px;// text-indent: -21px \9; |
|
244 |
margin-right: 0; |
|
245 |
|
|
246 |
.transition(~"text-indent 0.25s ease"); |
|
247 |
|
|
248 |
top: auto; |
|
249 |
} |
|
250 |
|
|
251 |
&::after { |
|
252 |
font-family: 'Open Sans'; |
|
253 |
content: 'III'; |
|
254 |
font-size: @font-size-switch-1-bar; |
|
255 |
font-weight: normal; |
|
256 |
letter-spacing: 0; |
|
257 |
color: #AAA; |
|
258 |
|
|
259 |
text-shadow: none; |
|
260 |
//text-shadow: 0 0 0 #999; |
|
261 |
|
|
262 |
|
|
263 |
background-color: #FFF; |
|
264 |
|
|
265 |
//text-align: center; |
|
266 |
//text-indent: -2px; |
|
267 |
|
|
268 |
border-radius: 100%; |
|
269 |
|
|
270 |
width: 22px; |
|
271 |
height: 22px; |
|
272 |
line-height: 22px; |
|
273 |
text-align: center; |
|
274 |
|
|
275 |
|
|
276 |
position: absolute; |
|
277 |
top: -2px; |
|
278 |
left: -3px; |
|
279 |
|
|
280 |
.box-shadow(~"0px 1px 1px 1px rgba(0,0,0,.3)"); |
|
281 |
//text-shadow:0px 1px 1px rgba(0,0,0,0.3) inset; |
|
282 |
|
|
283 |
.transition(~"left 0.25s ease"); |
|
284 |
} |
|
285 |
} |
|
286 |
|
|
287 |
&:checked @{lbl} { |
|
288 |
&::before { |
|
289 |
text-indent: 8px; |
|
290 |
|
|
291 |
color: #FFF; |
|
292 |
text-shadow: 0 0 0 #FFF; |
|
293 |
background-color: @switch-checked-bg; |
|
294 |
border-color: @switch-checked-border; |
|
295 |
} |
|
296 |
&::after { |
|
297 |
left: 34px; |
|
298 |
background-color: #FFF; |
|
299 |
color: #98A0A5; |
|
300 |
//text-shadow: 0 0 0 #465868; |
|
301 |
} |
|
302 |
} |
|
303 |
|
|
304 |
|
|
305 |
&.ace-switch-2 @{lbl}::before { |
|
306 |
content: @switch-2-text; |
|
307 |
} |
|
308 |
|
|
309 |
&.ace-switch-3 @{lbl}::after { |
|
310 |
font-family: FontAwesome; |
|
311 |
font-size: @font-size-switch-3-text; |
|
312 |
line-height: 22px; |
|
313 |
content: "\f00d"; |
|
314 |
top: -1px; |
|
315 |
text-shadow: none; |
|
316 |
padding: 0; |
|
317 |
text-align: center; |
|
318 |
color: #BBB; |
|
319 |
letter-spacing: 0; |
|
320 |
} |
|
321 |
&.ace-switch-3:checked @{lbl}::after { |
|
322 |
content: "\f00c"; |
|
323 |
color: #8AB2C9; |
|
324 |
text-shadow: none; |
|
325 |
} |
|
326 |
|
|
327 |
//switch style 4 & 5 |
|
328 |
.enable_switch_style_4() when(@enable-switch-style-4 = true) { |
|
329 |
&.ace-switch-4 , &.ace-switch-5 { |
|
330 |
width: 60px; |
|
331 |
@{lbl}::before { |
|
332 |
content: @switch-4-text; |
|
333 |
//font-family:Arial, Helvetica, sans-serif; |
|
334 |
//font-weight:bolder; |
|
335 |
font-size: @font-size-switch-4-text; |
|
336 |
line-height: 21px; |
|
337 |
height: 24px; |
|
338 |
overflow: hidden; |
|
339 |
//line-height:25px \9; |
|
340 |
|
|
341 |
border-radius: 12px; |
|
342 |
|
|
343 |
display: inline-block; |
|
344 |
background-color: @switch4-bg; |
|
345 |
border: 1px solid @switch4-bg; |
|
346 |
|
|
347 |
color: #FFF; |
|
348 |
width: 56px; |
|
349 |
text-indent: -25px;// text-indent: -28px \9; |
|
350 |
text-shadow: 0 0 0 #FFF; |
|
351 |
|
|
352 |
display: inline-block; |
|
353 |
position: relative; |
|
354 |
|
|
355 |
//margin-right:8px; |
|
356 |
|
|
357 |
box-shadow:none; |
|
358 |
|
|
359 |
.transition(~"all 0.25s ease"); |
|
360 |
} |
|
361 |
|
|
362 |
@{lbl}::after { |
|
363 |
content: 'III'; |
|
364 |
|
|
365 |
font-size: @font-size-switch-4-bar; |
|
366 |
position: absolute; |
|
367 |
top: 2px; |
|
368 |
left: 2px; |
|
369 |
|
|
370 |
letter-spacing: 0; |
|
371 |
|
|
372 |
width: 20px; |
|
373 |
height: 20px; |
|
374 |
line-height: 19px; |
|
375 |
|
|
376 |
text-shadow: none !important; |
|
377 |
color: @switch4-color; |
|
378 |
background-color:#FFF; |
|
379 |
|
|
380 |
.transition(~"all 0.25s ease"); |
|
381 |
} |
|
382 |
|
|
383 |
|
|
384 |
&:checked @{lbl} { |
|
385 |
&::before { |
|
386 |
text-indent: 9px; |
|
387 |
background-color: @switch4-checked-bg; |
|
388 |
border-color: #468FCC; |
|
389 |
} |
|
390 |
&::after { |
|
391 |
left: 34px; |
|
392 |
background-color: #FFF; |
|
393 |
color: darken(@switch4-color , 6%); |
|
394 |
} |
|
395 |
} |
|
396 |
|
|
397 |
|
|
398 |
} |
|
399 |
&.ace-switch-5 @{lbl}::before { |
|
400 |
content: @switch-5-text; |
|
401 |
} |
|
402 |
&.ace-switch-5:checked @{lbl}::before { |
|
403 |
text-indent: 8px; |
|
404 |
} |
|
405 |
} |
|
406 |
.enable_switch_style_4(); |
|
407 |
|
|
408 |
|
|
409 |
.enable_switch_style_6() when(@enable-switch-style-6 = true) { |
|
410 |
//switch style 6 |
|
411 |
&.ace-switch-6 { |
|
412 |
@{lbl} { |
|
413 |
position: relative; |
|
414 |
&::before { |
|
415 |
font-family: FontAwesome; |
|
416 |
content: "\f00d"; |
|
417 |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
|
418 |
box-shadow: none; |
|
419 |
border-width: 0; |
|
420 |
|
|
421 |
font-weight: lighter; |
|
422 |
font-size: @font-size-switch-6-text; |
|
423 |
|
|
424 |
|
|
425 |
border-radius: 12px; |
|
426 |
|
|
427 |
display: inline-block; |
|
428 |
background-color: #888; |
|
429 |
|
|
430 |
color: #F2F2F2; |
|
431 |
|
|
432 |
width: 52px; |
|
433 |
height: 22px; |
|
434 |
line-height: 21px; |
|
435 |
text-indent: 32px; |
|
436 |
|
|
437 |
.transition(~"background 0.25s ease"); |
|
438 |
} |
|
439 |
&::after { |
|
440 |
content: ''; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); |
|
441 |
|
|
442 |
position: absolute; |
|
443 |
top: 2px; |
|
444 |
left: 3px; |
|
445 |
|
|
446 |
border-radius: 12px; |
|
447 |
box-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); |
|
448 |
|
|
449 |
width: 18px; |
|
450 |
height: 18px; |
|
451 |
text-align: center; |
|
452 |
|
|
453 |
background-color: #F2F2F2; |
|
454 |
border: 4px solid #F2F2F2; |
|
455 |
|
|
456 |
.transition(~"left 0.25s ease"); |
|
457 |
} |
|
458 |
} |
|
459 |
|
|
460 |
&:checked @{lbl} { |
|
461 |
&::before { |
|
462 |
content: "\f00c"; |
|
463 |
text-indent:6px; |
|
464 |
|
|
465 |
color:#FFF; |
|
466 |
border-color:@switch6-checked-border; |
|
467 |
background-color:@switch6-checked-bg; |
|
468 |
} |
|
469 |
&::after { |
|
470 |
left:32px; |
|
471 |
|
|
472 |
background-color:#FFF; |
|
473 |
border:4px solid #FFF; |
|
474 |
text-shadow:0 -1px 0 rgba(0, 200, 0, 0.25); |
|
475 |
} |
|
476 |
} |
|
477 |
} |
|
478 |
} |
|
479 |
.enable_switch_style_6(); |
|
480 |
|
|
481 |
|
|
482 |
.enable_switch_style_7() when(@enable-switch-style-7 = true) { |
|
483 |
&.ace-switch-7 { |
|
484 |
width:75px; |
|
485 |
|
|
486 |
@{lbl} { |
|
487 |
position: relative; |
|
488 |
&::before { |
|
489 |
content: @switch-7-text; |
|
490 |
|
|
491 |
font-weight: bolder; |
|
492 |
font-size: @font-size-switch-7-text; |
|
493 |
line-height: 20px; |
|
494 |
|
|
495 |
display: inline-block; |
|
496 |
background-color: #FFF; |
|
497 |
border: 2px solid #AAA; |
|
498 |
border-radius: 0; |
|
499 |
box-shadow: none; |
|
500 |
|
|
501 |
color: #AAA; |
|
502 |
|
|
503 |
width: 74px; |
|
504 |
height: 26px; |
|
505 |
line-height: 22px; |
|
506 |
overflow: hidden; |
|
507 |
text-indent: 5px; |
|
508 |
|
|
509 |
display: inline-block; |
|
510 |
position: relative; |
|
511 |
|
|
512 |
//margin-right:8px; |
|
513 |
|
|
514 |
.transition(~"all 0.25s ease"); |
|
515 |
} |
|
516 |
|
|
517 |
&::after { |
|
518 |
content: '\f00d'; |
|
519 |
font-family: FontAwesome; |
|
520 |
font-size: @font-size-switch-7-bar; |
|
521 |
|
|
522 |
position: absolute; |
|
523 |
top: 3px; |
|
524 |
left: 39px; |
|
525 |
width: 32px; |
|
526 |
height: 20px; |
|
527 |
line-height: 18px; |
|
528 |
|
|
529 |
text-align: center; |
|
530 |
padding: 0; |
|
531 |
text-indent: 0; |
|
532 |
|
|
533 |
background-color: #AAA; |
|
534 |
color: #FFF; |
|
535 |
border-radius: 0; |
|
536 |
box-shadow: none; |
|
537 |
|
|
538 |
.transition(~"all 0.25s ease"); |
|
539 |
} |
|
540 |
} |
|
541 |
|
|
542 |
&:checked @{lbl} { |
|
543 |
&::before { |
|
544 |
color: @switch7-checked-bg; |
|
545 |
background-color: #FFF; |
|
546 |
text-indent: -28px; |
|
547 |
border-color: @switch7-checked-border; |
|
548 |
} |
|
549 |
&::after { |
|
550 |
left: 3px; |
|
551 |
content: '\f00c'; |
|
552 |
background-color: @switch7-checked-bg; |
|
553 |
color: #FFF; |
|
554 |
} |
|
555 |
} |
|
556 |
|
|
557 |
} |
|
558 |
} |
|
559 |
.enable_switch_style_7(); |
|
560 |
} |
|
561 |
|
|
562 |
|
|
563 |
//any custom text |
|
564 |
input[type=checkbox].ace.ace-switch @{lbl}[data-lbl]::before { |
|
565 |
content: attr(data-lbl); |
|
566 |
} |
|
567 |
|
|
568 |
input[type=checkbox].ace.ace-switch.btn-empty @{lbl}::after { |
|
569 |
content: ""; |
|
570 |
} |
|
571 |
input[type=checkbox].ace.ace-switch.btn-rotate @{lbl}::after { |
|
572 |
content: "\2261";// the 3 line (menu) character |
|
573 |
line-height: 20px; |
|
574 |
font-size: @font-size-switch-rotated-bar; |
|
575 |
} |
|
576 |
|
|
577 |
input[type=checkbox].ace.ace-switch-4.btn-rotate @{lbl}::after, |
|
578 |
input[type=checkbox].ace.ace-switch-5.btn-rotate @{lbl}::after { |
|
579 |
line-height: 17px; |
|
580 |
} |
|
581 |
|
|
582 |
|
|
583 |
//flat, square |
|
584 |
input[type=checkbox].ace.ace-switch.btn-flat @{lbl}::before, |
|
585 |
input[type=checkbox].ace.ace-switch.btn-flat @{lbl}::after { |
|
586 |
border-radius: 0 !important; |
|
587 |
} |
|
588 |
input[type=checkbox].ace.ace-switch.ace-switch-4 , input[type=checkbox].ace.ace-switch.ace-switch-5 { |
|
589 |
@{lbl}::before { |
|
590 |
text-indent: -24px; |
|
591 |
} |
|
592 |
&:checked @{lbl}::before { |
|
593 |
text-indent: 7px; |
|
594 |
} |
|
595 |
} |
|
596 |
|
|
597 |
} |
|
598 |
.enable_switches(); |
|
599 |
|
|
600 |
|
|
601 |
|
|
602 |
|
|
603 |
input.ace @{lbl} { |
|
604 |
.checkbox-paddings() {// a little paddings for .lbl |
|
605 |
.checkbox-paddingX (@index) when (@index >= 0) { |
|
606 |
&.padding-@{index}::before { |
|
607 |
margin-right: unit(@index,px); |
|
608 |
} |
|
609 |
.checkbox-paddingX(@index - 2); |
|
610 |
} |
|
611 |
.checkbox-paddingX(16); |
|
612 |
} |
|
613 |
.checkbox-paddings(); |
|
614 |
} |
|
615 |
|
|
616 |
} |
|
617 |
.enable_checkbox(); |