PluginProbe
Adminify – White Label, Admin Menu Editor, Login Customizer / 3.2.1
Adminify – White Label, Admin Menu Editor, Login Customizer v3.2.1
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 / Libs / adminify-framework / assets / scss / partials / _fields.scss

_fields.scss in Adminify – White Label, Admin Menu Editor, Login Customizer 3.2.1, at Libs/adminify-framework/assets/scss/partials/_fields.scss

2,367 lines 37.1 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 !important;
256 border-bottom-left-radius: 0 !important;
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 !important;
266 border-bottom-right-radius: 0 !important;
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: datetime
616 */
617 .adminify-field-datetime{
618
619 input{
620 margin: 0;
621 }
622
623 .adminify--to{
624 margin-left: 7px;
625 }
626 }
627
628 .adminify-flatpickr{
629
630 select,
631 input{
632 min-height: auto;
633
634 &:focus{
635 box-shadow: none;
636 }
637 }
638
639 &.open{
640 z-index: 9999999 !important;
641 }
642 }
643
644 /**
645 * 03. 14. Field: gallery
646 */
647 .adminify-field-gallery{
648
649 ul{
650 margin: 0;
651 padding: 0;
652 list-style-type: none;
653
654 li{
655 display: inline-block;
656 position: relative;
657 padding: 4px;
658 margin: 0 5px 10px 0;
659 border: 1px solid #ccc;
660 background-color: #f9f9f9;
661 border-radius: 2px;
662 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
663
664 img{
665 max-height: 60px;
666 display: inline-block;
667 vertical-align: middle;
668 }
669 }
670 }
671
672 .button{
673 margin-right: 5px;
674 margin-bottom: 5px;
675 }
676 }
677
678 /**
679 * 03. 15. Field: group
680 */
681 .adminify-field-group{
682
683 .adminify-cloneable-hidden{
684 display: none !important;
685 }
686
687 .adminify-cloneable-wrapper{
688 position: relative;
689 }
690
691 .adminify-cloneable-item{
692 display: none;
693 position: relative;
694 margin-bottom: 5px;
695
696 h4{
697 font-size: 1em;
698 }
699 }
700
701 .ui-accordion .adminify-cloneable-item{
702 display: block;
703 }
704
705 .adminify-cloneable-content{
706 border: 1px solid #ccd0d4;
707 background-color: #fff;
708 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
709
710 > .adminify-field{
711 padding: 15px;
712 }
713 }
714
715 .adminify-cloneable-title{
716 display: block;
717 cursor: pointer;
718 position: relative;
719 user-select: none;
720 margin: 0;
721 padding: 15px 65px 15px 10px;
722 min-height: 0;
723 font-size: 100%;
724 border: 1px solid #ccd0d4;
725 background-color: #fafafa;
726 box-shadow: 0 1px 1px rgba(0,0,0,.04);
727 transition: border-color .15s;
728
729 &:active,
730 &:hover,
731 &:focus{
732 border-color: #999;
733 outline: none;
734 }
735 }
736
737 .adminify-cloneable-helper{
738 position: absolute;
739 top: 12px;
740 right: 10px;
741 z-index: 1;
742 font-size: 14px;
743 line-height: 1em;
744
745 i{
746 display: inline-block;
747 cursor: pointer;
748 padding: 5px;
749 color: #999;
750
751 &:hover{
752 color: #555;
753 }
754 }
755 }
756
757 .adminify-cloneable-content{
758 padding: 0;
759 border-top: 0;
760 }
761
762 .adminify-cloneable-title-prefix,
763 .adminify-cloneable-title-number{
764 margin-right: 5px;
765 }
766
767 .adminify-cloneable-alert{
768 display: none;
769 margin-bottom: 5px;
770 padding: 10px 20px;
771 color: #a94442;
772 border: 1px solid #ebccd1;
773 background-color: #f2dede;
774 }
775
776 .widget-placeholder{
777 margin-bottom: 10px;
778 border: 1px dashed #f1c40f;
779 background-color: #fffae4;
780 }
781
782 .adminify-cloneable-header-icon{
783 display: inline-block;
784 text-align: center;
785 font-size: 14px;
786 width: 17px;
787 text-indent: 0;
788 vertical-align: text-top;
789 }
790
791 .adminify-cloneable-placeholder{
792 background-color: #ddd;
793 margin-top: 4px;
794 width: 100px;
795 height: 10px;
796 font-size: 10px;
797 line-height: 10px;
798 display: inline-block;
799 vertical-align: top;
800 border-radius: 2px;
801 }
802 }
803
804 /**
805 * 03. 16. Field: icon
806 */
807 .adminify-field-icon{
808
809 .adminify-icon-select{
810 display: flex;
811 grid-gap: 5px;
812 }
813
814 .adminify-icon-preview:not(.hidden){
815 display: flex;
816 }
817
818 .adminify-icon-preview{
819
820 i{
821 display: flex;
822 justify-content: center;
823 align-items: center;
824 width: 30px;
825 font-size: 14px;
826 text-align: center;
827 vertical-align: top;
828 color: #555;
829 border: 1px solid #ccc;
830 background-color: #f7f7f7;
831 border-radius: 3px;
832 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
833 }
834 }
835 }
836
837 /**
838 * 03. 17. Field: image_select
839 */
840 .adminify-field-image_select{
841
842 .adminify--image{
843 display: inline-block;
844 margin: 0 5px 5px 0;
845 }
846
847 .adminify--inline-list .adminify--image{
848 display: block;
849 }
850
851 figure{
852 cursor: pointer;
853 position: relative;
854 display: inline-block;
855 max-width: 100%;
856 margin: 0;
857 vertical-align: bottom;
858 border: 2px solid transparent;
859 background-color: #fff;
860 user-select: none;
861 transition: all .2s;
862
863 &:before{
864 position: absolute;
865 top: 0;
866 left: 0;
867 text-align: center;
868 font-size: 10px;
869 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
870 font-weight: 900;
871 content: "\f00c";
872 width: 16px;
873 height: 16px;
874 line-height: 14px;
875 opacity: 0;
876 color: #fff;
877 background-color: #222;
878 transition: opacity .2s;
879 }
880 }
881
882 .adminify--active figure{
883 border-color: #222;
884 box-shadow: 0 0 20px rgba(0,0,0,0.2);
885
886 &:before{
887 opacity: 1;
888 }
889 }
890
891 img{
892 max-width: 100%;
893 height: auto;
894 vertical-align: top;
895 }
896
897 input{
898 display: none;
899 }
900 }
901
902 /**
903 * 03. 18. Field: link_color
904 */
905 .adminify-field-link_color{
906
907 .adminify--left{
908 float: left;
909 margin-right: 10px;
910 margin-bottom: 5px;
911 }
912
913 .adminify--title{
914 color: #777;
915 margin-bottom: 5px;
916 }
917 }
918
919 /**
920 * 03. 19. Field: map
921 */
922 .adminify-field-map{
923
924 input{
925 width: 100%;
926 }
927
928 input[type="text"]="text""].ui-autocomplete-loading{
929 background-position-x: calc(100% - 5px);
930 }
931
932 .adminify--map-search + .adminify--map-osm-wrap{
933 margin-top: 10px;
934 }
935
936 .adminify--map-osm-wrap{
937 position: relative;
938 padding: 5px;
939 border: 1px solid #eee;
940 background-color: #fff;
941 box-shadow: 0 1px 1px rgba(0,0,0,.04);
942 }
943
944 .adminify--map-osm{
945 position: relative;
946 z-index: 1;
947 min-height: 250px;
948 }
949
950 .adminify--map-inputs{
951 margin-top: 10px;
952 display: flex;
953 justify-content: space-between;
954 }
955
956 .adminify--map-input{
957 flex: 1;
958
959 &:last-child{
960 padding-left: 10px;
961 }
962 }
963
964 label{
965 display: block;
966 color: #777;
967 font-size: 12px;
968 margin: 0 0 2px 0;
969 }
970 }
971
972 .adminify-map-ui-autocomplate{
973 z-index: 999999;
974 border-radius: 4px;
975 overflow: hidden;
976 }
977
978
979 /**
980 * 03. 20. Field: media
981 */
982 .adminify-field-media{
983
984 .adminify--placeholder{
985 display: flex;
986 align-items: flex-start;
987
988 input{
989 width: 100%;
990 margin: 0;
991 }
992 }
993
994 .button{
995 margin-left: 5px;
996 }
997
998 .hidden + .button{
999 margin-left: 0;
1000 }
1001
1002 .adminify--preview{
1003 position: relative;
1004 }
1005 }
1006
1007 /**
1008 * 03. 21. Field: palette
1009 */
1010 .adminify-field-palette{
1011
1012 .adminify--palette{
1013 position: relative;
1014 display: inline-block;
1015 cursor: pointer;
1016 border: 2px solid #ddd;
1017 margin-right: 10px;
1018 margin-bottom: 10px;
1019 user-select: none;
1020 -webkit-user-select: none;
1021 transition: all .2s;
1022
1023 span{
1024 vertical-align: middle;
1025 display: inline-block;
1026 width: 22px;
1027 height: 60px;
1028 line-height: 60px;
1029 overflow: hidden;
1030 text-indent: -999px;
1031 }
1032
1033 &:before{
1034 position: absolute;
1035 top: 0;
1036 left: 0;
1037 text-align: center;
1038 font-size: 10px;
1039 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1040 font-weight: 900;
1041 content: "\f00c";
1042 width: 16px;
1043 height: 16px;
1044 line-height: 14px;
1045 opacity: 0;
1046 color: #fff;
1047 background-color: #222;
1048 transition: opacity .2s;
1049 }
1050 }
1051
1052 .adminify--active{
1053 border-color: #222;
1054 box-shadow: 0 0 20px rgba(0,0,0,0.2);
1055
1056 &:before{
1057 opacity: 1;
1058 }
1059 }
1060
1061 input{
1062 display: none;
1063 }
1064 }
1065
1066 /**
1067 * 03. 22. Field: repeater
1068 */
1069 .adminify-field-repeater{
1070
1071 .adminify-field-text input{
1072 width: 100%;
1073 }
1074
1075 .adminify-repeater-hidden{
1076 display: none !important;
1077 }
1078
1079 .adminify-repeater-wrapper{
1080
1081 .adminify-repeater-item{
1082 display: table;
1083 width: 100%;
1084 margin-bottom: 5px;
1085 border: 1px solid #eee;
1086
1087 h4{
1088 font-size: 1em;
1089 }
1090 }
1091 }
1092
1093 .adminify-repeater-content{
1094 width: 100%;
1095 display: table-cell;
1096 vertical-align: middle;
1097 background-color: #fff;
1098
1099 > .adminify-field{
1100 padding: 15px;
1101 }
1102 }
1103
1104 .adminify-repeater-helper{
1105 width: 100%;
1106 display: table-cell;
1107 vertical-align: middle;
1108 text-align: center;
1109 font-size: 14px;
1110 line-height: 1em;
1111 border-left: 1px solid #eee;
1112 background-color: #f7f7f7;
1113
1114 i{
1115 display: inline-block;
1116 cursor: pointer;
1117 color: #999;
1118 padding: 5px;
1119
1120 &:hover{
1121 color: #555;
1122 }
1123 }
1124 }
1125
1126 .adminify-repeater-helper-inner{
1127 width: 75px;
1128 }
1129
1130 .adminify-repeater-alert{
1131 display: none;
1132 margin-bottom: 5px;
1133 padding: 10px 20px;
1134 color: #a94442;
1135 border: 1px solid #ebccd1;
1136 background-color: #f2dede;
1137 }
1138
1139 .widget-placeholder{
1140 height: 50px;
1141 margin-bottom: 3px;
1142 border: 1px dashed #f1c40f;
1143 background-color: #fffae4;
1144 }
1145
1146 .ui-sortable-helper{
1147 height: 50px !important;
1148 overflow: hidden !important;
1149 border-color: #ccc !important;
1150 background-color: #eee !important;
1151 opacity: 0.5;
1152
1153 .adminify-repeater-helper,
1154 .adminify-repeater-content{
1155 display: none;
1156 }
1157 }
1158 }
1159
1160 /**
1161 * 03. 23. Field: select
1162 */
1163 .adminify-field-select{
1164
1165 .adminify-fieldset{
1166 min-height: 30px;
1167 }
1168
1169 .adminify-chosen{
1170 display: none;
1171 }
1172
1173 select{
1174 max-width: 100%;
1175 margin: 0;
1176 }
1177
1178 .adminify-hide-select{
1179 display: none !important;
1180 }
1181 }
1182
1183 /**
1184 * 03. 24. Field: slider
1185 */
1186 .adminify-field-slider{
1187
1188 .adminify--wrap{
1189 display: flex;
1190 align-items: center;
1191 }
1192
1193 .adminify--input{
1194 display: flex;
1195 }
1196
1197 .adminify--unit{
1198 display: flex;
1199 justify-content: center;
1200 flex-direction: column;
1201 user-select: none;
1202 padding: 0 6px;
1203 font-size: 11px;
1204 line-height: 1;
1205 border-radius: 0 4px 4px 0;
1206 color: #555;
1207 border: 1px solid #7e8993;
1208 border-left: 0;
1209 background-color: #f5f5f5;
1210 }
1211
1212 .adminify-slider-ui{
1213 margin-right: 15px;
1214 }
1215
1216 input[type=number]=number]{
1217 position: relative;
1218 z-index: 1;
1219 margin: 0;
1220 width: 50px;
1221 text-align: center;
1222 }
1223
1224 .adminify--is-unit{
1225 border-top-right-radius: 0 !important;
1226 border-bottom-right-radius: 0 !important;
1227 }
1228
1229 .ui-slider{
1230 position: relative;
1231 width: 100%;
1232 height: 3px;
1233 border: none;
1234 background: #ddd;
1235 border-radius: 2px;
1236 }
1237
1238 .ui-slider-range{
1239 height: 3px;
1240 border: none;
1241 background: #333;
1242 border-radius: 2px;
1243 }
1244
1245 .ui-slider-handle{
1246 position: absolute;
1247 width: 16px;
1248 height: 16px;
1249 top: -7px;
1250 margin-left: -8px;
1251 border: none;
1252 background: #333;
1253 border-radius: 2px;
1254 }
1255
1256 .ui-state-active,
1257 .ui-slider-handle:hover{
1258 cursor: pointer;
1259 background: #111;
1260 }
1261 }
1262
1263 /**
1264 * 03. 25. Field: sortable
1265 */
1266 .adminify-field-sortable{
1267
1268 .adminify-field-text{
1269
1270 input{
1271 width: 100%;
1272 max-width: 100%;
1273 }
1274 }
1275
1276 .adminify-sortable{
1277
1278 .adminify-sortable-item{
1279 display: table;
1280 width: 100%;
1281 margin-bottom: 5px;
1282 border: 1px solid #eee;
1283
1284 h4{
1285 font-size: 1em;
1286 }
1287 }
1288 }
1289
1290 .adminify-sortable-content{
1291 width: 100%;
1292 display: table-cell;
1293 vertical-align: middle;
1294 background-color: #fff;
1295
1296 > .adminify-field{
1297 padding: 15px;
1298 }
1299 }
1300
1301 .adminify-sortable-helper{
1302 width: 100%;
1303 display: table-cell;
1304 vertical-align: middle;
1305 text-align: center;
1306 font-size: 14px;
1307 line-height: 1em;
1308 border-left: 1px solid #eee;
1309 background-color: #f7f7f7;
1310
1311 i{
1312 display: inline-block;
1313 cursor: pointer;
1314 width: 50px;
1315 color: #555;
1316
1317 &:hover{
1318 opacity: 0.5;
1319 }
1320 }
1321 }
1322
1323 .widget-placeholder{
1324 height: 50px;
1325 margin-bottom: 3px;
1326 border: 1px dashed #f1c40f;
1327 background-color: #fffae4;
1328 }
1329
1330 .ui-sortable-helper{
1331 height: 50px !important;
1332 overflow: hidden !important;
1333 border-color: #ccc !important;
1334 background-color: #eee !important;
1335 opacity: 0.5;
1336
1337 .adminify-sortable-helper,
1338 .adminify-sortable-content{
1339 display: none;
1340 }
1341 }
1342 }
1343
1344 /**
1345 * 03. 26. Field: sorter
1346 */
1347 .adminify-field-sorter{
1348
1349 .ui-sortable-placeholder{
1350 height: 20px;
1351 border: 1px dashed #f1c40f;
1352 background-color: #fffae4;
1353 }
1354
1355 .adminify-modules{
1356 float: left;
1357 width: 50%;
1358 box-sizing: border-box;
1359
1360 &:first-child{
1361 padding-right: 15px;
1362 }
1363
1364 &:last-child{
1365 padding-left: 15px;
1366 }
1367 }
1368
1369 .adminify-disabled,
1370 .adminify-enabled{
1371 padding: 5px 15px;
1372 border: 1px dashed #ddd;
1373 background-color: #fff;
1374 }
1375
1376 .adminify-disabled{
1377 li{
1378 opacity: 0.5;
1379 transition: opacity .15s;
1380 }
1381
1382 .ui-sortable-helper{
1383 opacity: 1;
1384 }
1385 }
1386
1387 .adminify-sorter-title{
1388 font-size: 13px;
1389 font-weight: 600;
1390 padding: 10px;
1391 text-align: center;
1392 border: 1px dashed #ddd;
1393 border-bottom: none;
1394 background-color: #f8f8f8;
1395 text-transform: uppercase;
1396 }
1397
1398 ul{
1399 list-style-type: none;
1400 margin: 0;
1401 padding: 0;
1402 min-height: 62px;
1403
1404 li{
1405 margin: 10px 0;
1406 padding: 10px 15px;
1407 cursor: move;
1408 font-weight: bold;
1409 text-align: center;
1410 border: 1px solid #e5e5e5;
1411 background-color: #fafafa;
1412 transition: border-color .15s;
1413
1414 &:hover{
1415 border-color: #bbb;
1416 }
1417 }
1418 }
1419 }
1420
1421 /**
1422 * 03. 27. Field: spinner
1423 */
1424 .adminify-field-spinner{
1425
1426 .adminify--spin{
1427 display: flex;
1428 }
1429
1430 .ui-widget{
1431 font-family: inherit;
1432 }
1433
1434 .ui-spinner{
1435 display: flex;
1436 align-items: stretch;
1437 overflow: unset;
1438 border: none;
1439 background: none;
1440 border-radius: 0;
1441
1442 .ui-button{
1443 display: flex;
1444 flex-direction: column;
1445 justify-content: center;
1446 text-align: center;
1447 min-width: 20px;
1448 padding: 0 4px;
1449 margin: 0;
1450 color: #555;
1451 background-color: #f5f5f5;
1452 border: 1px solid #7e8993;
1453 }
1454
1455 .ui-spinner-button{
1456 position: relative;
1457 cursor: pointer;
1458 height: auto;
1459
1460 &:hover{
1461 background-color: #e7e7e7;
1462 }
1463
1464 &:active{
1465 background-color: #ddd;
1466 }
1467
1468 &:before{
1469 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1470 font-weight: 900;
1471 font-size: 14px;
1472 line-height: 14px;
1473 }
1474 }
1475
1476 .ui-spinner-down{
1477 border-right: 0;
1478 border-radius: 4px 0 0 4px;
1479
1480 &:before{
1481 content: "\f0d9";
1482 }
1483 }
1484
1485 .ui-spinner-up{
1486 border-left: 0;
1487 border-radius: 0 4px 4px 0;
1488
1489 &:before{
1490 content: "\f0da";
1491 }
1492 }
1493
1494 .adminify--unit{
1495 border-left: 0;
1496 user-select: none;
1497 }
1498
1499 .ui-button-text,
1500 .ui-button-icon,
1501 .ui-button-icon-space{
1502 display: none;
1503 }
1504
1505 input{
1506 font-family: inherit;
1507 font-size: inherit;
1508 position: relative;
1509 z-index: 1;
1510 width: 50px;
1511 text-align: center;
1512 margin: 0;
1513 padding: 0 8px;
1514 border-radius: 0;
1515 }
1516 }
1517
1518 .ui-spinner-down{
1519 order: 1;
1520 }
1521
1522 .ui-spinner-input{
1523 order: 2;
1524 }
1525
1526 .adminify--unit{
1527 order: 3;
1528 }
1529
1530 .ui-spinner-up{
1531 order: 4;
1532 }
1533 }
1534
1535 /**
1536 * 03. 28. Field: switcher
1537 */
1538 .adminify-field-switcher{
1539
1540 .adminify--switcher{
1541 float: left;
1542 cursor: pointer;
1543 position: relative;
1544 width: 60px;
1545 height: 26px;
1546 padding: 0;
1547 margin: 0;
1548 overflow: hidden;
1549 border-radius: 4px;
1550 background-color: #ed6f6f;
1551 user-select: none;
1552 -webkit-user-select: none;
1553 }
1554
1555 .adminify--ball{
1556 position: absolute;
1557 top: 4px;
1558 left: 4px;
1559 width: 24px;
1560 height: 18px;
1561 background-color: #fff;
1562 border-radius: 4px;
1563 transition: all .1s;
1564 box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
1565 }
1566
1567 .adminify--on,
1568 .adminify--off{
1569 position: absolute;
1570 top: 0;
1571 left: 0;
1572 right: 0;
1573 font-size: 11px;
1574 line-height: 26px;
1575 font-weight: 500;
1576 font-style: normal;
1577 text-align: center;
1578 text-transform: uppercase;
1579 color: #fff;
1580 padding-right: 28px;
1581 opacity: 0;
1582 transition: all .1s;
1583 }
1584
1585 .adminify--off{
1586 padding-right: 0;
1587 padding-left: 28px;
1588 opacity: 1;
1589 }
1590
1591 .adminify--active{
1592 background: #4fb845;
1593
1594 .adminify--on{
1595 opacity: 1;
1596 }
1597
1598 .adminify--off{
1599 opacity: 0;
1600 }
1601
1602 .adminify--ball{
1603 left: 100%;
1604 margin-left: -28px;
1605 }
1606 }
1607
1608 .adminify--label{
1609 float: left;
1610 margin-top: 4px;
1611 margin-left: 8px;
1612 font-weight: 400;
1613 color: #999;
1614 }
1615 }
1616
1617 /**
1618 * 03. 29. Field: tabbed
1619 */
1620 .adminify-field-tabbed{
1621
1622 .adminify-tabbed-content{
1623 border: 1px solid #ccd0d4;
1624 background-color: #fff;
1625 box-shadow: 0 1px 1px rgba(0,0,0,.04);
1626
1627 > .adminify-field{
1628 padding: 15px;
1629 }
1630 }
1631
1632 .adminify-tabbed-nav{
1633
1634 .adminify--icon{
1635 padding-right: 5px;
1636 }
1637
1638 a{
1639 display: inline-block;
1640 padding: 12px 15px;
1641 margin-top: 1px;
1642 margin-right: 5px;
1643 margin-bottom: -1px;
1644 position: relative;
1645 text-decoration: none;
1646 color: #444;
1647 font-weight: 600;
1648 border: 1px solid #ccd0d4;
1649 background-color: #f3f3f3;
1650 transition: all .2s;
1651
1652 &:hover{
1653 background-color: #f9f9f9;
1654 }
1655
1656 &.adminify-tabbed-active{
1657 background-color: #fff;
1658 border-bottom-color: #fff;
1659 }
1660
1661 &:focus{
1662 outline: none;
1663 box-shadow: none;
1664 }
1665 }
1666 }
1667 }
1668
1669 /**
1670 * 03. 30. Field: text
1671 */
1672 .adminify-field-text{
1673
1674 input{
1675 width: 50%;
1676 max-width: 100%;
1677 margin: 0;
1678 }
1679 }
1680
1681 /**
1682 * 03. 31. Field: textarea
1683 */
1684 .adminify-field-textarea{
1685
1686 textarea{
1687 width: 100%;
1688 max-width: 100%;
1689 min-height: 125px;
1690 }
1691
1692 .adminify-shortcode-button{
1693 margin-bottom: 10px;
1694 margin-right: 5px;
1695 }
1696 }
1697
1698 /**
1699 * 03. 32. Field: typography
1700 */
1701 .adminify-field-typography{
1702
1703 textarea,
1704 select{
1705 margin: 0;
1706 min-width: 100%;
1707 max-width: 100%;
1708 }
1709
1710 .adminify--title{
1711 color: #777;
1712 margin: 0 0 2px 0;
1713 font-size: 12px;
1714
1715 small{
1716 vertical-align: top;
1717 }
1718 }
1719
1720 .adminify--blocks{
1721 display: flex;
1722 flex-wrap: wrap;
1723 }
1724
1725 .adminify--block{
1726 flex: 1;
1727 max-width: 100%;
1728 padding-right: 6px;
1729 padding-bottom: 6px;
1730 }
1731
1732 .adminify--input{
1733 margin: 0;
1734 min-width: 100%;
1735 }
1736
1737 .adminify--input-wrap{
1738 position: relative;
1739 }
1740
1741 .adminify--unit{
1742 position: absolute;
1743 z-index: 1;
1744 right: 4px;
1745 top: 4px;
1746 bottom: 4px;
1747 padding: 2px 6px;
1748 color: #666;
1749 font-size: 11px;
1750 line-height: 1;
1751 border-radius: 2px;
1752 background: #eee;
1753 user-select: none;
1754 display: flex;
1755 justify-content: center;
1756 flex-direction: column;
1757 }
1758
1759 .adminify--preview{
1760 font-size: 16px;
1761 line-height: 20px;
1762 padding: 20px;
1763 color: #222;
1764 border: 1px solid #eee;
1765 background-color: #fff;
1766 border-radius: 2.5px;
1767 user-select: none;
1768 -webkit-user-select: none;
1769 transition: background-color .2s, border-color .2s;
1770 }
1771
1772 .adminify--block-preview{
1773 cursor: pointer;
1774 position: relative;
1775 overflow: hidden;
1776 margin-top: 10px;
1777 max-width: 100%;
1778 }
1779
1780 .adminify--black-background{
1781 border-color: #000;
1782 background-color: #000;
1783 }
1784
1785 .adminify--toggle{
1786 position: absolute;
1787 top: 5px;
1788 right: 10px;
1789 color: #999;
1790 }
1791
1792 .adminify--block-extra-styles{
1793 margin-top: 5px;
1794 }
1795 }
1796
1797 /**
1798 * 03. 33. Field: upload
1799 */
1800 .adminify-field-upload{
1801
1802 input{
1803 width: 100%;
1804 margin: 0;
1805 }
1806
1807 .adminify--wrap{
1808 display: flex;
1809 align-items: flex-start;
1810 }
1811
1812 .button{
1813 margin-left: 5px;
1814 }
1815
1816 .adminify--preview{
1817 position: relative;
1818 }
1819 }
1820
1821 /**
1822 * 03. 34. Field: wp_editor
1823 */
1824 .adminify-field-wp_editor{
1825
1826 .adminify-wp-editor{
1827 float: left;
1828 width: 100%;
1829 }
1830
1831 .mce-toolbar-grp{
1832 border: none;
1833 }
1834
1835 .mce-btn.mce-active button,
1836 .mce-btn.mce-active:hover button,
1837 .mce-btn.mce-active i,
1838 .mce-btn.mce-active:hover i{
1839 color: #23282d;
1840 }
1841
1842 .wp-media-buttons{
1843 position: relative;
1844 z-index: 2;
1845 }
1846
1847
1848 .wp-editor-tabs{
1849 position: relative;
1850 z-index: 1;
1851 }
1852
1853 .adminify-no-tinymce{
1854 border: 1px solid #e5e5e5;
1855 }
1856
1857 .adminify-no-quicktags{
1858
1859 .wp-media-buttons{
1860 float: none;
1861 display: block;
1862 }
1863
1864 .mce-tinymce{
1865 box-shadow: none;
1866 border: 1px solid #e5e5e5;
1867 }
1868 }
1869
1870 textarea{
1871 width: 100%;
1872 max-width: 100%;
1873 margin: 0;
1874 box-shadow: none;
1875 }
1876 }
1877
1878 /**
1879 * 03. 35. Field: heading
1880 */
1881 .adminify-field-heading{
1882 font-size: 1.5em;
1883 font-weight: bold;
1884 color: #23282d;
1885 background-color: #f5f5f5;
1886 }
1887
1888 /**
1889 * 03. 36. Field: subheading
1890 */
1891 .adminify-field-subheading{
1892 font-size: 14px;
1893 font-weight: bold;
1894 padding-top: 17px;
1895 padding-bottom: 17px;
1896 color: #23282d;
1897 background-color: #f7f7f7;
1898 }
1899
1900 /**
1901 * 03. 37. Field: submessage
1902 */
1903 .adminify-field-submessage{
1904 padding: 0 !important;
1905 border: 0 !important;
1906
1907 + .adminify-field{
1908 border-top: 0 !important;
1909 }
1910 }
1911
1912 .adminify-submessage{
1913 font-size: 12px;
1914 padding: 17px 30px;
1915 border-top: 1px solid transparent;
1916 border-bottom: 1px solid transparent;
1917 }
1918
1919 .adminify-submessage-success{
1920 color: #3c763d;
1921 border-color: #d6e9c6;
1922 background-color: #dff0d8;
1923 }
1924
1925 .adminify-submessage-info{
1926 color: #31708f;
1927 border-color: #bce8f1;
1928 background-color: #d9edf7;
1929 }
1930
1931 .adminify-submessage-warning{
1932 color: #8a6d3b;
1933 border-color: #faebcc;
1934 background-color: #fcf8e3;
1935 }
1936
1937 .adminify-submessage-danger{
1938 color: #a94442;
1939 border-color: #ebccd1;
1940 background-color: #f2dede;
1941 }
1942
1943 .adminify-submessage-normal{
1944 color: #23282d;
1945 border-color: #eee;
1946 background-color: #f7f7f7;
1947 }
1948
1949 /**
1950 * 03. 38. Field: notice
1951 */
1952 .adminify-field-notice{
1953 background-color: #f7f7f7;
1954 }
1955
1956 .adminify-notice{
1957 padding: 12px;
1958 background-color: #fff;
1959 border-left-style: solid;
1960 border-left-width: 4px;
1961 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
1962 }
1963
1964 .adminify-notice-success{
1965 border-color: #46b450;
1966 }
1967
1968 .adminify-notice-info{
1969 border-color: #339fd4;
1970 }
1971
1972 .adminify-notice-warning{
1973 border-color: #ffbc00;
1974 }
1975
1976 .adminify-notice-danger{
1977 border-color: #dc3232;
1978 }
1979
1980 .adminify-notice-normal{
1981 border-color: #222;
1982 }
1983
1984 /**
1985 * 03. 39. Field: number
1986 */
1987 .adminify-field-number{
1988
1989 input{
1990 width: 100%;
1991 margin: 0;
1992 }
1993
1994 .adminify--wrap{
1995 position: relative;
1996 float: left;
1997 width: 100px;
1998 }
1999
2000 .adminify--unit{
2001 position: absolute;
2002 z-index: 1;
2003 right: 4px;
2004 top: 4px;
2005 bottom: 4px;
2006 padding: 2px 6px;
2007 color: #666;
2008 font-size: 11px;
2009 line-height: 1;
2010 border-radius: 2px;
2011 background: #eee;
2012 user-select: none;
2013 display: flex;
2014 justify-content: center;
2015 flex-direction: column;
2016 }
2017 }
2018
2019 /**
2020 * 03. 40. Field: link
2021 */
2022 .adminify-field-link{
2023
2024 .adminify--result{
2025 display: inline-block;
2026 font-size: 12px;
2027 line-height: 16px;
2028 padding: 7px 10px;
2029 margin-bottom: 7px;
2030 color: #777;
2031 border: 1px solid #e5e5e5;
2032 background-color: #f5f5f5;
2033 border-radius: 2px;
2034 world-break: break-word;
2035 }
2036
2037 .adminify--wrap{
2038 position: relative;
2039 float: left;
2040 width: 100px;
2041 }
2042
2043 .adminify--unit{
2044 position: absolute;
2045 z-index: 1;
2046 right: 4px;
2047 top: 4px;
2048 bottom: 4px;
2049 padding: 2px 6px;
2050 color: #666;
2051 font-size: 11px;
2052 line-height: 1;
2053 border-radius: 2px;
2054 background: #eee;
2055 user-select: none;
2056 display: flex;
2057 justify-content: center;
2058 flex-direction: column;
2059 }
2060 }
2061
2062 /**
2063 * 03. 41. others
2064 */
2065 .adminify-help{
2066 cursor: help;
2067 position: absolute;
2068 top: 0;
2069 right: 0;
2070 padding: 5px;
2071 font-size: 13px;
2072 color: #aaa;
2073
2074 .adminify-help-text{
2075 display: none;
2076 }
2077 }
2078
2079 .adminify--preview{
2080 max-width: 100%;
2081 }
2082
2083 .adminify-image-preview{
2084 display: inline-flex;
2085 align-items: center;
2086 justify-content: center;
2087 flex-direction: column;
2088 position: relative;
2089 padding: 6px;
2090 max-width: 120px;
2091 max-height: 120px;
2092 min-width: 40px;
2093 min-height: 40px;
2094 margin-bottom: 10px;
2095 text-align: center;
2096 border-radius: 2px;
2097 border: 1px solid #ccc;
2098 background-color: #f9f9f9;
2099 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
2100
2101 i{
2102 cursor: pointer;
2103 position: absolute;
2104 z-index: 1;
2105 right: 4px;
2106 top: 4px;
2107 font-size: 14px;
2108 width: 22px;
2109 height: 22px;
2110 line-height: 22px;
2111 text-align: center;
2112 text-decoration: none;
2113 color: #fff;
2114 background-color: #dd3333;
2115 opacity: 0.75;
2116 border-radius: 2px;
2117 transition: all .2s;
2118
2119 &:hover{
2120 opacity: 1;
2121 }
2122
2123 &:focus{
2124 box-shadow: none;
2125 }
2126 }
2127
2128 span{
2129 position: relative;
2130 overflow: hidden;
2131 display: flex;
2132 height: 100%;
2133 width: 100%;
2134 }
2135
2136 img{
2137 max-width: 100%;
2138 height: auto;
2139 object-fit: contain;
2140 }
2141 }
2142
2143 .adminify-field-custom{
2144
2145 .adminify-field{
2146 padding: 0;
2147 }
2148 }
2149
2150 .adminify-field{
2151
2152 .chosen-container-single .chosen-single{
2153 height: 28px;
2154 line-height: 26px;
2155 }
2156
2157 .chosen-container-single .chosen-single abbr{
2158 top: 0;
2159 right: 20px;
2160 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2161 font-weight: 900;
2162 font-size: 12px;
2163 height: 100%;
2164 width: 18px;
2165 color: #aaa;
2166 text-align: center;
2167 background: none;
2168
2169 &:before{
2170 content: "\f00d";
2171 }
2172
2173 &:hover{
2174 color: #555;
2175 }
2176 }
2177
2178 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close{
2179 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2180 font-weight: 900;
2181 font-size: 12px;
2182 height: 100%;
2183 width: 18px;
2184 color: #aaa;
2185 text-align: center;
2186 background: none;
2187
2188 &:before{
2189 content: "\f00d";
2190 display: inline-block;
2191 padding-top: 3px;
2192 }
2193
2194 &:hover{
2195 color: #555;
2196 }
2197 }
2198
2199 .chosen-container-single .chosen-single div b{
2200 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2201 font-weight: 900;
2202 font-size: 14px;
2203 color: #aaa;
2204 background: none;
2205
2206 &:before{
2207 content: "\f107";
2208 }
2209
2210 &:hover{
2211 color: #555;
2212 }
2213 }
2214
2215 .chosen-container-multi .chosen-choices li.search-choice-placeholder {
2216 border: 1px dashed #aaa;
2217 margin: 3px 5px 3px 0;
2218 }
2219
2220 .chosen-container-multi .ui-sortable li.search-choice span {
2221 cursor: move;
2222 }
2223
2224 .chosen-container-active.chosen-with-drop .chosen-single div b{
2225
2226 &:before{
2227 content: "\f106";
2228 }
2229 }
2230
2231 .chosen-container-single .chosen-single-with-deselect span{
2232 margin-right: 40px;
2233 }
2234
2235 .chosen-container-single .chosen-search input[type="text"]="text""]{
2236 background: none;
2237 }
2238
2239 .chosen-container-single .chosen-search{
2240
2241 &:before{
2242 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2243 font-weight: 900;
2244 font-size: 11px;
2245 content: "\f002";
2246 position: absolute;
2247 right: 12px;
2248 top: 10px;
2249 color: #aaa;
2250 }
2251 }
2252
2253 .wp-picker-container{
2254 display: inline-block;
2255
2256 .wp-color-result.button{
2257 margin-bottom: 0;
2258 }
2259 }
2260
2261 .adminify--transparent-wrap{
2262 display: none;
2263 position: relative;
2264 top: -1px;
2265 width: 235px;
2266 padding: 9px 10px;
2267 border: 1px solid #dfdfdf;
2268 border-top: none;
2269 background-color: #fff;
2270 }
2271
2272 .wp-picker-active .adminify--transparent-wrap{
2273 display: block;
2274 }
2275
2276 .adminify--transparent-slider{
2277 position: absolute;
2278 width: 190px;
2279 margin-left: 2px;
2280 height: 18px;
2281
2282 .ui-slider-handle{
2283 position: absolute;
2284 top: -3px;
2285 bottom: -3px;
2286 z-index: 5;
2287 border-color: #aaa;
2288 border-style: solid;
2289 border-width: 4px 3px;
2290 width: 10px;
2291 height: 16px;
2292 margin: 0 -5px;
2293 background: none;
2294 cursor: ew-resize;
2295 opacity: 0.9;
2296 border-radius: 4px;
2297 box-shadow: 0 1px 2px rgba(0,0,0,0.2);
2298
2299 &:before{
2300 content: " ";
2301 position: absolute;
2302 left: -2px;
2303 right: -2px;
2304 top: -3px;
2305 bottom: -3px;
2306 border: 2px solid #fff;
2307 border-radius: 3px;
2308 }
2309 }
2310 }
2311
2312 .adminify--transparent-offset{
2313 height: 18px;
2314 width: 200px;
2315 background: url(../images/checkerboard.png) repeat-y center left scroll #fff;
2316 border-radius: 2px;
2317 box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
2318 }
2319
2320 .adminify--transparent-text{
2321 position: absolute;
2322 top: 12px;
2323 right: 10px;
2324 width: 30px;
2325 font-size: 12px;
2326 line-height: 12px;
2327 text-align: center;
2328 color: #999;
2329 }
2330
2331 .adminify--transparent-button{
2332 cursor: pointer;
2333 user-select: none;
2334 margin-top: 10px;
2335 font-size: 11px;
2336 text-align: center;
2337 border-radius: 2px;
2338 padding: 3px 7px;
2339 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
2340 letter-spacing: 0.2px;
2341 color: #777;
2342 border: 1px solid #ccc;
2343 background-color: #f7f7f7;
2344 transition: background-color .2s, border-color .2s, color .2s;
2345 }
2346
2347 .adminify--transparent-active{
2348
2349 .wp-color-result{
2350 background-image: url(../images/checkerboard.png);
2351 background-size: 135px;
2352 background-position: center left;
2353 background-color: transparent !important;
2354 }
2355
2356 .adminify--transparent-button{
2357 color: #fff;
2358 border-color: #3ea032;
2359 background-color: #4fb845;
2360 }
2361
2362 .fa:before{
2363 content: "\f205";
2364 }
2365 }
2366 }
2367