pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
component-radiocheck.less
(11824B)
1 /*
2 * Custom Radio and Input
3 * SETUP
4 */
5
6 .checkbox input[type="checkbox"].checkbox + span,
7 .checkbox-inline input[type="checkbox"].checkbox + span,
8 .radiobox-inline input[type="radio"].radiobox + span,
9 .radio input[type="radio"].radiobox + span {
10 margin-left:-20px;
11 }
12
13 .form-inline .checkbox input[type="checkbox"].checkbox + span,
14 .form-inline .radiobox input[type="radio"].radiobox + span {
15 margin-left:0px;
16 }
17 .form-inline .checkbox,
18 .form-inline .radiobox {
19 padding-left:0px;
20 }
21
22 label input[type="radio"].radiobox + span, input[type="checkbox"].checkbox + span {
23 vertical-align: middle;
24 line-height:20px;
25 }
26
27 input[type="checkbox"].checkbox + span, input[type="checkbox"].checkbox + span:after, input[type="checkbox"].checkbox + span:before,
28 input[type="radio"].radiobox + span, input[type="radio"].radiobox + span:after, input[type="radio"].radiobox + span:before {
29 box-sizing:content-box !important;
30 -webkit-box-sizing:content-box !important;
31 -moz-box-sizing:content-box !important;
32 }
33
34 input[type="checkbox"].checkbox,
35 input[type="radio"].radiobox {
36 visibility:hidden;
37 position: absolute;
38 z-index: 20;
39 width: 18px;
40 height: 18px;
41 }
42 label input[type="checkbox"].checkbox + span,
43 label input[type="radio"].radiobox + span {
44 position: relative;
45 z-index: 19;
46 display: inline-block;
47 margin: 0;
48 line-height:17px;
49 min-height:14px;
50 min-width:14px;
51 margin-right:5px;
52 }
53
54 label input[type="checkbox"].checkbox + span:hover,
55 label input[type="radio"].radiobox + span:hover {
56 cursor:pointer;
57 }
58
59 label input[type="radio"].radiobox + span:before,
60 label input[type="checkbox"].checkbox + span:before {
61 font-family: 'FontAwesome';
62 font-size: 12px;
63 border-radius: 0;
64 content: "\a0"; /* we use '\a0'; to simulate a non-breaking-space (http://milov.nl/7029) */
65 display: inline-block;
66 text-align: center;
67 vertical-align: middle;
68 padding:1px;
69 height: 12px;
70 line-height: 12px;
71 min-width: 12px;
72 margin-right:5px;
73 border: 1px solid @gray-mid-light;
74 background-color: @gray-lightest;
75 font-weight:normal;
76 margin-top:-1px;
77
78 }
79
80 /*
81 * RADIO
82 */
83
84 label input[type="radio"].radiobox + span:before {
85 content: "\a0"; /* we use '\a0'; to simulate a non-breaking-space (http://milov.nl/7029) */
86 border-radius:50%;
87 -moz-border-radius:50%;
88 -webkit-border-radius: 50%;
89 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .1), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .2);
90 }
91
92 label input[type="radio"].radiobox:checked + span {
93 font-weight:bold;
94 }
95
96 /* DEFAULT COLOR */
97
98 label input[type="radio"].radiobox:checked + span:before {
99 content: "\f111"; /* circle */
100 color:#2E7BCC;
101 }
102
103 /* ORANGE COLOR */
104
105 label input[type="radio"].radiobox.style-3:checked + span:before {
106 color:@brand-danger;
107 border-color:@brand-danger;
108 }
109
110 /* CHROME COLOR */
111
112 label input[type="radio"].radiobox.style-2:checked + span:before {
113 color:#66665e;
114 border-color:#4d90fe;
115 font-size:9px;
116 }
117
118 label input[type="radio"].radiobox.style-2:checked + span {
119 font-weight:normal;
120 }
121
122 /* Style 1 Radio */
123
124 label input[type="radio"].radiobox.style-1 + span:before {
125 font-size:9px;
126 background:@white;
127 text-shadow:none;
128 box-shadow:none !important;
129 border-width:1px;
130 height: 13px;
131 line-height: 13px;
132 min-width: 13px;
133 }
134 label input[type="radio"].radiobox.style-1:checked + span:before {
135 font-size:10px;
136 color:@gray-dark;
137 border-color:@gray-dark;
138 background:@white;
139 }
140 label input[type="radio"].radiobox.style-1:checked + span {
141 font-weight:normal;
142 }
143
144
145 /*
146 * RADIO:HOVER & ACTIVE STATES
147 */
148
149 /* DEFAULT:HOVER radio content --> 2022 */
150
151 label:hover input[type="radio"].radiobox + span:before,
152 label:hover input[type="radio"].radiobox:checked + span:before {
153 color:#2E7BCC;
154 border-color:#2E7BCC;
155 }
156
157 /* ORANGE:HOVER */
158
159 label:hover input[type="radio"].radiobox.style-3 + span:before,
160 label:hover input[type="radio"].radiobox.style-3:checked + span:before {
161 color:@brand-danger;
162 border-color:@brand-danger;
163 }
164
165 /* CHROME:HOVER */
166 label:hover input[type="radio"].radiobox.style-2:checked + span:before {
167 color:#66665e;
168 border-color:#4d90fe;
169 }
170
171 /* METRO:HOVER */
172 label:hover input[type="radio"].radiobox.style-1:checked + span:before {
173 color:@gray-dark;
174 border-color:@gray-dark;
175 background:@white;
176 }
177 label:hover input[type="radio"].radiobox.style-1 + span:before {
178 color:@gray-dark;
179 border-color:@gray-dark;
180 background:@white;
181 }
182
183 /* DEFAULT:ACTIVE */
184
185 label:active input[type="radio"].radiobox + span:before {
186 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .3), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .4);
187 }
188
189
190 /*
191 * RADIO:DISABLE STATES
192 */
193
194 /* GLOBAL */
195 label input[type="radio"][disabled].radiobox + span,
196 label input[type="radio"][disabled].radiobox:checked + span,
197 label:hover input[type="radio"][disabled].radiobox:checked + span:before {
198 color:#A7A7A7;
199 cursor:not-allowed;
200 }
201
202 label input[type="radio"][disabled].radiobox:checked + span:before {
203 content: "\f111";
204 }
205
206 label input[type="radio"][disabled].radiobox:checked + span:before,
207 label input[type="radio"][disabled].radiobox + span:before,
208 label:active input[type="radio"][disabled].radiobox:checked + span:before,
209 label:hover input[type="radio"][disabled].radiobox:checked + span:before {
210 background:#eee !important;
211 border-color:#CCC !important;
212 box-shadow:none;
213 color:#A7A7A7;
214 }
215
216 /*
217 * CHECKBOX
218 */
219
220 label input[type="checkbox"].checkbox + span:before {
221 content: "\a0"; /* we use '\a0'; to simulate a non-breaking-space (http://milov.nl/7029) */
222
223 }
224
225 label input[type="checkbox"].checkbox:checked + span:before {
226 content: "\f00c";
227 }
228
229 label input[type="checkbox"].checkbox:checked + span {
230 font-weight:bold;
231 }
232
233 /* DEFAULT COLOR */
234
235 label input[type="checkbox"].checkbox:checked + span:before {
236 color:#2E7BCC;
237 }
238
239 /* RED COLOR */
240
241 label input[type="checkbox"].checkbox.style-3:checked + span:before {
242 color:@white;
243 border-color:@brand-danger;
244 background:@brand-danger;
245 }
246
247 /* CHROME */
248 label input[type="checkbox"].checkbox.style-2 + span:before {
249 background:transparent;
250 border-color:#c1c1c1;
251 box-shadow:none;
252 }
253 label input[type="checkbox"].checkbox.style-2:checked + span:before {
254 content:"\f00c";
255 color:#66665e;
256 border-color:#4d90fe;
257 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQ0MEM4RUFEQUE4MTFFMkEwMjM5NzlCRjAxM0UwRjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQ0MEM4RUJEQUE4MTFFMkEwMjM5NzlCRjAxM0UwRjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDQwQzhFOERBQTgxMUUyQTAyMzk3OUJGMDEzRTBGNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDQwQzhFOURBQTgxMUUyQTAyMzk3OUJGMDEzRTBGNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsD/PVAAAAAQSURBVHjaYv7//78vQIABAAlYA05NMPppAAAAAElFTkSuQmCC) @white; /*#fefeec*/
258 }
259 label input[type="checkbox"].checkbox.style-2:checked + span {
260 font-weight:normal;
261 }
262
263 /* METRO COLOR */
264
265 label input[type="checkbox"].checkbox.style-1 + span:before {
266 color:@gray-dark;
267 background:@white;
268 text-shadow:none;
269 box-shadow:none !important;
270 border-width: 1px;
271 height: 12px;
272 line-height: 13px;
273 min-width: 12px;
274 }
275
276 label input[type="checkbox"].checkbox.style-1:checked + span:before {
277 color:@gray-dark;
278 border-color:@gray-dark;
279 }
280 label input[type="checkbox"].checkbox.style-1:checked + span {
281 font-weight:normal;
282 }
283
284
285 /*
286 * CHECKBOX:HOVER & ACTIVE STATES
287 */
288
289 label:active input[type="checkbox"].checkbox + span:before {
290 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .3), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .4);
291 }
292
293 /* DEFAULT:HOVER */
294
295 label:hover input[type="checkbox"].checkbox + span:before {
296 color:#2E7BCC;
297 border-color:#2E7BCC;
298
299 }
300
301 /* RED:HOVER*/
302
303 label:hover input[type="checkbox"].checkbox.style-3 + span:before {
304 color:@white;
305 border-color:#A90327;
306 }
307
308 /* CHROME:HOVER*/
309
310 label:hover input[type="checkbox"].checkbox.style-2 + span:before {
311 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .1), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .2);
312 }
313
314 label:hover input[type="checkbox"].checkbox.style-2:checked + span:before {
315 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .3), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .4);
316 }
317
318 /* METRO:HOVER*/
319
320 label:hover input[type="checkbox"].checkbox.style-1 + span:before {
321 border-color:@gray-dark;
322 }
323
324 /* DEFAULT:ACTIVE */
325
326 label:active input[type="checkbox"].checkbox:checked + span:before {
327 color:@white;
328 background:#2E7BCC;
329 border-color:#2E7BCC;
330 }
331
332 /* RED:ACTIVE */
333
334 label:active input[type="checkbox"].checkbox.style-3:checked + span:before {
335 color:@brand-danger;
336 background:@white;
337 border-color:@brand-danger;
338 }
339
340 /* CHROME:ACTIVE */
341
342 label:active input[type="checkbox"].checkbox.style-2:checked + span:before {
343 color:#66665e;
344 background:transparent;
345 border-color:#c1c1c1;
346 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .3), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .4);
347 }
348 label:active input[type="checkbox"].checkbox.style-2 + span:before {
349 color:#66665e;
350 background:transparent;
351 border-color:#c1c1c1;
352 box-shadow: inset 0px 2px 3px 0px rgba(red(@black), green(@black), blue(@black), .3), 0px 1px 0px 0px rgba(red(@white), green(@white), blue(@white), .4);
353 }
354
355 /* METRO:ACTIVE */
356
357 label:active input[type="checkbox"].checkbox.style-1:checked + span:before {
358 color:@white;
359 background:@gray-dark;
360 border-color:@gray-dark;
361 }
362
363
364 /*
365 * CHECKBOX:DISABLE STATES
366 */
367
368 /* GLOBAL */
369 label input[type="checkbox"][disabled].checkbox + span,
370 label input[type="checkbox"][disabled].checkbox:checked + span,
371 label:hover input[type="checkbox"][disabled].checkbox:checked + span:before {
372 color:#A7A7A7;
373 cursor:not-allowed;
374 }
375
376 label input[type="checkbox"][disabled].checkbox:checked + span:before {
377 content: "\f00c";
378 color:#A7A7A7;
379 }
380 label input[type="checkbox"][disabled].checkbox.style-2:checked + span:before {
381 content: "\f00c";
382 }
383
384 label input[type="checkbox"][disabled].checkbox:checked + span:before,
385 label input[type="checkbox"][disabled].checkbox + span:before,
386 label:active input[type="checkbox"][disabled].checkbox:checked + span:before,
387 label:hover input[type="checkbox"][disabled].checkbox:checked + span:before {
388 background:#eee !important;
389 border-color:#CCC !important;
390 box-shadow:none;
391 color:#A7A7A7;
392 box-shadow:none !important;
393 }