pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
smart-forms.less
(23818B)
1
2
3 /*
4 * SMART FORMS
5 */
6
7 .smart-form *, .smart-form *:after, .smart-form *:before {
8 margin: 0;
9 padding: 0;
10 box-sizing: content-box;
11 -moz-box-sizing: content-box;
12 }
13
14 .smart-form .btn {
15 box-sizing:border-box;
16 -moz-box-sizing: border-box;
17 }
18
19 .smart-form .radio + .radio, .smart-form .checkbox + .checkbox {
20 margin-top: 0;
21 }
22
23 .smart-form footer .btn {
24 float: right;
25 height: 31px;
26 margin: 10px 0 0 5px;
27 padding: 0 22px;
28 font: 300 15px/29px 'Open Sans', Helvetica, Arial, sans-serif;
29 cursor: pointer;
30 }
31
32 .smart-form legend {
33 padding-top:15px;
34 }
35
36 .smart-form {
37 margin: 0;
38 outline: none;
39 color: #666;
40 position: relative;
41 }
42
43 .smart-form header {
44 display: block;
45 padding: 8px 0;
46 border-bottom: 1px dashed rgba(0, 0, 0, .2);
47 background: white;
48 font-size: 16px;
49 font-weight: 300;
50 color: #232323;
51 margin: 10px 14px 0;
52 }
53 .smart-form fieldset {
54 display: block;
55 padding: 25px 14px 5px;
56 border: none;
57 background: rgba(255,255,255,.9);
58 position: relative;
59 }
60 .smart-form fieldset + fieldset {
61 border-top: 1px solid rgba(0,0,0,.1);
62 }
63 .smart-form section {
64 margin-bottom: 15px;
65 position: relative;
66 }
67 .smart-form footer {
68 display: block;
69 padding: 7px 14px 15px;
70 border-top: 1px solid rgba(0,0,0,.1);
71 background: rgba(248,248,248,.9);
72 }
73 .smart-form footer:after {
74 content: '';
75 display: table;
76 clear: both;
77 }
78
79 .smart-form .label {
80 display: block;
81 margin-bottom: 6px;
82 line-height: 19px;
83 font-weight: 400;
84 font-size: 13px;
85 color: #333;
86 text-align: left;
87 }
88 .smart-form .label.col {
89 margin: 0;
90 padding-top: 7px;
91 }
92 .smart-form .note, .note {
93 margin-top: 6px;
94 padding: 0 1px;
95 font-size: 11px;
96 line-height: 15px;
97 color: #999;
98 }.note {margin-top:2px; font-size:10px;}
99 .smart-form .note a {
100 font-size:13px;
101 }
102
103 .smart-form .input, .smart-form .select, .smart-form .textarea, .smart-form .radio, .smart-form .checkbox, .smart-form .toggle, .smart-form .button {
104 position: relative;
105 display: block;
106 font-weight: 400;
107 }
108 .smart-form .input input, .smart-form .select select, .smart-form .textarea textarea {
109 display: block;
110 box-sizing: border-box;
111 -moz-box-sizing: border-box;
112 width: 100%;
113 height: 32px;
114 padding: 8px 10px;
115 outline: none;
116 border-width: 1px;
117 border-style: solid;
118 border-radius: 0;
119 background: #fff;
120 font: 13px/16px 'Open Sans', Helvetica, Arial, sans-serif;
121 color: #404040;
122 appearance: normal;
123 -moz-appearance: none;
124 -webkit-appearance: none;
125 }
126
127 /*
128 * File inputs
129 */
130 .smart-form .input-file .button {
131 position: absolute;
132 top: 4px;
133 right: 4px;
134 float: none;
135 height: 22px;
136 margin: 0;
137 padding: 0 14px;
138 font-size: 13px;
139 line-height: 22px;
140 }
141 .smart-form .input-file .button:hover {
142 box-shadow: none;
143 }
144 .smart-form .input-file .button input {
145 position: absolute;
146 top: 0;
147 right: 0;
148 padding: 0;
149 font-size: 30px;
150 cursor: pointer;
151 opacity: 0;
152 }
153
154 /*
155 * Selects
156 */
157 .smart-form .select i {
158 position: absolute;
159 top: 10px;
160 right: 11px;
161 width: 5px;
162 height: 11px;
163 background: white;
164 box-shadow: 0 0 0 9px white;
165 }
166 .smart-form .select i:after, .smart-form .select i:before {
167 content: '';
168 position: absolute;
169 right: 0;
170 border-right: 4px solid transparent;
171 border-left: 4px solid transparent;
172 }
173 .smart-form .select i:after {
174 bottom: 0;
175 border-top: 4px solid #404040;
176 }
177 .smart-form .select i:before {
178 top: 0;
179 border-bottom: 4px solid #404040;
180 }
181 .smart-form .select-multiple select {
182 height: auto;
183 }
184
185 /*
186 * Text areas
187 */
188 .smart-form .textarea textarea {
189 height: auto;
190 resize: none;
191 }
192 .smart-form .textarea-resizable textarea {
193 resize: vertical;
194 }
195 .smart-form .textarea-expandable textarea {
196 height: 31px;
197 }
198 .smart-form .textarea-expandable textarea:focus {
199 height: auto;
200 }
201
202 /*
203 * Radio and checkboxes
204 */
205 .smart-form .radio, .smart-form .checkbox {
206 margin-bottom: 4px;
207 padding-left: 25px;
208 font-size: 15px;
209 line-height: 25px;
210 color: #404040;
211 cursor: pointer;
212 font-size: 13px;
213 }
214 .smart-form .radio:last-child, .smart-form .checkbox:last-child {
215 margin-bottom: 0;
216 }
217 .smart-form .radio input, .smart-form .checkbox input {
218 position: absolute;
219 left: -9999px;
220 }
221 .smart-form .radio i, .smart-form .checkbox i {
222 position: absolute;
223 top: 3px;
224 left: 0;
225 display: block;
226 width: 17px;
227 height: 17px;
228 outline: none;
229 border-width: 1px;
230 border-style: solid;
231 background: #FFF;
232 }
233 .smart-form .radio i {
234 border-radius: 50%;
235 }
236 .smart-form .radio input + i:after, .smart-form .checkbox input + i:after {
237 position: absolute;
238 opacity: 0;
239 transition: opacity 0.1s;
240 -o-transition: opacity 0.1s;
241 -ms-transition: opacity 0.1s;
242 -moz-transition: opacity 0.1s;
243 -webkit-transition: opacity 0.1s;
244 }
245 .smart-form .radio input + i:after {
246 content: '';
247 top: 4px;
248 left: 4px;
249 width: 9px;
250 height: 9px;
251 border-radius: 50%;
252 }
253 .smart-form .checkbox input + i:after {
254 content: '\f00c';
255 top: -1px;
256 left: 1px;
257 width: 15px;
258 height: 15px;
259 font: normal 16px/19px FontAwesome;
260 text-align: center;
261 }
262
263 .smart-form .checkbox input:checked:hover + i:after {
264 //content: '\f00d';
265 }
266
267 .smart-form .checkbox input:checked:disabled:hover + i:after {
268 content: '\f00c';
269 }
270
271 .smart-form .radio input:checked + i:after, .smart-form .checkbox input:checked + i:after {
272 opacity: 1;
273 }
274 .smart-form .inline-group {
275 margin: 0 -30px -4px 0;
276 }
277 .smart-form .inline-group:after {
278 content: '';
279 display: table;
280 clear: both;
281 }
282 .smart-form .inline-group .radio, .smart-form .inline-group .checkbox {
283 float: left;
284 margin-right: 30px;
285 }
286 .smart-form .inline-group .radio:last-child, .smart-form .inline-group .checkbox:last-child {
287 margin-bottom: 4px;
288 }
289
290 /*
291 * toggles
292 */
293 .smart-form .toggle {
294 margin-bottom: 4px;
295 padding-right: 61px;
296 font-size: 15px;
297 line-height: 25px;
298 color: #404040;
299 cursor: pointer;
300 }
301 .smart-form .toggle:last-child {
302 margin-bottom: 0;
303 }
304 .smart-form .toggle input {
305 position: absolute;
306 left: -9999px;
307 }
308 .smart-form .toggle i {
309 content: '';
310 position: absolute;
311 top: 4px;
312 right: 0;
313 display: block;
314 width: 49px;
315 height: 17px;
316 border-width: 1px;
317 border-style: solid;
318 border-radius: 12px;
319 background: #fff;
320 }
321 .smart-form .toggle i:after {
322 content: attr(data-swchoff-text);
323 position: absolute;
324 top: 2px;
325 right: 8px;
326 left: 8px;
327 font-style: normal;
328 font-size: 9px;
329 line-height: 13px;
330 font-weight: 700;
331 text-align: left;
332 color: #5f5f5f;
333 }
334 .smart-form .toggle i:before {
335 content: '';
336 position: absolute;
337 z-index: 1;
338 top: 4px;
339 right: 4px;
340 display: block;
341 width: 9px;
342 height: 9px;
343 border-radius: 50%;
344 opacity: 1;
345 transition: right 0.2s;
346 -o-transition: right 0.2s;
347 -ms-transition: right 0.2s;
348 -moz-transition: right 0.2s;
349 -webkit-transition: right 0.2s;
350 }
351 .smart-form .toggle input:checked + i:after {
352 content: attr(data-swchon-text);
353 text-align: right;
354 }
355 .smart-form .toggle input:checked + i:before {
356 right: 36px;
357 }
358
359 /*
360 * ratings
361 */
362 .smart-form .rating {
363 margin-bottom: 4px;
364 font-size: 13px;
365 line-height: 25px;
366 color: #404040;
367 }
368 .smart-form .rating:last-child {
369 margin-bottom: 0;
370 }
371 .smart-form .rating input {
372 position: absolute;
373 left: -9999px;
374 }
375 .smart-form .rating label {
376 display: block;
377 float: right;
378 height: 17px;
379 margin-top: 5px;
380 padding: 0 2px;
381 font-size: 17px;
382 line-height: 17px;
383 cursor: pointer;
384 }
385
386 /*
387 * buttons
388 */
389 .smart-form .button {
390 float: right;
391 height: 31px;
392 overflow: hidden;
393 margin: 10px 0 0 5px;
394 padding: 0 25px;
395 outline: none;
396 border: 0;
397 font: 300 15px/31px 'Open Sans', Helvetica, Arial, sans-serif;
398 text-decoration: none;
399 color: #fff;
400 cursor: pointer;
401 }
402
403 .smart-form .icon-append, .smart-form .icon-prepend {
404 position: absolute;
405 top: 5px;
406 width: 22px;
407 height: 22px;
408 font-size: 14px;
409 line-height: 22px;
410 text-align: center;
411 }
412 .smart-form .icon-append {
413 right: 5px;
414 padding-left: 3px;
415 border-left-width: 1px;
416 border-left-style: solid;
417 }
418 .smart-form .icon-prepend {
419 left: 5px;
420 padding-right: 3px;
421 border-right-width: 1px;
422 border-right-style: solid;
423 }
424 .smart-form .input .icon-prepend + input, .smart-form .textarea .icon-prepend + textarea {
425 padding-left: 37px;
426 }
427 .smart-form .input .icon-append + input, .smart-form .textarea .icon-append + textarea {
428 padding-right: 37px;
429 }
430 .smart-form .input .icon-prepend + .icon-append + input, .smart-form .textarea .icon-prepend + .icon-append + textarea {
431 padding-left: 37px;
432 }
433
434 /*
435 * grid
436 */
437 .smart-form .row {
438 margin: 0 -15px;
439 }
440 .smart-form .row:after {
441 content: '';
442 display: table;
443 clear: both;
444 }
445 .smart-form .col {
446 float: left;
447 min-height: 1px;
448 padding-right: 15px;
449 padding-left: 15px;
450 box-sizing: border-box;
451 -moz-box-sizing: border-box;
452 }
453 .smart-form .col-1 {
454 width: 8.33%;
455 }
456 .smart-form .col-2 {
457 width: 16.66%;
458 }
459 .smart-form .col-3 {
460 width: 25%;
461 }
462 .smart-form .col-4 {
463 width: 33.33%;
464 }
465 .smart-form .col-5 {
466 width: 41.66%;
467 }
468 .smart-form .col-6 {
469 width: 50%;
470 }
471 .smart-form .col-8 {
472 width: 66.67%;
473 }
474 .smart-form .col-9 {
475 width: 75%;
476 }
477 .smart-form .col-10 {
478 width: 83.33%;
479 }
480 @media screen and (max-width: 600px) {
481 .smart-form .col {
482 float: none;
483 width: 100%;
484 }
485 }
486
487 /*
488 * tooltips
489 */
490 .smart-form .select select {
491 padding: 5px;
492 }
493 .smart-form .tooltip {
494 position: absolute;
495 z-index: 99999;
496 left: -9999px;
497 padding: 2px 8px 3px;
498 font-size: 11px;
499 line-height: 16px;
500 font-weight: 400;
501 background: rgba(0,0,0,0.9);
502 color: #fff;
503 opacity: 0;
504 transition: margin 0.3s, opacity 0.3s;
505 -o-transition: margin 0.3s, opacity 0.3s;
506 -ms-transition: margin 0.3s, opacity 0.3s;
507 -moz-transition: margin 0.3s, opacity 0.3s;
508 -webkit-transition: margin 0.3s, opacity 0.3s;
509 }
510 .smart-form .tooltip:after {
511 content: '';
512 position: absolute;
513 }
514 .smart-form .input input:focus + .tooltip, .smart-form .textarea textarea:focus + .tooltip {
515 opacity: 1;
516 }
517
518 .smart-form .tooltip-top-right {
519 bottom: 100%;
520 margin-bottom: 15px;
521 }
522 .smart-form .tooltip-top-right:after {
523 top: 100%;
524 right: 11px;
525 border-top: 4px solid rgba(0,0,0,0.9);
526 border-right: 4px solid transparent;
527 border-left: 4px solid transparent;
528 }
529 .smart-form .input input:focus + .tooltip-top-right, .smart-form .textarea textarea:focus + .tooltip-top-right {
530 right: 0;
531 left: auto;
532 margin-bottom: 5px;
533 }
534
535 .smart-form .tooltip-top-left {
536 bottom: 100%;
537 margin-bottom: 15px;
538 }
539 .smart-form .tooltip-top-left:after {
540 top: 100%;
541 left: 11px;
542 border-top: 4px solid rgba(0,0,0,0.9);
543 border-right: 4px solid transparent;
544 border-left: 4px solid transparent;
545 }
546 .smart-form .input input:focus + .tooltip-top-left, .smart-form .textarea textarea:focus + .tooltip-top-left {
547 right: auto;
548 left: 0;
549 margin-bottom: 5px;
550 }
551
552 .smart-form .tooltip-right {
553 top: 4px;
554 white-space: nowrap;
555 margin-left: 15px;
556 }
557 .smart-form .tooltip-right:after {
558 top: 6px;
559 right: 100%;
560 border-top: 4px solid transparent;
561 border-right: 4px solid rgba(0,0,0,0.9);
562 border-bottom: 4px solid transparent;
563 }
564 .smart-form .input input:focus + .tooltip-right, .smart-form .textarea textarea:focus + .tooltip-right {
565 left: 100%;
566 margin-left: 5px;
567 }
568
569 .smart-form .tooltip-left {
570 top: 4px;
571 white-space: nowrap;
572 margin-right: 15px;
573 }
574 .smart-form .tooltip-left:after {
575 top: 6px;
576 left: 100%;
577 border-top: 4px solid transparent;
578 border-bottom: 4px solid transparent;
579 border-left: 4px solid rgba(0,0,0,0.9);
580 }
581 .smart-form .input input:focus + .tooltip-left, .smart-form .textarea textarea:focus + .tooltip-left {
582 right: 100%;
583 left: auto;
584 margin-right: 5px;
585 }
586
587 .smart-form .tooltip-bottom-right {
588 top: 100%;
589 margin-top: 15px;
590 }
591 .smart-form .tooltip-bottom-right:after {
592 bottom: 100%;
593 right: 11px;
594 border-right: 4px solid transparent;
595 border-bottom: 4px solid rgba(0,0,0,0.9);
596 border-left: 4px solid transparent;
597 }
598 .smart-form .input input:focus + .tooltip-bottom-right, .smart-form .textarea textarea:focus + .tooltip-bottom-right {
599 right: 0;
600 left: auto;
601 margin-top: 5px;
602 }
603
604 .smart-form .tooltip-bottom-left {
605 top: 100%;
606 margin-top: 15px;
607 }
608 .smart-form .tooltip-bottom-left:after {
609 bottom: 100%;
610 left: 11px;
611 border-right: 4px solid transparent;
612 border-bottom: 4px solid rgba(0,0,0,0.9);
613 border-left: 4px solid transparent;
614 }
615 .smart-form .input input:focus + .tooltip-bottom-left, .smart-form .textarea textarea:focus + .tooltip-bottom-left {
616 right: auto;
617 left: 0;
618 margin-top: 5px;
619 }
620
621 /*
622 * normal state
623 */
624 .smart-form .input input, .smart-form .select select, .smart-form .textarea textarea, .smart-form .radio i, .smart-form .checkbox i, .smart-form .toggle i, .smart-form .icon-append, .smart-form .icon-prepend {
625 border-color: #BDBDBD;
626 transition: border-color 0.3s;
627 -o-transition: border-color 0.3s;
628 -ms-transition: border-color 0.3s;
629 -moz-transition: border-color 0.3s;
630 -webkit-transition: border-color 0.3s;
631 }
632 .smart-form .toggle i:before {
633 background-color: #3276B1;
634 }
635 .smart-form .rating label {
636 color: #ccc;
637 transition: color 0.3s;
638 -o-transition: color 0.3s;
639 -ms-transition: color 0.3s;
640 -moz-transition: color 0.3s;
641 -webkit-transition: color 0.3s;
642 }
643 .smart-form .button {
644 background-color: @brand-primary;
645 opacity: 0.8;
646 transition: opacity 0.2s;
647 -o-transition: opacity 0.2s;
648 -ms-transition: opacity 0.2s;
649 -moz-transition: opacity 0.2s;
650 -webkit-transition: opacity 0.2s;
651 }
652 .smart-form .button.button-secondary {
653 background-color: #b3b3b3;
654 }
655 .smart-form .icon-append, .smart-form .icon-prepend {
656 color: #A2A2A2;
657 }
658
659 /*
660 * hover state
661 */
662 .smart-form .input:hover input, .smart-form .select:hover select, .smart-form .textarea:hover textarea, .smart-form .radio:hover i, .smart-form .checkbox:hover i, .smart-form .toggle:hover i {
663 border-color: #5D98CC;
664 }
665 .smart-form .rating input + label:hover,
666 .smart-form .rating input + label:hover ~
667 label {
668 color: #3276B1;
669 }
670 .smart-form .button:hover {
671 opacity: 1;
672 }
673
674 .smart-form .radio:hover i,
675 .smart-form .checkbox:hover i,
676 .smart-form .toggle:hover i {
677 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
678 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
679 }
680
681 /*
682 * radio/toggle/checkbox active state
683 */
684 .smart-form .radio:active i,
685 .smart-form .checkbox:active i,
686 .smart-form .toggle:active i {
687 background: #F0F0F0;
688 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
689 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
690 }
691
692
693 /*
694 * focus state
695 */
696 .smart-form .input input:focus, .smart-form .select select:focus, .smart-form .textarea textarea:focus, .smart-form .radio input:focus + i, .smart-form .checkbox input:focus + i, .smart-form .toggle input:focus + i {
697 border-color: #3276B1;
698 }
699
700 /*
701 * checked state
702 */
703 .smart-form .radio input + i:after {
704 background-color: #3276B1;
705 }
706 .smart-form .checkbox input + i:after {
707 color: #3276B1;
708 }
709 .smart-form .radio input:checked + i, .smart-form .checkbox input:checked + i, .smart-form .toggle input:checked + i {
710 border-color: #3276B1;
711 }
712 .smart-form .rating input:checked ~
713 label {
714 color: #3276B1;
715 }
716
717 /*
718 * error state
719 */
720 .smart-form .state-error input, .smart-form .state-error select, .smart-form .state-error textarea, .smart-form .radio.state-error i, .smart-form .checkbox.state-error i, .smart-form .toggle.state-error i {
721 background: #fff0f0;
722 border-color: #A90329;
723 }
724
725 .smart-form .toggle.state-error input:checked + i {
726 background: #fff0f0;
727 }
728 .smart-form .state-error + em {
729 display: block;
730 margin-top: 6px;
731 padding: 0 1px;
732 font-style: normal;
733 font-size: 11px;
734 line-height: 15px;
735 color: #D56161;
736 }
737 .smart-form .rating.state-error + em {
738 margin-top: -4px;
739 margin-bottom: 4px;
740 }
741
742 .smart-form .state-error select + i {
743 background: #FFF0F0;
744 box-shadow: 0 0 0 9px #FFF0F0;
745 }
746
747 .state-error .icon-append, .state-error .icon-prepend {
748 color:#ed1c24;
749 }
750
751 /*
752 * success state
753 */
754 .smart-form .state-success input, .smart-form .state-success select, .smart-form .state-success textarea, .smart-form .radio.state-success i, .smart-form .checkbox.state-success i, .smart-form .toggle.state-success i {
755 background: #f0fff0;
756 border-color: #7DC27D;
757 }
758
759 .smart-form .toggle.state-success input:checked + i {
760 background: #f0fff0;
761 }
762 .smart-form .note-success {
763 color: #6fb679;
764 }
765
766 .smart-form .state-success select + i {
767 background: honeyDew;
768 box-shadow: 0 0 0 9px honeyDew;
769 }
770
771 /*
772 * disable state
773 */
774 .smart-form .input.state-disabled input, .smart-form .select.state-disabled, .smart-form .textarea.state-disabled, .smart-form .radio.state-disabled, .smart-form .checkbox.state-disabled, .smart-form .toggle.state-disabled, .smart-form .button.state-disabled {
775 cursor: default !important;
776 opacity: 0.6 !important;
777 }
778 .smart-form .input.state-disabled:hover input, .smart-form .select.state-disabled:hover select, .smart-form .textarea.state-disabled:hover textarea, .smart-form .radio.state-disabled:hover i, .smart-form .checkbox.state-disabled:hover i, .smart-form .toggle.state-disabled:hover i {
779 border-color: #e5e5e5 !important;
780 }
781
782
783 .smart-form .state-disabled.radio input:checked + i,
784 .smart-form .state-disabled.checkbox input:checked + i,
785 .smart-form .state-disabled.toggle input:checked + i,
786 .smart-form .state-disabled.checkbox input + i:after,
787 .smart-form .state-disabled.radio input + i:after {
788 border-color: #e5e5e5 !important;
789 color: #333 !important;
790
791 }
792
793 .smart-form .state-disabled.radio input + i:after {
794 background-color: #333;
795 }
796
797 /*
798 * submit state
799 */
800 .smart-form .message {
801 display: none;
802 color: #6fb679;
803 }
804 .smart-form .message i {
805 display: block;
806 margin: 0 auto 20px;
807 width: 81px;
808 height: 81px;
809 border: 1px solid #6fb679;
810 border-radius: 50%;
811 font-size: 30px;
812 line-height: 81px;
813 }
814 .smart-form.submited fieldset, .smart-form.submited footer {
815 display: none;
816 }
817 .smart-form.submited .message {
818 display: block;
819 padding: 25px 30px;
820 background: rgba(255,255,255,.9);
821 font: 300 18px/27px 'Open Sans', Helvetica, Arial, sans-serif;
822 text-align: center;
823 }
824
825 /*
826 * JQUERY UI UPDATE
827 */
828
829 .smart-form .ui-widget-content .ui-spinner-input {
830 margin:0px;
831 border:0px;
832 box-shadow:none !important;
833 height:29px;
834 }
835
836 /*
837 * date picker
838
839 .ui-datepicker {
840 display: none;
841 padding: 10px 12px;
842 background: #fff;
843 box-shadow: 0 0 10px rgba(0,0,0,.3);
844 font: 13px/1.55 'Open Sans', Helvetica, Arial, sans-serif;
845 text-align: center;
846 color: #666;
847 }
848 .ui-datepicker a {
849 color: #404040;
850 }
851 .ui-datepicker-header {
852 position: relative;
853 margin: -10px -12px 10px;
854 padding: 10px;
855 border-bottom: 1px solid rgba(0,0,0,.1);
856 font-size: 15px;
857 line-height: 27px;
858 }
859 .ui-datepicker-prev, .ui-datepicker-next {
860 position: absolute;
861 top: 0;
862 display: block;
863 width: 47px;
864 height: 47px;
865 font-size: 15px;
866 line-height: 47px;
867 text-decoration: none;
868 cursor: pointer;
869 }
870 .ui-datepicker-prev {
871 left: 0;
872 }
873 .ui-datepicker-next {
874 right: 0;
875 }
876 .ui-datepicker-calendar {
877 border-collapse: collapse;
878 font-size: 13px;
879 line-height: 27px;
880 }
881 .ui-datepicker-calendar th {
882 color: #999;
883 }
884 .ui-datepicker-calendar a, .ui-datepicker-calendar span {
885 display: block;
886 width: 31px;
887 margin: auto;
888 text-decoration: none;
889 color: #404040;
890 text-align:center;
891 }
892 .ui-datepicker-unselectable.ui-state-disabled {
893
894 }
895 .ui-datepicker-unselectable.ui-state-disabled > span {
896 color:#bfbfbf;
897 background-color: #FAFCFD;
898 }
899
900 .ui-datepicker-calendar a:hover {
901 background: #3276B1;
902 color:#fff;
903 }
904 .ui-datepicker-calendar span {
905
906 }
907 .ui-datepicker-today a {
908 font-weight: 700;
909 }
910 .ui-datepicker-calendar .ui-state-active {
911 background: rgba(0,0,0,.05);
912 cursor: default;
913 }
914 .ui-datepicker-inline {
915 border: 2px solid #e5e5e5;
916 background: #fff;
917 box-shadow: none;
918 }
919 .ui-datepicker-inline .ui-datepicker-calendar {
920 width: 100%;
921 } */
922
923 /*
924 * model
925 */
926 .smart-form-modal {
927 position: fixed;
928 z-index: 1;
929 display: none;
930 width: 400px;
931 }
932 .smart-form-modal-overlay {
933 position: fixed;
934 top: 0;
935 left: 0;
936 display: none;
937 width: 100%;
938 height: 100%;
939 background: rgba(0,0,0,0.7);
940 }
941
942 /*
943 * Time picker
944 */
945
946 .ui-timepicker-div .ui-widget-header {
947 margin-bottom: 8px;
948 }
949 .ui-timepicker-div dl {
950 text-align: left;
951 }
952 .ui-timepicker-div dl dt {
953 float: left;
954 clear: left;
955 padding: 0 0 0 5px;
956 }
957 .ui-timepicker-div dl dd {
958 margin: 17px 10px 12px 40%;
959 }
960 .ui-timepicker-div td {
961 font-size: 90%;
962 }
963 .ui-tpicker-grid-label {
964 background: none;
965 border: none;
966 margin: 0;
967 padding: 0;
968 }
969
970 .ui-timepicker-rtl {
971 direction: rtl;
972 }
973 .ui-timepicker-rtl dl {
974 text-align: right;
975 padding: 0 5px 0 0;
976 }
977 .ui-timepicker-rtl dl dt {
978 float: right;
979 clear: right;
980 }
981 .ui-timepicker-rtl dl dd {
982 margin: 0 40% 10px 10px;
983 }
984
985 /*
986 * Large, small and extra small fields
987 */
988
989 .smart-form input.input-lg {
990 height: 44px;
991 padding: 10px 16px;
992 font-size: 17px;
993 line-height: 1.33;
994 }
995
996 .smart-form input.input-sm {
997 height: 30px;
998 padding: 5px 10px;
999 font-size: 12px;
1000 line-height: 1.5;
1001 }
1002
1003 .smart-form input.input-xs {
1004 height: 24px;
1005 padding: 2px 10px;
1006 font-size: 11px;
1007 line-height: 1.5;
1008 }
1009
1010 /* SELECT */
1011
1012 .smart-form select.input-sm {
1013 height: 30px;
1014 line-height: 15px;
1015 font-size: 12px;
1016 }
1017 .smart-form select.input-sm + i {
1018 height: 10px;
1019 }
1020
1021 .smart-form select.input-lg {
1022 height: 44px;
1023 line-height: 22px;
1024 font-size: 17px;
1025 }.smart-form select.input-lg + i {
1026 height: 11px;
1027 top: 17px;
1028 }