Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

form-checkbox.less @ 780

Last change on this file since 780 was 780, checked in by dungnv, 10 years ago

File size: 8.6 KB

Line
1	//some checkbox & switch variables
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:#468FCC;
10	@switch4-bg:#8B9AA3;
11	@switch4-color:#5B6A73;
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\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\a0NO";
25	@switch-7-text:"OFF\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0ON";
26
27
28
29
30	/* Checkbox & Radio */
31	input[type=checkbox].ace , input[type=radio].ace {
32	opacity:0;
33	position:absolute;
34	z-index:12;
35	width:18px; height:18px;
36	cursor:pointer;
37
38	&:checked, &:focus {
39	outline:none !important;
40	}
41
42	+ .lbl {
43	position: relative; z-index:11;
44	display:inline-block;
45	margin:0;
46	line-height:20px;
47
48	min-height:18px;
49	min-width:18px;
50	font-weight:normal;
51
52
53	.checkbox-paddings() {// a little paddings for .lbl
54	.checkbox-paddingX (@index) when (@index >= 0) {
55	&.padding-@{index}::before {
56	margin-right:unit(@index,px);
57	}
58	.checkbox-paddingX(@index - 4);
59	}
60	.checkbox-paddingX(16);
61	}
62	.checkbox-paddings();
63
64
65	&::before {
66	font-family:fontAwesome; font-weight:normal;
67	font-size: 12px; color:@checkbox-color;
68	content:"\a0";
69	display:inline-block;
70	background-color: #FAFAFA;
71	border: 1px solid @checkbox-border-color;
72	box-shadow: 0 1px 2px rgba(0,0,0,0.05);/, inset 0px -15px 10px -12px rgba(0,0,0,0.05);/
73	border-radius: 0;
74	display: inline-block;
75	text-align:center;
76
77	vertical-align:middle;
78
79	height:16px; line-height:14px;
80	min-width:16px;
81
82	margin-right:1px;
83	}
84	}//.lbl
85
86	&:checked + .lbl::before ,
87	{
88	display:inline-block;
89	content: '\f00c';
90	background-color: #F5F8FC;
91	border-color:@checkbox-checked-border;
92	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);
93	}
94	&:hover + .lbl::before , + .lbl:hover::before {
95	border-color:@checkbox-hover-border;
96	}
97
98
99	&:active , &:checked:active {
100	+ .lbl::before {
101	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
102	}
103	}
104
105
106	&.ace-checkbox-2 + .lbl::before {
107	box-shadow: none;
108	}
109	&.ace-checkbox-2:checked + .lbl::before {
110	background-color: @checkbox2-bg;
111	border-color: @checkbox2-bg;
112	color: #FFF;
113	}
114
115	&:disabled + .lbl::before ,
116	&[disabled] + .lbl::before ,
117	&.disabled + .lbl::before {
118	background-color:#DDD !important;
119	border-color:#CCC !important;
120	box-shadow:none !important;
121	color:#BBB;
122	}
123	}
124
125
126
127	/**
128	input[type=radio].ace + .lbl::before {
129	border-radius:100%;
130	font-size:34px;
131	font-family: Helvetica, Arial, "Sans-Serif";//looks better but incosistent
132	line-height:13px;
133	}
134	*/
135	input[type=radio].ace + .lbl::before {
136	border-radius: 100%;
137	font-size: 11px;
138	font-family: FontAwesome;//let's use a fonts that's available everywhere
139	text-shadow: 0 0 1px @checkbox-color;
140
141	line-height: 15px;
142	height: 17px;
143	min-width: 17px;
144	}
145	input[type=radio].ace:checked + .lbl::before {
146	content:"\f111";
147	}
148
149
150
151
152
153
154
155	/* CSS3 on/off switches */
156	//use like <input type="checkbox" class="ace ace-switch" /> <span class="lbl"></span>
157	input[type=checkbox].ace.ace-switch {
158	width:55px;
159	height:25px;
160
161	+ .lbl {
162	margin:0 4px;
163	min-height:24px;
164
165	&::before {
166	font-family:Arial, Helvetica, sans-serif;
167	content:@switch-1-text;
168
169	color:#999;
170	font-weight:bold;
171	font-size:11px;
172
173	line-height:18px; line-height:21px\9;/ie9/
174	height:20px;
175	overflow:hidden;
176
177	border-radius:12px;
178
179	background-color: #F5F5F5;
180	.box-shadow(~"inset 0px 2px 2px 0px rgba(0,0,0,.2)");
181
182	border: 1px solid #CCC;
183
184	text-align:left;
185	float:left;
186	padding:0;
187	width:52px;
188	text-indent:-19px; text-indent:~"-21px\9";
189	margin-right:0;
190
191	.transition(~"text-indent .4s ease");
192	}
193
194	&::after {
195	font-family:Arial, Helvetica, sans-serif;
196	content: '\|\|\|';
197	font-size: 10px;
198	font-weight:lighter;
199	color:#D5D5D5;
200	background-color:#FFF;
201
202	text-shadow:-1px 0px 0 rgba(0, 0, 0, 0.15);
203	text-align:center;
204	border-radius:100%;
205
206	width:22px; height:22px; line-height:20px;
207	position: absolute;
208	top: -2px; left: -3px;
209	padding:0;
210
211	.box-shadow(~"0px 1px 1px 1px rgba(0,0,0,.3)");
212	//text-shadow:0px 1px 1px rgba(0,0,0,0.3) inset;
213
214	.transition(~"left .4s ease");
215	}
216	}
217
218	&:checked + .lbl {
219	&::before {
220	text-indent:9px;
221
222	color:#FFF;
223	background-color:@switch-checked-bg;
224	border-color:@switch-checked-border;
225	}
226	&::after {
227	left:34px;
228	background-color:#FFF;
229	color:@switch-checked-bg;
230	}
231	}
232
233
234	&.ace-switch-2 + .lbl::before {
235	content:@switch-2-text;
236	}
237
238	&.ace-switch-3 + .lbl::after {
239	font-family:FontAwesome;
240	font-size:13px; line-height:23px;
241	content:"\f00d";
242	top:-1px;
243	}
244	&.ace-switch-3:checked + .lbl::after {
245	content:"\f00c";
246	}
247
248	/* switch style 4 & 5 */
249	&.ace-switch-4 , &.ace-switch-5 {
250	+ .lbl::before {
251	content:@switch-4-text;
252	font-family:Arial, Helvetica, sans-serif;
253	font-weight:bolder;
254	font-size:12px;
255	line-height:23px; height:24px; overflow:hidden;
256	line-height:25px\9;
257
258	border-radius:12px;
259
260	display:inline-block;
261	background-color: @switch4-bg;
262	border: 1px solid @switch4-bg;
263
264	color:#FFF;
265	width:56px;
266	text-indent:-25px; text-indent:~"-28px\9";
267
268	display: inline-block;
269	position: relative;
270
271	//margin-right:8px;
272
273	box-shadow:none;
274
275	.transition(~"all .4s ease");
276	}
277
278	+ .lbl::after {
279	font-family:Helvetica, Arial, sans-serif;
280	content: '\|\|\|'; text-shadow:-1px 0px 0 rgba(0, 0, 0, 0.2);
281	font-size: 8px; font-weight:lighter;
282	color:@switch4-bg;
283	text-align:center;
284	position: absolute;
285	border-radius:12px;
286
287	color:@switch4-color;
288	top: 2px; left: 2px;
289	width:20px; height:20px; line-height:18px;
290	background-color:#FFF;
291
292	.transition(~"all .4s ease");
293	}
294
295
296	&:checked + .lbl {
297	&::before {
298	text-indent:9px;
299	background-color:@switch4-checked-bg;
300	border-color:#468FCC;
301	}
302	&::after {
303	left:34px;
304	background-color:#FFF;
305	}
306	}
307
308
309	}
310	&.ace-switch-5 + .lbl::before {
311	content:@switch-5-text;
312	}
313	&.ace-switch-5:checked + .lbl::before {
314	text-indent:8px;
315	}
316
317
318	/* switch style 6 */
319	&.ace-switch-6 {
320	+ .lbl {
321	position: relative;
322	&::before {
323	font-family:FontAwesome;
324	content:"\f00d";
325	text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
326	box-shadow:none;
327	border:none;
328
329	font-weight:lighter;
330	font-size:16px;
331
332
333	border-radius:12px;
334
335	display:inline-block;
336	background-color: #888;
337
338	color:#F2F2F2;
339
340	width:52px; height:22px; line-height:20px;
341	text-indent:32px;
342
343	.transition(~"background 0.1s ease");
344	}
345	&::after {
346	content: ''; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
347
348	position: absolute;
349	top: 2px; left: 3px;
350
351	border-radius:12px;
352	box-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
353
354	width:18px; height:18px;
355	text-align:center;
356
357	background-color:#F2F2F2;
358	border:4px solid #F2F2F2;
359
360	.transition(~"left 0.2s ease");
361	}
362	}
363
364	&:checked + .lbl {
365	&::before {
366	content: "\f00c";
367	text-indent:6px;
368
369	color:#FFF;
370	border-color:@switch6-checked-border;
371	background-color:@switch6-checked-bg;
372	}
373	&::after {
374	left:32px;
375
376	background-color:#FFF;
377	border:4px solid #FFF;
378	text-shadow:0 -1px 0 rgba(0, 200, 0, 0.25);
379	}
380	}
381	}
382
383
384	&.ace-switch-7 {
385	width:75px;
386
387	+ .lbl {
388	position: relative;
389	&::before {
390	content:@switch-7-text;
391
392	font-weight:bolder;
393	font-size:14px;
394	line-height:20px;
395
396	display:inline-block;
397	background-color: #FFF;
398	border: 2px solid #AAA;
399	border-radius:0;
400	box-shadow:none;
401
402	color:#aaa;
403
404	width:74px; height:26px; line-height:22px; overflow:hidden;
405	text-indent:4px;
406
407	display: inline-block;
408	position: relative;
409
410	//margin-right:8px;
411
412	.transition(~"all 0.2s ease");
413	}
414
415	&::after {
416	content: '\f00d';
417	font-family:FontAwesome;
418	font-size: 16px;
419
420	position: absolute;
421	top: 3px;
422	left: 39px;
423	width:32px; height:20px; line-height:18px;
424
425	text-align:center;
426
427	background-color:#aaa;
428	color:#FFF;
429	border-radius:0;
430	box-shadow:none;
431
432	.transition(~"all 0.2s ease-in-out");
433	}
434	}
435
436	&:checked + .lbl {
437	&::before {
438	color:@switch7-checked-bg;
439	background-color: #FFF;
440	text-indent:-33px;
441	border-color:@switch7-checked-border;
442	}
443	&::after {
444	left:3px;
445	content:'\f00c';
446	background-color:@switch7-checked-bg;
447	color: #FFF;
448	}
449	}
450
451	}
452	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format