PluginProbe
Adminify – White Label, Admin Menu Editor, Login Customizer / 2.0.0
Adminify – White Label, Admin Menu Editor, Login Customizer v2.0.0
4.3.2 4.3.1 4.3.0 4.2.26 4.2.25 4.2.24 4.2.23 4.2.22 4.2.21 4.2.20 4.2.19 4.2.18 4.2.17 4.2.16 4.2.15 4.2.14 4.2.13 4.2.12 4.2.11 4.2.10 4.2.9 4.2.8 4.2.7 4.2.6 4.2.5 All 165 releases
adminify / lib / adminify-framework / assets / scss / vendor / _fields.scss

_fields.scss in Adminify – White Label, Admin Menu Editor, Login Customizer 2.0.0, at lib/adminify-framework/assets/scss/vendor/_fields.scss

2,321 lines 36.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * 03. Fields
3 */
4 .adminify-field{
5 position: relative;
6 padding: 30px;
7
8 + .adminify-field{
9 border-top: 1px solid #eee;
10 }
11
12 p:first-child{
13 margin-top: 0;
14 }
15
16 p:last-child{
17 margin-bottom: 0;
18 }
19
20 &:after,
21 &:before{
22 content: " ";
23 display: table;
24 }
25
26 &:after{
27 clear: both;
28 }
29
30 h4{
31 margin-top: 0;
32 }
33
34 .adminify-title{
35 position: relative;
36 width: 20%;
37 float: left;
38
39 h4{
40 margin: 0;
41 color: #23282d;
42 }
43 }
44
45 .adminify-fieldset{
46 float: right;
47 width: calc(80% - 20px);
48 }
49 }
50
51 .adminify-pseudo-field{
52 padding: 0 5px 0 0 !important;
53 display: inline-block;
54
55 + .adminify-pseudo-field{
56 border: 0;
57 }
58
59 pre{
60 display: none;
61 }
62 }
63
64 /**
65 * 03. 02. Field: accordion
66 */
67 .adminify-field-accordion{
68
69 .adminify-accordion-item{
70 position: relative;
71 margin-bottom: 5px;
72
73 &:last-child{
74 margin-bottom: 0;
75 }
76
77 h4{
78 font-size: 1em;
79 }
80 }
81
82 .adminify-accordion-title{
83 display: block;
84 cursor: pointer;
85 position: relative;
86 margin: 0;
87 padding: 15px;
88 min-height: 0;
89 font-size: 100%;
90 user-select: none;
91 border: 1px solid #ccd0d4;
92 background-color: #fafafa;
93 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
94 transition: border-color .15s;
95
96 &:active,
97 &:hover,
98 &:focus{
99 outline: none;
100 border-color: #999;
101 }
102
103 .adminify--icon{
104 width: 20px;
105 text-align: center;
106 margin-right: 2px;
107 }
108 }
109
110 .adminify-accordion-icon{
111 width: 16px;
112 text-align: center;
113 }
114
115 .adminify-accordion-content{
116 display: none;
117 padding: 0;
118 border: 1px solid #ccd0d4;
119 border-top: none;
120 background-color: #fff;
121 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
122
123 > .adminify-field{
124 padding: 15px;
125 }
126 }
127
128 .adminify-accordion-open{
129 display: block;
130 }
131 }
132
133 /**
134 * 03. 03. Field: background
135 */
136 .adminify-field-background{
137
138 .adminify-field{
139 border: 0 !important;
140 padding: 0;
141 margin-bottom: 6px;
142 margin-right: 6px;
143 }
144
145 .adminify--title{
146 color: #777;
147 font-size: 12px;
148 }
149
150 .adminify--background-colors{
151 display: flex;
152 flex-wrap: wrap;
153 }
154
155 .adminify--background-attributes{
156 display: flex;
157 flex-wrap: wrap;
158
159 select{
160 min-width: 100%;
161 margin: 0;
162 }
163
164 .adminify-field{
165 flex: 1;
166 }
167 }
168
169 .adminify--attributes-hidden{
170 display: none;
171 }
172 }
173
174 /**
175 * 03. 04. Field: backup
176 */
177 .adminify-field-backup{
178
179 textarea{
180 width: 100%;
181 min-height: 200px;
182 margin-bottom: 5px;
183 }
184
185 small{
186 display: inline-block;
187 margin: 5px;
188 }
189
190 hr{
191 margin: 20px 0;
192 border: none;
193 border-bottom: 1px solid #e5e5e5;
194 }
195 }
196
197 /**
198 * 03. 05. Field: border, spacing, dimensions
199 */
200 .adminify-field-border,
201 .adminify-field-spacing,
202 .adminify-field-dimensions{
203
204 .adminify--inputs{
205 float: left;
206 display: flex;
207 flex-wrap: wrap;
208 }
209
210 .adminify--input{
211 display: flex;
212 padding-right: 6px;
213 padding-bottom: 4px;
214 box-sizing: border-box;
215
216 select{
217 margin: 0;
218 }
219
220 input{
221 position: relative;
222 z-index: 1;
223 margin: 0;
224 width: 65px;
225 max-width: 100%;
226 text-align: center;
227 }
228 }
229
230 .adminify--color{
231 float: left;
232 }
233
234 .adminify--label{
235 display: flex;
236 flex-direction: column;
237 justify-content: center;
238 user-select: none;
239 min-width: 20px;
240 max-width: 100%;
241 padding: 0 4px;
242 font-size: 12px;
243 text-align: center;
244 color: #555;
245 border: 1px solid #7B776C;
246 background-color: #f5f5f5;
247 }
248
249 .adminify--icon{
250 border-right: 0;
251 border-radius: 4px 0 0 4px;
252 }
253
254 .adminify--icon + input{
255 border-top-left-radius: 0;
256 border-bottom-left-radius: 0;
257 }
258
259 .adminify--unit{
260 border-left: 0;
261 border-radius: 0 4px 4px 0;
262 }
263
264 .adminify--is-unit{
265 border-top-right-radius: 0;
266 border-bottom-right-radius: 0;
267 }
268 }
269
270 /**
271 * 03. 06. Field: button_set
272 */
273 .adminify-field-button_set{
274
275 .adminify--buttons{
276 display: inline-block;
277 }
278
279 .adminify--button{
280 position: relative;
281 z-index: 1;
282 float: left;
283 cursor: pointer;
284 padding: 7px 14px;
285 min-width: 16px;
286 text-align: center;
287 color: #555;
288 border: 1px solid #cccccc;
289 background-color: #f7f7f7;
290 user-select: none;
291 box-shadow: 0 1px 0 rgba(0,0,0,0.1);
292
293 &:first-child{
294 border-radius: 4px 0 0 4px;
295 }
296
297 &:last-child{
298 border-radius: 0 4px 4px 0;
299 }
300
301 &:not(:first-child){
302 margin-left: -1px;
303 }
304
305 &:hover{
306 background-color: #eee;
307 }
308 }
309
310 .adminify--active:hover,
311 .adminify--active{
312 z-index: 2;
313 color: #fff;
314 border-color: #006799;
315 background-color: #0085ba;
316 }
317
318 input{
319 display: none;
320 }
321 }
322
323 /**
324 * 03. 07. Field: checkbox, radio
325 */
326 .adminify-field-checkbox,
327 .adminify-field-radio{
328
329 ul{
330 margin: 0;
331 padding: 0;
332 list-style-type: none;
333 overflow-y: auto;
334 max-height: 305px;
335
336 li{
337 margin-bottom: 6px;
338 }
339
340 ul{
341 max-height: none;
342
343 li{
344 margin-left: 8px;
345
346 &:first-child{
347 margin-left: 0;
348 }
349 }
350 }
351 }
352
353 input{
354 margin: 0 1px;
355 }
356
357 .adminify--inline-list li{
358 display: inline-block;
359 margin-right: 15px;
360 }
361
362 .adminify--text{
363 margin-left: 5px;
364 vertical-align: middle;
365 }
366
367 .adminify-checker{
368 cursor: pointer;
369 }
370 }
371
372 /**
373 * 03. 08. Field: code_editor
374 */
375 .adminify-field-code_editor{
376
377 .CodeMirror{
378 width: 100%;
379 height: 400px;
380 }
381
382 .cm-s-default{
383 border: 1px solid #ccd0d4;
384 }
385
386 textarea{
387 width: 100%;
388 height: 400px;
389 }
390 }
391
392 /**
393 * 03. 09. Field: color
394 */
395 .adminify-field-color{
396
397 > input{
398 opacity: 0.75;
399 width: 115px;
400 max-width: 100%;
401 }
402
403 .button.wp-picker-clear{
404 padding: 0 8px;
405 margin-left: 6px;
406 line-height: 2.54545455;
407 min-height: 30px;
408 }
409 }
410
411 /**
412 * 03. 10. Field: color_group
413 */
414 .adminify-field-color_group{
415
416 .adminify--left{
417 float: left;
418 margin-right: 10px;
419 margin-bottom: 5px;
420 }
421
422 .adminify--title{
423 color: #999;
424 margin-bottom: 5px;
425 }
426 }
427
428 /**
429 * 03. 11. Field: fieldset
430 */
431 .adminify-field-fieldset{
432
433 .adminify-fieldset-content{
434 border: 1px solid #ccd0d4;
435 background-color: #fff;
436 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
437
438 > .adminify-field{
439 padding: 15px;
440 }
441 }
442
443 .adminify-field-subheading{
444 font-size: 13px;
445 }
446 }
447
448 /**
449 * 03. 12. Field: date
450 */
451 .adminify-field-date{
452
453 input{
454 margin: 0;
455 }
456
457 .adminify--to{
458 margin-left: 7px;
459 }
460 }
461
462 .adminify-datepicker-wrapper{
463 margin-top: 5px;
464 width: auto;
465 background-color: #fff;
466 z-index: 9999999 !important;
467 box-shadow: 0 0 30px rgba(0,0,0,0.15);
468
469 *{
470 float: none;
471 margin: 0;
472 padding: 0;
473 font-family: inherit;
474 font-weight: normal;
475 font-style: normal;
476 text-decoration: none;
477 border: 0;
478 border-radius: 0;
479 box-shadow: none;
480 }
481
482 .ui-widget-header,
483 .ui-datepicker-header{
484 color: #fff;
485 background: #00a0d2;
486 }
487
488 .ui-datepicker-header .ui-state-hover{
489 cursor: pointer;
490 }
491
492 .ui-datepicker-title{
493 font-size: 14px;
494 line-height: 40px;
495 text-align: center;
496 }
497
498 .ui-datepicker-prev,
499 .ui-datepicker-next{
500 position: static;
501 top: auto;
502 left: auto;
503 right: auto;
504 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
505 font-weight: 900;
506 font-size: 12px;
507 text-align: center;
508 width: 41px;
509 height: 40px;
510 line-height: 40px;
511 color: #fff;
512 background-color: rgba(white, 0.1);
513 text-rendering: auto;
514 -webkit-font-smoothing: antialiased;
515 -moz-osx-font-smoothing: grayscale;
516 }
517
518 .ui-datepicker-next span,
519 .ui-datepicker-prev span{
520 display: none;
521 }
522
523 .ui-datepicker-prev{
524 float: left;
525 }
526
527 .ui-datepicker-next{
528 float: right;
529 }
530
531 .ui-datepicker-prev:before{
532 content: '\f053';
533 }
534
535 .ui-datepicker-next:before{
536 content: '\f054';
537 }
538
539 .ui-datepicker-prev-hover,
540 .ui-datepicker-next-hover{
541 opacity: 0.75;
542 }
543
544 tbody .ui-datepicker-week-col{
545 background-color: #f7f7f7;
546 }
547
548 .ui-datepicker-buttonpane{
549 padding: 10px;
550 text-align: center;
551 background-color: #f7f7f7;
552 }
553
554 .ui-datepicker-buttonpane button{
555 cursor: pointer;
556 margin: 0 5px;
557 padding: 7px 14px;
558 border: 1px solid #eee;
559 background-color: #fff;
560 }
561
562 select{
563 margin: 0 4px;
564 }
565
566 select option{
567 color: #555;
568 }
569
570 table{
571 font-size: 13px;
572 border-collapse: collapse;
573 width: 100%;
574 }
575
576 thead{
577 color: #fff;
578 background: #32373c;
579 }
580
581 th{
582 text-align: center;
583 padding: 7px;
584 border: 1px solid #444;
585 }
586
587 td{
588 text-align: center;
589 border: 1px solid #f4f4f4;
590 }
591
592 td.ui-datepicker-other-month{
593 border: transparent;
594 }
595
596 td .ui-state-default{
597 color: #555;
598 width: auto;
599 display: block;
600 padding: 6px 12px;
601 }
602
603 td .ui-state-active,
604 td .ui-state-hover{
605 color: #fff;
606 background-color: #0073aa;
607 }
608
609 td.ui-state-disabled .ui-state-default{
610 opacity: 0.5;
611 }
612 }
613
614 /**
615 * 03. 13. Field: gallery
616 */
617 .adminify-field-gallery{
618
619 input{
620 display: none;
621 }
622
623 ul{
624 margin: 0;
625 padding: 0;
626 list-style-type: none;
627
628 li{
629 display: inline-block;
630 position: relative;
631 padding: 4px;
632 margin: 0 5px 10px 0;
633 border: 1px solid #ccc;
634 background-color: #f9f9f9;
635 border-radius: 2px;
636 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
637
638 img{
639 max-height: 60px;
640 display: inline-block;
641 vertical-align: middle;
642 }
643 }
644 }
645
646 .button{
647 margin-right: 5px;
648 margin-bottom: 5px;
649 }
650 }
651
652 /**
653 * 03. 14. Field: group
654 */
655 .adminify-field-group{
656
657 .adminify-cloneable-hidden{
658 display: none !important;
659 }
660
661 .adminify-cloneable-wrapper{
662 position: relative;
663 }
664
665 .adminify-cloneable-item{
666 display: none;
667 position: relative;
668 margin-bottom: 5px;
669
670 h4{
671 font-size: 1em;
672 }
673 }
674
675 .ui-accordion .adminify-cloneable-item{
676 display: block;
677 }
678
679 .adminify-cloneable-content{
680 border: 1px solid #ccd0d4;
681 background-color: #fff;
682 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
683
684 > .adminify-field{
685 padding: 15px;
686 }
687 }
688
689 .adminify-cloneable-title{
690 display: block;
691 cursor: pointer;
692 position: relative;
693 user-select: none;
694 margin: 0;
695 padding: 15px 65px 15px 10px;
696 min-height: 0;
697 font-size: 100%;
698 border: 1px solid #ccd0d4;
699 background-color: #fafafa;
700 box-shadow: 0 1px 1px rgba(0,0,0,.04);
701 transition: border-color .15s;
702
703 &:active,
704 &:hover,
705 &:focus{
706 border-color: #999;
707 outline: none;
708 }
709 }
710
711 .adminify-cloneable-helper{
712 position: absolute;
713 top: 12px;
714 right: 10px;
715 z-index: 1;
716 font-size: 14px;
717 line-height: 1em;
718
719 i{
720 display: inline-block;
721 cursor: pointer;
722 padding: 5px;
723 color: #999;
724
725 &:hover{
726 color: #555;
727 }
728 }
729 }
730
731 .adminify-cloneable-content{
732 padding: 0;
733 border-top: 0;
734 }
735
736 .adminify-cloneable-title-prefix,
737 .adminify-cloneable-title-number{
738 margin-right: 5px;
739 }
740
741 .adminify-cloneable-alert{
742 display: none;
743 margin-bottom: 5px;
744 padding: 10px 20px;
745 color: #a94442;
746 border: 1px solid #ebccd1;
747 background-color: #f2dede;
748 }
749
750 .widget-placeholder{
751 margin-bottom: 10px;
752 border: 1px dashed #f1c40f;
753 background-color: #fffae4;
754 }
755
756 .adminify-cloneable-header-icon{
757 display: inline-block;
758 text-align: center;
759 font-size: 14px;
760 width: 17px;
761 text-indent: 0;
762 vertical-align: text-top;
763 }
764
765 .adminify-cloneable-placeholder{
766 background-color: #ddd;
767 margin-top: 4px;
768 width: 100px;
769 height: 10px;
770 font-size: 10px;
771 line-height: 10px;
772 display: inline-block;
773 vertical-align: top;
774 border-radius: 2px;
775 }
776 }
777
778 /**
779 * 03. 15. Field: icon
780 */
781 .adminify-field-icon{
782
783 input{
784 display: none;
785 }
786
787 .button{
788 margin-right: 5px;
789 }
790
791 .adminify-icon-preview{
792
793 i{
794 display: inline-block;
795 font-size: 16px;
796 width: 30px;
797 height: 28px;
798 line-height: 28px;
799 margin-right: 5px;
800 text-align: center;
801 vertical-align: top;
802 color: #555;
803 border: 1px solid #ccc;
804 background-color: #f7f7f7;
805 border-radius: 3px;
806 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
807 }
808 }
809 }
810
811 /**
812 * 03. 16. Field: image_select
813 */
814 .adminify-field-image_select{
815
816 .adminify--image{
817 display: inline-block;
818 margin: 0 5px 5px 0;
819 }
820
821 .adminify--inline-list .adminify--image{
822 display: block;
823 }
824
825 figure{
826 cursor: pointer;
827 position: relative;
828 display: inline-block;
829 max-width: 100%;
830 margin: 0;
831 vertical-align: bottom;
832 border: 2px solid transparent;
833 background-color: #fff;
834 user-select: none;
835 transition: all .2s;
836
837 &:before{
838 position: absolute;
839 top: 0;
840 left: 0;
841 text-align: center;
842 font-size: 10px;
843 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
844 font-weight: 900;
845 content: "\f00c";
846 width: 16px;
847 height: 16px;
848 line-height: 14px;
849 opacity: 0;
850 color: #fff;
851 background-color: #222;
852 transition: opacity .2s;
853 }
854 }
855
856 .adminify--active figure{
857 border-color: #222;
858 box-shadow: 0 0 20px rgba(0,0,0,0.2);
859
860 &:before{
861 opacity: 1;
862 }
863 }
864
865 img{
866 max-width: 100%;
867 height: auto;
868 vertical-align: top;
869 }
870
871 input{
872 display: none;
873 }
874 }
875
876 /**
877 * 03. 17. Field: link_color
878 */
879 .adminify-field-link_color{
880
881 .adminify--left{
882 float: left;
883 margin-right: 10px;
884 margin-bottom: 5px;
885 }
886
887 .adminify--title{
888 color: #777;
889 margin-bottom: 5px;
890 }
891 }
892
893 /**
894 * 03. 18. Field: map
895 */
896 .adminify-field-map{
897
898 input{
899 width: 100%;
900 }
901
902 input[type="text"]="text""].ui-autocomplete-loading{
903 background-position-x: calc(100% - 5px);
904 }
905
906 .adminify--map-search + .adminify--map-osm-wrap{
907 margin-top: 10px;
908 }
909
910 .adminify--map-osm-wrap{
911 position: relative;
912 padding: 5px;
913 border: 1px solid #eee;
914 background-color: #fff;
915 box-shadow: 0 1px 1px rgba(0,0,0,.04);
916 }
917
918 .adminify--map-osm{
919 position: relative;
920 z-index: 1;
921 min-height: 250px;
922 }
923
924 .adminify--map-inputs{
925 margin-top: 10px;
926 display: flex;
927 justify-content: space-between;
928 }
929
930 .adminify--map-input{
931 flex: 1;
932
933 &:last-child{
934 padding-left: 10px;
935 }
936 }
937
938 label{
939 display: block;
940 color: #777;
941 font-size: 12px;
942 margin: 0 0 2px 0;
943 }
944 }
945
946 .adminify-map-ui-autocomplate{
947 z-index: 999999;
948 border-radius: 4px;
949 overflow: hidden;
950 }
951
952
953 /**
954 * 03. 19. Field: media
955 */
956 .adminify-field-media{
957
958 .adminify--placeholder{
959 display: flex;
960 align-items: flex-start;
961
962 input{
963 width: 100%;
964 margin: 0;
965 }
966 }
967
968 .button{
969 margin-left: 5px;
970 }
971
972 .hidden + .button{
973 margin-left: 0;
974 }
975
976 .adminify--preview{
977 position: relative;
978 }
979 }
980
981 /**
982 * 03. 20. Field: palette
983 */
984 .adminify-field-palette{
985
986 .adminify--palette{
987 position: relative;
988 display: inline-block;
989 cursor: pointer;
990 border: 2px solid #ddd;
991 margin-right: 10px;
992 margin-bottom: 10px;
993 user-select: none;
994 -webkit-user-select: none;
995 transition: all .2s;
996
997 span{
998 vertical-align: middle;
999 display: inline-block;
1000 width: 22px;
1001 height: 60px;
1002 line-height: 60px;
1003 overflow: hidden;
1004 text-indent: -999px;
1005 }
1006
1007 &:before{
1008 position: absolute;
1009 top: 0;
1010 left: 0;
1011 text-align: center;
1012 font-size: 10px;
1013 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1014 font-weight: 900;
1015 content: "\f00c";
1016 width: 16px;
1017 height: 16px;
1018 line-height: 14px;
1019 opacity: 0;
1020 color: #fff;
1021 background-color: #222;
1022 transition: opacity .2s;
1023 }
1024 }
1025
1026 .adminify--active{
1027 border-color: #222;
1028 box-shadow: 0 0 20px rgba(0,0,0,0.2);
1029
1030 &:before{
1031 opacity: 1;
1032 }
1033 }
1034
1035 input{
1036 display: none;
1037 }
1038 }
1039
1040 /**
1041 * 03. 21. Field: repeater
1042 */
1043 .adminify-field-repeater{
1044
1045 .adminify-field-text input{
1046 width: 100%;
1047 }
1048
1049 .adminify-repeater-hidden{
1050 display: none !important;
1051 }
1052
1053 .adminify-repeater-wrapper{
1054
1055 .adminify-repeater-item{
1056 display: table;
1057 width: 100%;
1058 margin-bottom: 5px;
1059 border: 1px solid #eee;
1060
1061 h4{
1062 font-size: 1em;
1063 }
1064 }
1065 }
1066
1067 .adminify-repeater-content{
1068 width: 100%;
1069 display: table-cell;
1070 vertical-align: middle;
1071 background-color: #fff;
1072
1073 > .adminify-field{
1074 padding: 15px;
1075 }
1076 }
1077
1078 .adminify-repeater-helper{
1079 width: 100%;
1080 display: table-cell;
1081 vertical-align: middle;
1082 text-align: center;
1083 font-size: 14px;
1084 line-height: 1em;
1085 border-left: 1px solid #eee;
1086 background-color: #f7f7f7;
1087
1088 i{
1089 display: inline-block;
1090 cursor: pointer;
1091 color: #999;
1092 padding: 5px;
1093
1094 &:hover{
1095 color: #555;
1096 }
1097 }
1098 }
1099
1100 .adminify-repeater-helper-inner{
1101 width: 75px;
1102 }
1103
1104 .adminify-repeater-alert{
1105 display: none;
1106 margin-bottom: 5px;
1107 padding: 10px 20px;
1108 color: #a94442;
1109 border: 1px solid #ebccd1;
1110 background-color: #f2dede;
1111 }
1112
1113 .widget-placeholder{
1114 height: 50px;
1115 margin-bottom: 3px;
1116 border: 1px dashed #f1c40f;
1117 background-color: #fffae4;
1118 }
1119
1120 .ui-sortable-helper{
1121 height: 50px !important;
1122 overflow: hidden !important;
1123 border-color: #ccc !important;
1124 background-color: #eee !important;
1125 opacity: 0.5;
1126
1127 .adminify-repeater-helper,
1128 .adminify-repeater-content{
1129 display: none;
1130 }
1131 }
1132 }
1133
1134 /**
1135 * 03. 22. Field: select
1136 */
1137 .adminify-field-select{
1138
1139 .adminify-fieldset{
1140 min-height: 30px;
1141 }
1142
1143 .adminify-chosen{
1144 display: none;
1145 }
1146
1147 select{
1148 max-width: 100%;
1149 margin: 0;
1150 }
1151 }
1152
1153 /**
1154 * 03. 23. Field: slider
1155 */
1156 .adminify-field-slider{
1157
1158 .adminify--wrap{
1159 display: flex;
1160 align-items: center;
1161 }
1162
1163 .adminify--input{
1164 display: flex;
1165 }
1166
1167 .adminify--unit{
1168 display: flex;
1169 justify-content: center;
1170 flex-direction: column;
1171 user-select: none;
1172 padding: 0 6px;
1173 font-size: 11px;
1174 line-height: 1;
1175 border-radius: 0 4px 4px 0;
1176 color: #555;
1177 border: 1px solid #7e8993;
1178 border-left: 0;
1179 background-color: #f5f5f5;
1180 }
1181
1182 .adminify-slider-ui{
1183 margin-right: 15px;
1184 }
1185
1186 input[type=number]=number]{
1187 position: relative;
1188 z-index: 1;
1189 margin: 0;
1190 width: 50px;
1191 text-align: center;
1192 }
1193
1194 .adminify--is-unit{
1195 border-top-right-radius: 0;
1196 border-bottom-right-radius: 0;
1197 }
1198
1199 .ui-slider{
1200 position: relative;
1201 width: 100%;
1202 height: 3px;
1203 border: none;
1204 background: #ddd;
1205 border-radius: 2px;
1206 }
1207
1208 .ui-slider-range{
1209 height: 3px;
1210 border: none;
1211 background: #333;
1212 border-radius: 2px;
1213 }
1214
1215 .ui-slider-handle{
1216 position: absolute;
1217 width: 16px;
1218 height: 16px;
1219 top: -7px;
1220 margin-left: -8px;
1221 border: none;
1222 background: #333;
1223 border-radius: 2px;
1224 }
1225
1226 .ui-state-active,
1227 .ui-slider-handle:hover{
1228 cursor: pointer;
1229 background: #111;
1230 }
1231 }
1232
1233 /**
1234 * 03. 24. Field: sortable
1235 */
1236 .adminify-field-sortable{
1237
1238 .adminify-field-text{
1239
1240 input{
1241 width: 100%;
1242 max-width: 100%;
1243 }
1244 }
1245
1246 .adminify-sortable{
1247
1248 .adminify-sortable-item{
1249 display: table;
1250 width: 100%;
1251 margin-bottom: 5px;
1252 border: 1px solid #eee;
1253
1254 h4{
1255 font-size: 1em;
1256 }
1257 }
1258 }
1259
1260 .adminify-sortable-content{
1261 width: 100%;
1262 display: table-cell;
1263 vertical-align: middle;
1264 background-color: #fff;
1265
1266 > .adminify-field{
1267 padding: 15px;
1268 }
1269 }
1270
1271 .adminify-sortable-helper{
1272 width: 100%;
1273 display: table-cell;
1274 vertical-align: middle;
1275 text-align: center;
1276 font-size: 14px;
1277 line-height: 1em;
1278 border-left: 1px solid #eee;
1279 background-color: #f7f7f7;
1280
1281 i{
1282 display: inline-block;
1283 cursor: pointer;
1284 width: 50px;
1285 color: #555;
1286
1287 &:hover{
1288 opacity: 0.5;
1289 }
1290 }
1291 }
1292
1293 .widget-placeholder{
1294 height: 50px;
1295 margin-bottom: 3px;
1296 border: 1px dashed #f1c40f;
1297 background-color: #fffae4;
1298 }
1299
1300 .ui-sortable-helper{
1301 height: 50px !important;
1302 overflow: hidden !important;
1303 border-color: #ccc !important;
1304 background-color: #eee !important;
1305 opacity: 0.5;
1306
1307 .adminify-sortable-helper,
1308 .adminify-sortable-content{
1309 display: none;
1310 }
1311 }
1312 }
1313
1314 /**
1315 * 03. 25. Field: sorter
1316 */
1317 .adminify-field-sorter{
1318
1319 .ui-sortable-placeholder{
1320 height: 20px;
1321 border: 1px dashed #f1c40f;
1322 background-color: #fffae4;
1323 }
1324
1325 .adminify-modules{
1326 float: left;
1327 width: 50%;
1328 box-sizing: border-box;
1329
1330 &:first-child{
1331 padding-right: 15px;
1332 }
1333
1334 &:last-child{
1335 padding-left: 15px;
1336 }
1337 }
1338
1339 .adminify-disabled,
1340 .adminify-enabled{
1341 padding: 5px 15px;
1342 border: 1px dashed #ddd;
1343 background-color: #fff;
1344 }
1345
1346 .adminify-disabled{
1347 li{
1348 opacity: 0.5;
1349 transition: opacity .15s;
1350 }
1351
1352 .ui-sortable-helper{
1353 opacity: 1;
1354 }
1355 }
1356
1357 .adminify-sorter-title{
1358 font-size: 13px;
1359 font-weight: 600;
1360 padding: 10px;
1361 text-align: center;
1362 border: 1px dashed #ddd;
1363 border-bottom: none;
1364 background-color: #f8f8f8;
1365 text-transform: uppercase;
1366 }
1367
1368 ul{
1369 list-style-type: none;
1370 margin: 0;
1371 padding: 0;
1372 min-height: 62px;
1373
1374 li{
1375 margin: 10px 0;
1376 padding: 10px 15px;
1377 cursor: move;
1378 font-weight: bold;
1379 text-align: center;
1380 border: 1px solid #e5e5e5;
1381 background-color: #fafafa;
1382 transition: border-color .15s;
1383
1384 &:hover{
1385 border-color: #bbb;
1386 }
1387 }
1388 }
1389 }
1390
1391 /**
1392 * 03. 26. Field: spinner
1393 */
1394 .adminify-field-spinner{
1395
1396 .adminify--spin{
1397 display: flex;
1398 }
1399
1400 .ui-spinner{
1401 display: flex;
1402 }
1403
1404 .ui-button{
1405 display: flex;
1406 flex-direction: column;
1407 justify-content: center;
1408 text-align: center;
1409 min-width: 20px;
1410 padding: 0 4px;
1411 color: #555;
1412 border: 1px solid #7e8993;
1413 background-color: #f5f5f5;
1414 }
1415
1416 .ui-spinner-button{
1417 cursor: pointer;
1418
1419 &:hover{
1420 background-color: #e7e7e7;
1421 }
1422
1423 &:active{
1424 background-color: #ddd;
1425 }
1426
1427 &:before{
1428 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1429 font-weight: 900;
1430 font-size: 14px;
1431 line-height: 14px;
1432 }
1433 }
1434
1435 .ui-spinner-down{
1436 order: 1;
1437 border-right: 0;
1438 border-radius: 4px 0 0 4px;
1439
1440 &:before{
1441 content: "\f0d9";
1442 }
1443 }
1444
1445 .ui-spinner-input{
1446 order: 2;
1447 }
1448
1449 .adminify--unit{
1450 order: 3;
1451 border-left: 0;
1452 user-select: none;
1453 }
1454
1455 .ui-spinner-up{
1456 order: 4;
1457 border-left: 0;
1458 border-radius: 0 4px 4px 0;
1459
1460 &:before{
1461 content: "\f0da";
1462 }
1463 }
1464
1465 input{
1466 position: relative;
1467 z-index: 1;
1468 width: 50px;
1469 text-align: center;
1470 margin: 0;
1471 padding: 0 8px;
1472 border-radius: 0;
1473 }
1474
1475 .ui-button-text,
1476 .ui-button-icon,
1477 .ui-button-icon-space{
1478 display: none;
1479 }
1480 }
1481
1482 /**
1483 * 03. 27. Field: switcher
1484 */
1485 .adminify-field-switcher{
1486
1487 .adminify--switcher{
1488 float: left;
1489 cursor: pointer;
1490 position: relative;
1491 width: 60px;
1492 height: 26px;
1493 padding: 0;
1494 margin: 0;
1495 overflow: hidden;
1496 border-radius: 4px;
1497 background-color: #ed6f6f;
1498 user-select: none;
1499 -webkit-user-select: none;
1500 }
1501
1502 .adminify--ball{
1503 position: absolute;
1504 top: 4px;
1505 left: 4px;
1506 width: 24px;
1507 height: 18px;
1508 background-color: #fff;
1509 border-radius: 4px;
1510 transition: all .1s;
1511 box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
1512 }
1513
1514 .adminify--on,
1515 .adminify--off{
1516 position: absolute;
1517 top: 0;
1518 left: 0;
1519 right: 0;
1520 font-size: 11px;
1521 line-height: 26px;
1522 font-weight: 500;
1523 font-style: normal;
1524 text-align: center;
1525 text-transform: uppercase;
1526 color: #fff;
1527 padding-right: 28px;
1528 opacity: 0;
1529 transition: all .1s;
1530 }
1531
1532 .adminify--off{
1533 padding-right: 0;
1534 padding-left: 28px;
1535 opacity: 1;
1536 }
1537
1538 .adminify--active{
1539 background: #4fb845;
1540
1541 .adminify--on{
1542 opacity: 1;
1543 }
1544
1545 .adminify--off{
1546 opacity: 0;
1547 }
1548
1549 .adminify--ball{
1550 left: 100%;
1551 margin-left: -28px;
1552 }
1553 }
1554
1555 .adminify--label{
1556 float: left;
1557 margin-top: 4px;
1558 margin-left: 8px;
1559 font-weight: 400;
1560 color: #999;
1561 }
1562
1563 input{
1564 display: none;
1565 }
1566 }
1567
1568 /**
1569 * 03. 28. Field: tabbed
1570 */
1571 .adminify-field-tabbed{
1572
1573 .adminify-tabbed-content{
1574 border: 1px solid #ccd0d4;
1575 background-color: #fff;
1576 box-shadow: 0 1px 1px rgba(0,0,0,.04);
1577
1578 > .adminify-field{
1579 padding: 15px;
1580 }
1581 }
1582
1583 .adminify-tabbed-nav{
1584
1585 .adminify--icon{
1586 padding-right: 5px;
1587 }
1588
1589 a{
1590 display: inline-block;
1591 padding: 12px 15px;
1592 margin-top: 1px;
1593 margin-right: 5px;
1594 margin-bottom: -1px;
1595 position: relative;
1596 text-decoration: none;
1597 color: #444;
1598 font-weight: 600;
1599 border: 1px solid #ccd0d4;
1600 background-color: #f3f3f3;
1601 transition: all .2s;
1602
1603 &:hover{
1604 background-color: #f9f9f9;
1605 }
1606
1607 &.adminify-tabbed-active{
1608 background-color: #fff;
1609 border-bottom-color: #fff;
1610 }
1611
1612 &:focus{
1613 outline: none;
1614 box-shadow: none;
1615 }
1616 }
1617 }
1618 }
1619
1620 /**
1621 * 03. 29. Field: text
1622 */
1623 .adminify-field-text{
1624
1625 input{
1626 width: 50%;
1627 max-width: 100%;
1628 margin: 0;
1629 }
1630 }
1631
1632 /**
1633 * 03. 30. Field: textarea
1634 */
1635 .adminify-field-textarea{
1636
1637 textarea{
1638 width: 100%;
1639 max-width: 100%;
1640 min-height: 125px;
1641 }
1642
1643 .adminify-shortcode-button{
1644 margin-bottom: 10px;
1645 margin-right: 5px;
1646 }
1647 }
1648
1649 /**
1650 * 03. 31. Field: typography
1651 */
1652 .adminify-field-typography{
1653
1654 textarea,
1655 select{
1656 margin: 0;
1657 min-width: 100%;
1658 max-width: 100%;
1659 }
1660
1661 .adminify--title{
1662 color: #777;
1663 margin: 0 0 2px 0;
1664 font-size: 12px;
1665
1666 small{
1667 vertical-align: top;
1668 }
1669 }
1670
1671 .adminify--blocks{
1672 display: flex;
1673 flex-wrap: wrap;
1674 }
1675
1676 .adminify--block{
1677 flex: 1;
1678 max-width: 100%;
1679 padding-right: 6px;
1680 padding-bottom: 6px;
1681 }
1682
1683 .adminify--input{
1684 margin: 0;
1685 min-width: 100%;
1686 }
1687
1688 .adminify--input-wrap{
1689 position: relative;
1690 }
1691
1692 .adminify--unit{
1693 position: absolute;
1694 z-index: 1;
1695 right: 4px;
1696 top: 4px;
1697 bottom: 4px;
1698 padding: 2px 6px;
1699 color: #666;
1700 font-size: 11px;
1701 line-height: 1;
1702 border-radius: 2px;
1703 background: #eee;
1704 user-select: none;
1705 display: flex;
1706 justify-content: center;
1707 flex-direction: column;
1708 }
1709
1710 .adminify--preview{
1711 font-size: 16px;
1712 line-height: 20px;
1713 padding: 20px;
1714 color: #222;
1715 border: 1px solid #eee;
1716 background-color: #fff;
1717 border-radius: 2.5px;
1718 user-select: none;
1719 -webkit-user-select: none;
1720 transition: background-color .2s, border-color .2s;
1721 }
1722
1723 .adminify--block-preview{
1724 cursor: pointer;
1725 position: relative;
1726 overflow: hidden;
1727 margin-top: 10px;
1728 max-width: 100%;
1729 }
1730
1731 .adminify--black-background{
1732 border-color: #000;
1733 background-color: #000;
1734 }
1735
1736 .adminify--toggle{
1737 position: absolute;
1738 top: 5px;
1739 right: 10px;
1740 color: #999;
1741 }
1742
1743 .adminify--block-extra-styles{
1744 margin-top: 5px;
1745 }
1746 }
1747
1748 /**
1749 * 03. 32. Field: upload
1750 */
1751 .adminify-field-upload{
1752
1753 input{
1754 width: 100%;
1755 margin: 0;
1756 }
1757
1758 .adminify--wrap{
1759 display: flex;
1760 align-items: flex-start;
1761 }
1762
1763 .button{
1764 margin-left: 5px;
1765 }
1766
1767 .adminify--preview{
1768 position: relative;
1769 }
1770 }
1771
1772 /**
1773 * 03. 33. Field: wp_editor
1774 */
1775 .adminify-field-wp_editor{
1776
1777 .adminify-wp-editor{
1778 float: left;
1779 width: 100%;
1780 }
1781
1782 .mce-toolbar-grp{
1783 border: none;
1784 }
1785
1786 .mce-btn.mce-active button,
1787 .mce-btn.mce-active:hover button,
1788 .mce-btn.mce-active i,
1789 .mce-btn.mce-active:hover i{
1790 color: #23282d;
1791 }
1792
1793 .wp-media-buttons{
1794 position: relative;
1795 z-index: 2;
1796 }
1797
1798
1799 .wp-editor-tabs{
1800 position: relative;
1801 z-index: 1;
1802 }
1803
1804 .adminify-no-tinymce{
1805 border: 1px solid #e5e5e5;
1806 }
1807
1808 .adminify-no-quicktags{
1809
1810 .wp-media-buttons{
1811 float: none;
1812 display: block;
1813 }
1814
1815 .mce-tinymce{
1816 box-shadow: none;
1817 border: 1px solid #e5e5e5;
1818 }
1819 }
1820
1821 textarea{
1822 width: 100%;
1823 max-width: 100%;
1824 margin: 0;
1825 box-shadow: none;
1826 }
1827 }
1828
1829 /**
1830 * 03. 34. Field: heading
1831 */
1832 .adminify-field-heading{
1833 font-size: 1.5em;
1834 font-weight: bold;
1835 color: #23282d;
1836 background-color: #f5f5f5;
1837 }
1838
1839 /**
1840 * 03. 35. Field: subheading
1841 */
1842 .adminify-field-subheading{
1843 font-size: 14px;
1844 font-weight: bold;
1845 padding-top: 17px;
1846 padding-bottom: 17px;
1847 color: #23282d;
1848 background-color: #f7f7f7;
1849 }
1850
1851 /**
1852 * 03. 36. Field: submessage
1853 */
1854 .adminify-field-submessage{
1855 padding: 0 !important;
1856 border: 0 !important;
1857
1858 + .adminify-field{
1859 border-top: 0 !important;
1860 }
1861 }
1862
1863 .adminify-submessage{
1864 font-size: 12px;
1865 padding: 17px 30px;
1866 border-top: 1px solid transparent;
1867 border-bottom: 1px solid transparent;
1868 }
1869
1870 .adminify-submessage-success{
1871 color: #3c763d;
1872 border-color: #d6e9c6;
1873 background-color: #dff0d8;
1874 }
1875
1876 .adminify-submessage-info{
1877 color: #31708f;
1878 border-color: #bce8f1;
1879 background-color: #d9edf7;
1880 }
1881
1882 .adminify-submessage-warning{
1883 color: #8a6d3b;
1884 border-color: #faebcc;
1885 background-color: #fcf8e3;
1886 }
1887
1888 .adminify-submessage-danger{
1889 color: #a94442;
1890 border-color: #ebccd1;
1891 background-color: #f2dede;
1892 }
1893
1894 .adminify-submessage-normal{
1895 color: #23282d;
1896 border-color: #eee;
1897 background-color: #f7f7f7;
1898 }
1899
1900 /**
1901 * 03. 37. Field: notice
1902 */
1903 .adminify-field-notice{
1904 background-color: #f7f7f7;
1905 }
1906
1907 .adminify-notice{
1908 padding: 12px;
1909 background-color: #fff;
1910 border-left-style: solid;
1911 border-left-width: 4px;
1912 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
1913 }
1914
1915 .adminify-notice-success{
1916 border-color: #46b450;
1917 }
1918
1919 .adminify-notice-info{
1920 border-color: #339fd4;
1921 }
1922
1923 .adminify-notice-warning{
1924 border-color: #ffbc00;
1925 }
1926
1927 .adminify-notice-danger{
1928 border-color: #dc3232;
1929 }
1930
1931 .adminify-notice-normal{
1932 border-color: #222;
1933 }
1934
1935 /**
1936 * 03. 38. Field: number
1937 */
1938 .adminify-field-number{
1939
1940 input{
1941 width: 100%;
1942 margin: 0;
1943 }
1944
1945 .adminify--wrap{
1946 position: relative;
1947 float: left;
1948 width: 100px;
1949 }
1950
1951 .adminify--unit{
1952 position: absolute;
1953 z-index: 1;
1954 right: 4px;
1955 top: 4px;
1956 bottom: 4px;
1957 padding: 2px 6px;
1958 color: #666;
1959 font-size: 11px;
1960 line-height: 1;
1961 border-radius: 2px;
1962 background: #eee;
1963 user-select: none;
1964 display: flex;
1965 justify-content: center;
1966 flex-direction: column;
1967 }
1968 }
1969
1970 /**
1971 * 03. 39. Field: link
1972 */
1973 .adminify-field-link{
1974
1975 input{
1976 display: none;
1977 }
1978
1979 .adminify--result{
1980 display: inline-block;
1981 font-size: 12px;
1982 line-height: 16px;
1983 padding: 7px 10px;
1984 margin-bottom: 7px;
1985 color: #777;
1986 border: 1px solid #e5e5e5;
1987 background-color: #f5f5f5;
1988 border-radius: 2px;
1989 world-break: break-word;
1990 }
1991
1992 .adminify--wrap{
1993 position: relative;
1994 float: left;
1995 width: 100px;
1996 }
1997
1998 .adminify--unit{
1999 position: absolute;
2000 z-index: 1;
2001 right: 4px;
2002 top: 4px;
2003 bottom: 4px;
2004 padding: 2px 6px;
2005 color: #666;
2006 font-size: 11px;
2007 line-height: 1;
2008 border-radius: 2px;
2009 background: #eee;
2010 user-select: none;
2011 display: flex;
2012 justify-content: center;
2013 flex-direction: column;
2014 }
2015 }
2016
2017 /**
2018 * 03. 40. others
2019 */
2020 .adminify-help{
2021 cursor: help;
2022 position: absolute;
2023 top: 0;
2024 right: 0;
2025 padding: 5px;
2026 font-size: 13px;
2027 color: #aaa;
2028
2029 .adminify-help-text{
2030 display: none;
2031 }
2032 }
2033
2034 .adminify--preview{
2035 max-width: 100%;
2036 }
2037
2038 .adminify-image-preview{
2039 display: inline-flex;
2040 align-items: center;
2041 justify-content: center;
2042 flex-direction: column;
2043 position: relative;
2044 padding: 6px;
2045 max-width: 120px;
2046 max-height: 120px;
2047 min-width: 40px;
2048 min-height: 40px;
2049 margin-bottom: 10px;
2050 text-align: center;
2051 border-radius: 2px;
2052 border: 1px solid #ccc;
2053 background-color: #f9f9f9;
2054 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
2055
2056 a{
2057 position: absolute;
2058 z-index: 1;
2059 right: 4px;
2060 top: 4px;
2061 font-size: 14px;
2062 width: 22px;
2063 height: 22px;
2064 line-height: 22px;
2065 text-align: center;
2066 text-decoration: none;
2067 color: #fff;
2068 background-color: #dd3333;
2069 opacity: 0.75;
2070 border-radius: 2px;
2071 transition: all .2s;
2072
2073 &:hover{
2074 opacity: 1;
2075 }
2076
2077 &:focus{
2078 box-shadow: none;
2079 }
2080 }
2081
2082 span{
2083 position: relative;
2084 overflow: hidden;
2085 display: flex;
2086 height: 100%;
2087 width: 100%;
2088 }
2089
2090 img{
2091 max-width: 100%;
2092 height: auto;
2093 object-fit: contain;
2094 }
2095 }
2096
2097 .adminify-field-custom{
2098
2099 .adminify-field{
2100 padding: 0;
2101 }
2102 }
2103
2104 .adminify-field{
2105
2106 .chosen-container-single .chosen-single{
2107 height: 28px;
2108 line-height: 26px;
2109 }
2110
2111 .chosen-container-single .chosen-single abbr{
2112 top: 0;
2113 right: 20px;
2114 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2115 font-weight: 900;
2116 font-size: 12px;
2117 height: 100%;
2118 width: 18px;
2119 color: #aaa;
2120 text-align: center;
2121 background: none;
2122
2123 &:before{
2124 content: "\f00d";
2125 }
2126
2127 &:hover{
2128 color: #555;
2129 }
2130 }
2131
2132 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close{
2133 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2134 font-weight: 900;
2135 font-size: 12px;
2136 height: 100%;
2137 width: 18px;
2138 color: #aaa;
2139 text-align: center;
2140 background: none;
2141
2142 &:before{
2143 content: "\f00d";
2144 display: inline-block;
2145 padding-top: 3px;
2146 }
2147
2148 &:hover{
2149 color: #555;
2150 }
2151 }
2152
2153 .chosen-container-single .chosen-single div b{
2154 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2155 font-weight: 900;
2156 font-size: 14px;
2157 color: #aaa;
2158 background: none;
2159
2160 &:before{
2161 content: "\f107";
2162 }
2163
2164 &:hover{
2165 color: #555;
2166 }
2167 }
2168
2169 .chosen-container-multi .chosen-choices li.search-choice-placeholder {
2170 border: 1px dashed #aaa;
2171 margin: 3px 5px 3px 0;
2172 }
2173
2174 .chosen-container-multi .ui-sortable li.search-choice span {
2175 cursor: move;
2176 }
2177
2178 .chosen-container-active.chosen-with-drop .chosen-single div b{
2179
2180 &:before{
2181 content: "\f106";
2182 }
2183 }
2184
2185 .chosen-container-single .chosen-single-with-deselect span{
2186 margin-right: 40px;
2187 }
2188
2189 .chosen-container-single .chosen-search input[type="text"]="text""]{
2190 background: none;
2191 }
2192
2193 .chosen-container-single .chosen-search{
2194
2195 &:before{
2196 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2197 font-weight: 900;
2198 font-size: 11px;
2199 content: "\f002";
2200 position: absolute;
2201 right: 12px;
2202 top: 10px;
2203 color: #aaa;
2204 }
2205 }
2206
2207 .wp-picker-container{
2208 display: inline-block;
2209
2210 .wp-color-result.button{
2211 margin-bottom: 0;
2212 }
2213 }
2214
2215 .adminify--transparent-wrap{
2216 display: none;
2217 position: relative;
2218 top: -1px;
2219 width: 235px;
2220 padding: 9px 10px;
2221 border: 1px solid #dfdfdf;
2222 border-top: none;
2223 background-color: #fff;
2224 }
2225
2226 .wp-picker-active .adminify--transparent-wrap{
2227 display: block;
2228 }
2229
2230 .adminify--transparent-slider{
2231 position: absolute;
2232 width: 190px;
2233 margin-left: 2px;
2234 height: 18px;
2235
2236 .ui-slider-handle{
2237 position: absolute;
2238 top: -3px;
2239 bottom: -3px;
2240 z-index: 5;
2241 border-color: #aaa;
2242 border-style: solid;
2243 border-width: 4px 3px;
2244 width: 10px;
2245 height: 16px;
2246 margin: 0 -5px;
2247 background: none;
2248 cursor: ew-resize;
2249 opacity: 0.9;
2250 border-radius: 4px;
2251 box-shadow: 0 1px 2px rgba(0,0,0,0.2);
2252
2253 &:before{
2254 content: " ";
2255 position: absolute;
2256 left: -2px;
2257 right: -2px;
2258 top: -3px;
2259 bottom: -3px;
2260 border: 2px solid #fff;
2261 border-radius: 3px;
2262 }
2263 }
2264 }
2265
2266 .adminify--transparent-offset{
2267 height: 18px;
2268 width: 200px;
2269 background: url(../images/checkerboard.png) repeat-y center left scroll #fff;
2270 border-radius: 2px;
2271 box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
2272 }
2273
2274 .adminify--transparent-text{
2275 position: absolute;
2276 top: 12px;
2277 right: 10px;
2278 width: 30px;
2279 font-size: 12px;
2280 line-height: 12px;
2281 text-align: center;
2282 color: #999;
2283 }
2284
2285 .adminify--transparent-button{
2286 cursor: pointer;
2287 user-select: none;
2288 margin-top: 10px;
2289 font-size: 11px;
2290 text-align: center;
2291 border-radius: 2px;
2292 padding: 3px 7px;
2293 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
2294 letter-spacing: 0.2px;
2295 color: #777;
2296 border: 1px solid #ccc;
2297 background-color: #f7f7f7;
2298 transition: background-color .2s, border-color .2s, color .2s;
2299 }
2300
2301 .adminify--transparent-active{
2302
2303 .wp-color-result{
2304 background-image: url(../images/checkerboard.png);
2305 background-size: 135px;
2306 background-position: center left;
2307 background-color: transparent !important;
2308 }
2309
2310 .adminify--transparent-button{
2311 color: #fff;
2312 border-color: #3ea032;
2313 background-color: #4fb845;
2314 }
2315
2316 .fa:before{
2317 content: "\f205";
2318 }
2319 }
2320 }
2321