PluginProbe ʕ •ᴥ•ʔ
Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI / 1.6.3
Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI v1.6.3
3.5.2 3.5.1 3.5.0 3.4.8 3.4.7 3.4.6 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.5.1 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.4.9 1.5.0 1.5.1 1.5.10 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.6.1 1.6.7 1.7.0 1.7.0.1 1.7.0.2 1.7.0.3 1.7.1 1.7.2 1.7.2.1 1.7.2.2 1.7.3 1.7.4 1.7.5 1.7.5.1 1.7.5.2 1.7.6 1.7.7 1.7.7.1 1.7.7.2 1.7.8 1.7.9 1.8.0 1.8.0.1 1.8.1 1.8.2 1.8.2.1 1.8.2.2 1.8.2.3 1.8.3 1.8.4 1.8.5 1.8.6 1.8.7 1.8.8 1.8.9 1.9.0 1.9.0.1 1.9.1 1.9.2 1.9.3 1.9.4 1.9.4.1 1.9.5 1.9.6 1.9.7 1.9.8 1.9.9 2.0.0 2.0.0.1 2.0.1 2.0.2 2.0.3 2.0.3.1 2.0.4 2.0.4.1 2.0.5 2.0.6 2.0.7 2.0.8 2.0.8.1 2.0.9 3.0.0 3.0.0.1 3.0.1 3.0.2 3.0.3 3.0.3.1 3.0.4 3.0.4.1 3.0.4.2 3.0.5 3.0.5.1 3.0.5.2 3.0.6 3.0.6.1 3.0.7.1 3.0.8 3.0.8.1 3.0.9 3.0.9.1 3.0.9.2 3.0.9.3 3.0.9.4 3.0.9.5 3.1.0 3.1.1 3.1.2 3.2.0 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6 3.3.0 3.4.0 3.4.1 3.4.2 3.4.2.1 3.4.3 3.4.4 3.4.5 trunk 1.0 1.0.1 1.0.2 1.0.3
everest-forms / assets / css / admin.scss
everest-forms / assets / css Last commit date
jquery-confirm 8 years ago jquery-ui 8 years ago perfect-scrollbar 7 years ago _animation.scss 6 years ago _backbone.scss 6 years ago _clearings.scss 6 years ago _confirm.scss 6 years ago _fonts.scss 7 years ago _mixins.scss 7 years ago _variables.scss 6 years ago activation-rtl.css 6 years ago activation.css 6 years ago activation.scss 6 years ago admin-rtl.css 6 years ago admin.css 6 years ago admin.scss 6 years ago everest-forms-rtl.css 6 years ago everest-forms.css 6 years ago everest-forms.scss 6 years ago flatpickr.css 6 years ago flatpickr.scss 7 years ago menu-rtl.css 6 years ago menu.css 6 years ago menu.scss 6 years ago select2.css 6 years ago select2.scss 6 years ago
admin.scss
5580 lines
1 /**
2 * admin.scss
3 * General EverestForms admin styles.
4 */
5
6 /**
7 * Import
8 */
9 @import 'fonts';
10 @import 'mixins';
11 @import 'variables';
12 @import 'animation';
13 @import 'clearings';
14 @import 'confirm';
15
16 /**
17 * Styling begins
18 */
19 .blockUI.blockOverlay {
20 @include loader();
21 }
22
23 // Loader
24 .evf-loading {
25 background: url(../images/icons/loader.svg);
26 background-size: 20px 20px;
27 display: inline-block;
28 visibility: hidden;
29 vertical-align: middle;
30 opacity: 0.7;
31 width: 20px;
32 height: 20px;
33 margin: 2px 0 0 5px;
34 float: right;
35
36 &.evf-loading-active {
37 visibility: visible;
38 -webkit-animation: rotating 1s linear infinite;
39 -moz-animation: rotating 1s linear infinite;
40 -ms-animation: rotating 1s linear infinite;
41 -o-animation: rotating 1s linear infinite;
42 animation: rotating 1s linear infinite;
43 }
44 }
45
46 .evf_addons_wrap {
47 p.refresh {
48 margin: 0 0 2em;
49 }
50
51 .wp-filter {
52 display: none;
53 }
54
55 .plugin-card {
56 .name,
57 .desc {
58 margin-right: 0;
59 }
60 .plugin-card-top {
61 padding: 20px;
62 min-height: 130px;
63
64 .plugin-desc {
65 overflow: hidden;
66 display: -webkit-box;
67 -webkit-line-clamp: 4;
68 -webkit-box-orient: vertical;
69 }
70
71 .plugin-icon {
72 border: 1px solid #eee;
73 }
74 }
75
76 .plugin-card-bottom {
77 .status {
78 text-align: left;
79 float: left;
80 clear: left;
81 width: 65%;
82 padding-top: 5px;
83 width: calc(100% - 180px);
84
85 span.status-label {
86 color: #666;
87
88 &.status-active {
89 color: #2a9b39;
90 }
91
92 &.status-inactive {
93 color: #a00;
94 }
95 }
96 }
97
98 .action-buttons {
99 float: right;
100 clear: right;
101 max-width: 180px;
102
103 &.upgrade-plan {
104 margin: 0 auto;
105 }
106 }
107 }
108 }
109
110 .plugin-card-update-failed {
111 .notice-error {
112 margin: 0;
113 padding: 9px 16px 8px;
114
115 .notice-dismiss {
116 padding: 17px;
117 }
118 }
119 }
120
121 @media screen and (max-width: 782px) {
122 .plugin-card {
123 .plugin-card-bottom {
124 .status {
125 padding-top: 9px;
126 }
127
128 .action-buttons {
129 .button.updating-message {
130 &::before,
131 &::after {
132 margin-top: -1px;
133 }
134 }
135 }
136 }
137 }
138
139 .plugin-card-update-failed {
140 .notice-error {
141 padding: 13px 20px;
142
143 .notice-dismiss {
144 padding: 21px;
145 }
146 }
147 }
148 }
149 }
150
151 .clear {
152 clear: both;
153 }
154
155 .wrap.everest-forms div.updated,
156 .wrap.everest-forms div.error {
157 margin-top: 10px;
158 }
159
160 /**
161 * Help Tip
162 */
163 .everest-forms-help-tip {
164 cursor: help;
165 color: #666;
166 display: inline-block;
167 font-size: 1.2em;
168 font-style: normal;
169 height: 16px;
170 line-height: 16px;
171 position: relative;
172 vertical-align: middle;
173 width: 16px;
174
175 &::after {
176 cursor: help;
177 @include icon_dashicons( '\f223' );
178 }
179 }
180
181 /**
182 * Notice info
183 */
184 .everest-forms-notice {
185 display: inline-block;
186 padding: 5px 15px;
187 margin-bottom: 15px;
188 border-radius: 4px;
189 min-width: 500px;
190
191 &::before {
192 content: '\f348';
193 font-size: 22px;
194 vertical-align: middle;
195 font-family: dashicons;
196 margin-right: 10px;
197 }
198
199 &.everest-forms-notice-info {
200 background: lighten($blue, 45%);
201 border: 1px solid $blue;
202
203 &::before {
204 color: $blue;
205 }
206 }
207
208 &.everest-forms-notice-success {
209 background: lighten($green, 40%);
210 border: 1px solid $green;
211
212 &::before {
213 color: $green;
214 }
215 }
216
217 &.everest-forms-notice-warning {
218 background: lighten($orange, 45%);
219 border: 1px solid $orange;
220
221 &::before {
222 color: $orange;
223 }
224 }
225
226 &.everest-forms-notice-danger {
227 background: lighten($red, 30%);
228 border: 1px solid $red;
229
230 &.everest-forms-notice-danger-text {
231 color: $red;
232 }
233
234 &::before {
235 color: $red;
236 }
237 }
238 }
239
240 .everest-forms-text-info {
241 color: $blue;
242 }
243
244 .everest-forms-text-success {
245 color: $green;
246 }
247
248 .everest-forms-text-warming {
249 color: $orange;
250 }
251
252 .everest-forms-text-danger {
253 color: $red;
254 }
255
256 /**
257 * Help tip
258 */
259
260 h2 .everest-forms-help-tip {
261 margin-top: -5px;
262 margin-left: 0.25em;
263 }
264
265 img.help_tip {
266 margin: 0 0 0 9px;
267 vertical-align: middle;
268 }
269
270 .postbox img.help_tip {
271 margin-top: 0;
272 }
273
274 .postbox .everest-forms-help-tip {
275 margin: 0 0 0 9px;
276 }
277
278 /**
279 * Toggle class.
280 */
281 .everest-forms-show {
282 display: block;
283 }
284
285 .everest-forms-hidden {
286 display: none;
287 }
288
289 /**
290 * Core Styling
291 */
292 body.everest-forms-builder {
293 &.everest-forms_page_evf-builder {
294 #wpcontent {
295 padding-left: 0;
296 }
297 #wpfooter {
298 position: fixed;
299 padding: 11px 20px;
300 background: #f1f1f1;
301 border-top: 1px solid $color_gray-lighten;
302 }
303 }
304
305 @media screen and (max-width: 782px) {
306 &.everest-forms_page_evf-builder {
307 .auto-fold {
308 #wpcontent {
309 padding-left: 0;
310 }
311 }
312 }
313 }
314 }
315
316 .everest-forms-builder,
317 .everest-forms-builder-setup,
318 .everest-forms_page_evf-settings {
319 .everest-forms {
320 margin: 0;
321 }
322
323 #wpcontent {
324 padding-left: 0;
325 }
326 }
327
328 /**
329 * Welcome page.
330 */
331 .dashboard_page_evf-welcome {
332 #message {
333 &.updated {
334 display: none;
335 }
336 }
337 }
338
339 #everest-forms-welcome {
340 max-width: 760px;
341 border-radius: 4px;
342 margin: 3rem auto;
343 background: $color-white;
344 border: 1px solid $color_gray-lighten;
345 box-shadow: 0 2px 10px transparentize($color_gray-base, 0.9);
346
347 a {
348 text-decoration: none;
349
350 &:focus {
351 box-shadow: none;
352 outline: none;
353 }
354 }
355
356 p {
357 font-size: 1.25em;
358 color: $color_gray-base;
359 }
360
361 .eveverest-forms-welcome-header {
362 display: flex;
363 align-items: center;
364 justify-content: space-between;
365 padding: 1em;
366 border-bottom: 1px solid $color_gray-lighten;
367 }
368
369 .eveverest-forms-welcome-header__logo-wrap {
370 display: flex;
371 align-items: center;
372
373 .eveverest-forms-welcome-header__logo-icon {
374 margin-right: 16px;
375 padding-right: 16px;
376 border-right: 1px solid $color_gray-lighten;
377
378 svg {
379 display: block;
380 fill: $everestforms;
381 width: 24px;
382 height: 24px;
383 }
384 }
385
386 span {
387 font-size: 14px;
388 font-weight: 500;
389 }
390 }
391
392 .everest-forms-welcome-container {
393 text-align: center;
394
395 .everest-forms-welcome-container__header {
396 padding: 0 1em;
397
398 h2 {
399 font-size: 1.75em;
400 margin-top: 1.75em;
401 }
402
403 p {
404 margin-bottom: 1.5em;
405 }
406 }
407
408 .everest-forms-welcome-video {
409 cursor: pointer;
410 display: flex;
411 position: relative;
412 align-items: center;
413 justify-content: center;
414
415 .everest-forms-welcome-video__button {
416 border: none;
417 cursor: pointer;
418 font-size: 24px;
419 height: 40px;
420 width: 54px;
421 border-radius: 12px;
422 padding: 8px 15px;
423 position: absolute;
424 color: $color-white;
425 opacity: 0;
426 visibility: hidden;
427 transition: 0.25s ease;
428 background: transparentize($color_gray-base, 0.25);
429
430 svg {
431 height: 24px;
432 width: 224px;
433 }
434
435 &:hover {
436 background: $red;
437 visibility: visible;
438 opacity: 1;
439 }
440 }
441
442 img {
443 display: block;
444 max-width: 100%;
445
446 &:hover {
447 & + .everest-forms-welcome-video__button {
448 visibility: visible;
449 opacity: 1;
450 }
451 }
452 }
453 }
454
455 .everest-forms-welcome-container__action {
456 padding: 0 32px;
457 margin: 3rem 0;
458 display: flex;
459 justify-content: space-between;
460
461 .everest-forms-welcome-container__action-card {
462 padding: 1em;
463 margin: 0 1em;
464 width: 100%;
465 border-radius: 4px;
466 width: calc(50% - 38px);
467 border: 1px solid $color_gray-lighten;
468 transition: 0.3s ease;
469
470 .everest-forms-welcome-container__action-card-img {
471 svg {
472 height: 64px;
473 width: 64px;
474 }
475 }
476
477 .everest-forms-welcome-container__action-card-content {
478 h3 {
479 font-size: 1.23em;
480 margin-bottom: 0.5em;
481 }
482
483 p {
484 margin-top: 0.5em;
485 }
486 }
487
488 &:hover {
489 box-shadow: 0 2px 20px 0 transparentize($color_gray-base, 0.85);
490 }
491 }
492 }
493 }
494 }
495
496 /**
497 * Buttons
498 */
499 .everest-forms-btn,
500 a.everest-forms-btn,
501 button.everest-forms-btn {
502 border: none;
503 cursor: pointer;
504 overflow: hidden;
505 font-family: inherit;
506 padding: 10px 15px;
507 border-radius: 3px;
508 line-height: 1.25;
509 position: relative;
510 display: inline-block;
511 text-decoration: none;
512 color: $color_gray-base;
513 background: $color_gray-lighten;
514 transition: all 0.2s ease 0s;
515 z-index: 1;
516
517 .evf-loading {
518 width: 14px;
519 height: 14px;
520 background-size: 14px 14px;
521 }
522
523 &.everest-forms-btn-primary {
524 background-color: $everestforms;
525 color: $color-white;
526
527 &:hover {
528 color: $color-white;
529 background-color: darken($everestforms, 10%);
530 }
531 }
532
533 &.everest-forms-btn-small {
534 font-size: 12px;
535 padding: 5px 10px;
536 }
537
538 &.everest-forms-btn-link {
539 font-weight: 600;
540 color: $everestforms;
541 background: transparent;
542
543 &:hover {
544 color: darken($everestforms, 10%);
545 background: transparent;
546 }
547
548 &:focus {
549 box-shadow: none;
550 text-decoration: underline;
551 }
552 }
553
554 &.dashicons {
555 padding: 8px 15px;
556
557 &::before {
558 width: 20px;
559 height: 20px;
560 line-height: 1;
561 font-size: 20px;
562 margin-right: 10px;
563 font-family: dashicons;
564 vertical-align: middle;
565 padding: 2px 12px 2px 0;
566 border-right: 1px solid transparentize($color_gray-base, 0.7);
567 }
568 }
569
570 &:hover {
571 background-color: darken($color_gray-lighten, 10%);
572 }
573
574 &:focus {
575 outline: none;
576 box-shadow: 0 0 0 2px lighten($everestforms, 35%);
577 }
578 }
579
580 /**
581 * Branding
582 */
583 .everest-forms_page_evf-builder,
584 .everest-forms_page_evf-settings,
585 .everest-forms_page_evf-entries {
586 select {
587 max-width: inherit;
588 }
589
590 .clearfix {
591 height: auto;
592 }
593
594 // Toggle switch.
595 .evf-toggle-section {
596 display: inline-block;
597
598 label {
599 &.evf-toggle-switch {
600 line-height: 1;
601 margin-bottom: 0;
602 position: relative;
603
604 input {
605 top: 0;
606 left: 0;
607 margin: 0;
608 z-index: 1;
609 opacity: 0;
610 padding: 0;
611 width: 100%;
612 height: 100%;
613 border: none;
614 position: absolute;
615
616 &:checked {
617 + .evf-toggle-switch-wrap {
618 background-color: #11a0d2;
619 border: 2px solid #11a0d2;
620 border: 9px solid transparent;
621
622 &::before {
623 content: '';
624 height: 6px;
625 width: 2px;
626 background: #fff;
627 position: absolute;
628 left: 0;
629 top: 0;
630 transform: translateY(-50%);
631 }
632
633 &::after {
634 border: 2px solid transparent;
635 }
636 }
637
638 ~ .evf-toggle-switch-control {
639 background-color: #fff;
640 border-width: 0;
641 transform: translateX(18px) translateY(-50%);
642 }
643
644 &::before {
645 display: none;
646 }
647 }
648
649 &:focus {
650 + .evf-toggle-switch-wrap {
651 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6c7781;
652 }
653 }
654 }
655
656 .evf-toggle-switch-wrap {
657 width: 36px;
658 height: 18px;
659 display: inline-flex;
660 background-color: #fff;
661 border: 2px solid #6c7781;
662 border-radius: 9px;
663 transition: 0.2s background ease;
664 position: relative;
665 align-items: center;
666 justify-content: flex-end;
667
668 &::after {
669 content: '';
670 width: 4px;
671 height: 4px;
672 margin-right: 2px;
673 border-radius: 50%;
674 display: inline-block;
675 border: 2px solid $color_gray-normal;
676 }
677 }
678
679 .evf-toggle-switch-control {
680 display: block;
681 position: absolute;
682 top: 50%;
683 left: 4px;
684 width: 10px;
685 height: 10px;
686 border-radius: 50%;
687 transition: 0.1s transform ease;
688 background-color: #6c7781;
689 border: 5px solid #6c7781;
690 transform: translateY(-50%);
691 }
692 }
693 }
694 }
695
696 .everest-forms-disabled {
697 opacity: 0.5;
698 pointer-events: none;
699 }
700
701 // Radio and checkbox list option
702 .everest-forms-checklist {
703 margin-bottom: 14px;
704
705 ul {
706 margin-bottom: 0;
707
708 label {
709 font-weight: normal;
710 margin-bottom: 0;
711 margin-top: 0;
712 }
713 }
714
715 &.everest-forms-checklist-inline {
716 ul {
717 display: flex;
718 flex-wrap: wrap;
719
720 li {
721 margin-right: 10px;
722 margin-bottom: 0;
723 }
724 }
725 }
726 }
727
728 .everest-forms-label-edit {
729 display: flex;
730 justify-content: space-between;
731
732 .dashicons {
733 color: $color_gray-light;
734 height: 24px;
735 width: 24px;
736 cursor: pointer;
737 flex: 0 0 24px;
738 margin: 4px;
739 border-radius: 3px;
740 display: flex;
741 align-items: center;
742 justify-content: center;
743 opacity: 0;
744 visibility: hidden;
745 }
746
747 &:hover,
748 &:active,
749 &:focus,
750 &:focus-within {
751 .dashicons {
752 visibility: visible;
753 opacity: 1;
754 }
755 }
756
757 input {
758 margin-right: 6px;
759 }
760 }
761
762 .everest-forms {
763 .loading-dot {
764 background: url(../images/icons/three-dots.svg);
765 opacity: 0.7;
766 width: 25px;
767 height: 10px;
768 display: inline-block;
769 vertical-align: middle;
770 background-size: 25px 10px;
771 }
772
773 .everest-forms-overlay {
774 width: 100%;
775 z-index: 99999;
776 overflow: hidden;
777 background: #f1f1f1;
778 position: absolute;
779 top: 0;
780 bottom: 0;
781 height: auto;
782 min-height: 100vh;
783
784 .everest-forms-overlay-content {
785 position: absolute;
786 top: 50%;
787 left: 0;
788 right: 0;
789 width: 128px;
790 height: 128px;
791 margin: 0 auto;
792 transform: translateY(-50%);
793
794 span.loading {
795 display: block;
796 font-size: 20px;
797 text-align: center;
798 letter-spacing: 0.05em;
799 }
800 }
801 }
802
803 nav.evf-nav-tab-wrapper {
804 padding: 0;
805 border: none;
806 display: flex;
807 margin: 0 0 1.5em;
808 position: relative;
809 border-bottom: none;
810 background-color: $everestforms;
811
812 a.nav-tab {
813 color: $color-white;
814 margin-left: 0;
815 display: block;
816 cursor: pointer;
817 font-size: 12px;
818 font-weight: 400;
819 line-height: 24px;
820 padding: 10px 30px;
821 border: none transparent;
822 background-color: transparent;
823 transition: 0.5s background-color ease-in-out;
824
825 span {
826 &.evf-nav-icon {
827 float: none;
828 width: auto;
829 height: auto;
830 display: block;
831 font-size: 32px;
832 text-align: center;
833
834 &::before {
835 @include iconbefore( '\e001' );
836 margin-right: 0;
837 }
838
839 &.general::before {
840 content: '\e001';
841 }
842
843 &.settings::before {
844 content: '\e002';
845 }
846
847 &.recaptcha::before {
848 content: '\e003';
849 }
850
851 &.email::before {
852 content: '\e006';
853 }
854
855 &.validations::before {
856 content: '\e012';
857 }
858
859 &.pdf-submission::before {
860 content: '\e023';
861 }
862
863 &.fields::before {
864 content: '\e00b';
865 }
866
867 &.payment,
868 &.payments {
869 &::before {
870 content: '\e01f';
871 }
872 }
873
874 &.integration,
875 &.integrations {
876 &::before {
877 content: '\e01e';
878 }
879 }
880 }
881 }
882
883 &.nav-tab-active {
884 margin-bottom: 0;
885 background-color: adjust-color($everestforms, $saturation: +20%, $lightness: +6%);
886
887 &:focus {
888 box-shadow: none;
889 }
890 }
891
892 &:focus {
893 box-shadow: none;
894 }
895
896 &:hover:not(.nav-tab-active) {
897 background-color: adjust-color($everestforms, $saturation: -4%, $lightness: -4%);
898 }
899 }
900 }
901
902 .everest-forms-settings {
903 padding-left: 20px;
904 padding-right: 20px;
905
906 h2 {
907 font-size: 20px;
908 }
909
910 .form-table {
911 tr {
912 border-bottom: 1px solid $color_gray-lighten;
913
914 &:first-child {
915 border-top: 1px solid $color_gray-lighten;
916 }
917 }
918
919 th {
920 padding-top: 31px;
921
922 .everest-forms-help-tip {
923 margin: 0;
924 transform: translateY(-50%);
925 }
926 }
927
928 td {
929 padding: 25px 0;
930 }
931
932 .forminp-radio-image {
933
934 ul {
935 margin: 0;
936 display: flex;
937
938 li {
939 margin-right: 30px;
940
941 label,
942 img {
943 display: block;
944 }
945
946 img {
947 margin-bottom: 15px;
948 border: 2px solid $color_gray-lighten;
949 }
950 }
951 }
952 }
953 }
954 }
955 }
956 }
957
958 /**
959 * Badge
960 */
961 .everest-forms-badge {
962 background: $color_gray-lighten;
963 height: 20px;
964 font-size: 13px;
965 padding: 2px 8px;
966 border-radius: 10px;
967 margin: 0;
968 line-height: 1.2;
969 display: inline-block;
970
971 &.everest-forms-badge-success {
972 background: $green;
973 color: $color-white;
974 }
975 }
976
977 /**
978 * Tabs
979 */
980 .everest-forms-tab {
981 ul {
982 display: flex;
983 flex-wrap: wrap;
984 margin: 0;
985
986 .everest-forms-tab-nav {
987 display: inline-flex;
988 margin: 0 8px 0 0;
989
990 .everest-forms-tab-nav-link {
991 font-weight: 600;
992 padding: 16px 8px;
993 color: $color_gray-base;
994 text-decoration: none;
995 border-bottom: 2px solid transparent;
996 }
997
998 &.active {
999 .everest-forms-tab-nav-link {
1000 color: $everestforms;
1001 border-color: $everestforms;
1002 }
1003 }
1004 }
1005 }
1006 }
1007
1008 /**
1009 * Form Setup
1010 */
1011 .everest-forms-builder-setup {
1012 #screen-meta-links {
1013 display: none;
1014 }
1015
1016 .jconfirm-everest-forms {
1017 .jconfirm-box {
1018 border-radius: 4px !important;
1019
1020 div.jconfirm-title-c {
1021 padding-bottom: 10px;
1022
1023 .jconfirm-icon-c {
1024 margin-bottom: 16px !important;
1025
1026 .dashicons {
1027 color: $color-white;
1028 font-size: 28px !important;
1029 height: 54px !important;
1030 width: 54px !important;
1031 border-radius: 50%;
1032 background: $red;
1033 line-height: 54px;
1034 }
1035 }
1036
1037 .jconfirm-title {
1038 font-size: 22px !important;
1039 font-weight: 600;
1040 }
1041 }
1042
1043 div.jconfirm-content {
1044 margin-bottom: 0 !important;
1045 }
1046 }
1047 }
1048
1049 .jconfirm-everest-forms-left {
1050 &.jconfirm-modern {
1051 .jconfirm-box {
1052 width: 500px !important;
1053 padding: 20px 30px 15px;
1054 border-radius: 4px !important;
1055
1056 .jconfirm-title-c {
1057 text-align: left;
1058 font-size: 20px;
1059 font-weight: 400;
1060 padding-bottom: 0;
1061 line-height: 1.8;
1062
1063 .jconfirm-icon-c {
1064 margin: 0;
1065 }
1066 }
1067
1068 .jconfirm-content {
1069 text-align: left;
1070 margin-bottom: 0;
1071
1072 input[type="text"]="text""] {
1073 margin: 5px 2px 2px;
1074 padding: 5px 10px;
1075
1076 &:focus {
1077 border-color: #007cba;
1078 box-shadow: 0 0 0 1px #007cba;
1079 }
1080 }
1081 }
1082
1083 .jconfirm-buttons {
1084 text-align: right;
1085
1086 .everest-forms-btn {
1087 font-weight: 400;
1088 text-transform: none
1089 }
1090 }
1091 }
1092 }
1093 }
1094
1095 .everest-forms-recommend-addons {
1096 margin-top: 20px;
1097 padding-top: 16px;
1098 border-top: 2px solid $color_gray-more-lighten;
1099
1100 .bulk-action-notice {
1101 margin: 0 0 20px;
1102
1103 p {
1104 padding: 0;
1105 margin: 8px 0 !important;
1106 }
1107
1108 &.notice-error {
1109 .button-link {
1110 text-decoration: none;
1111 display: flex;
1112 align-items: center;
1113 margin-top: 8px;
1114
1115 .toggle-indicator {
1116 display: inline-flex;
1117 }
1118 }
1119
1120 .bulk-action-errors {
1121 margin-top: 0;
1122 }
1123 }
1124 }
1125
1126 .plugins-list-table {
1127 border-radius: 4px;
1128
1129 .plugin-status {
1130 float: right;
1131
1132 span {
1133 width: 20px;
1134 height: 20px;
1135 overflow: hidden;
1136 border-radius: 50%;
1137 position: relative;
1138 vertical-align: top;
1139 white-space: nowrap;
1140 text-indent: -9999px;
1141 display: inline-block;
1142 border: 2px solid $color_gray-lighten;
1143
1144 &.active,
1145 &.activate-now {
1146 &::after {
1147 position: absolute;
1148 left: 50%;
1149 top: 50%;
1150 opacity: 1;
1151 width: 34%;
1152 height: 50%;
1153 content: '';
1154 transform-origin: left top;
1155 border-top: 2px solid $color_gray-lighten;
1156 border-right: 2px solid $color_gray-lighten;
1157 transform: scaleX(-1) rotate(135deg) translate(-58%,-40%);
1158 }
1159 }
1160
1161 &.activate-now {
1162 border-color: $color_gray-lighten;
1163
1164 &.updating-message {
1165 border-color: $color_gray-lighten;
1166 border-left-color: $green;
1167 }
1168 }
1169
1170 &.active {
1171 border-color: $green;
1172
1173 &::after {
1174 border-top: 2px solid $green;
1175 border-right: 2px solid $green;
1176 }
1177 }
1178
1179 &.updating-message {
1180 border-left-color: $green;
1181 animation: spin .75s linear infinite;
1182
1183 &:after {
1184 content: none;
1185 }
1186 }
1187 }
1188 }
1189 }
1190
1191 .everest-forms-template-install-addon {
1192 margin-top: 20px;
1193 }
1194 }
1195
1196 .everest-forms {
1197 border-radius: 4px;
1198
1199 * {
1200 box-sizing: border-box;
1201 }
1202
1203 span {
1204 display: inline-block;
1205 }
1206
1207 .everest-forms-loader-overlay {
1208 background: transparentize($color_gray-dark, 0.25);
1209 position: fixed;
1210 left: 0;
1211 right: 0;
1212 top: 0;
1213 bottom: 0;
1214 z-index: 9;
1215
1216 .evf-loading {
1217 margin: 0 auto;
1218 position: absolute;
1219 left: 0;
1220 right: 0;
1221 top: 50%;
1222 transform: translateY(-50%);
1223 }
1224 }
1225
1226 .everest-forms-setup {
1227 font-size: 14px;
1228 max-width: calc(100% - 32px);
1229 margin: 20px auto;
1230 background: $color-white;
1231
1232 @media (min-width: 960px) {
1233 max-width: 835px;
1234 }
1235
1236 @media (min-width: 1280px) {
1237 max-width: 1100px;
1238 }
1239
1240 a {
1241 &:focus {
1242 box-shadow: none;
1243 }
1244 }
1245
1246 .everest-forms-setup-header {
1247 display: flex;
1248 flex-wrap: wrap;
1249 align-items: center;
1250 padding: 0 16px;
1251 background-color: $color-white;
1252 border-bottom: 1px solid $color_gray-lighten;
1253
1254 @media only screen and (max-width: 768px) {
1255 padding-top: 16px;
1256 }
1257
1258
1259 .everest-forms-logo {
1260 display: flex;
1261 flex-wrap: wrap;
1262 padding-right: 1em;
1263 border-right: 1px solid $color_gray-lighten;
1264 margin-right: 1em;
1265 }
1266
1267 .page-title-action {
1268 top: 0;
1269 margin-left: 16px;
1270 }
1271
1272 h4 {
1273 margin: 0;
1274 }
1275
1276 .everest-forms-tab {
1277 margin-left: auto;
1278
1279 @media only screen and (max-width: 768px) {
1280 width: calc(100% + 32px);
1281 flex: 0 0 calc(100% + 32px);
1282 margin-top: 16px;
1283 margin-right: -16px;
1284 margin-left: -16px;
1285 border-top: 1px solid $color_gray-lighten;
1286 }
1287 }
1288 }
1289 }
1290
1291 .everest-forms-setup-form-name {
1292 padding: 15px 20px;
1293 border-bottom: 1px solid $color_gray-lighten;
1294
1295 .everest-forms-setup-name {
1296 margin-left: 40px;
1297 padding: 10px;
1298 height: 35px;
1299 width: 400px;
1300
1301 &.everest-forms-required {
1302 border-color: $red;
1303 box-shadow: 0 0 2px rgba(175, 0, 0, 0.8);
1304 }
1305 }
1306 }
1307
1308 .evf-setup-title {
1309 width: auto;
1310 font-size: 24px;
1311 line-height: 34px;
1312 font-weight: 600;
1313 color: $color_gray-dark;
1314 padding: 15px 20px 10px;
1315
1316 p.desc {
1317 font-weight: normal;
1318 }
1319 }
1320
1321 .evf-setup-templates {
1322 display: flex;
1323 flex-wrap: wrap;
1324 padding: 8px;
1325
1326 .evf-loading {
1327 margin: 80px auto;
1328 }
1329
1330 .evf-template {
1331 width: 100%;
1332 background: $color-white;
1333 border-radius: 4px;
1334 position: relative;
1335 margin: 12px;
1336
1337 @media (min-width: 400px) {
1338 width: calc(50% - 24px);
1339 flex: 0 0 calc(50% - 24px);
1340 }
1341
1342 @media only screen and (min-width: 768px) {
1343 width: calc(33.333% - 24px);
1344 flex: 0 0 calc(33.333% - 24px);
1345 }
1346
1347 @media (min-width: 960px) {
1348 width: calc(25% - 24px);
1349 flex: 0 0 calc(25% - 24px);
1350 }
1351
1352 .everest-forms-screenshot {
1353 cursor: pointer;
1354 padding: 8px;
1355 margin: 0;
1356 min-height: auto;
1357 position: relative;
1358 border-radius: 4px;
1359 background: $color_gray-more-lighten;
1360
1361 @media only screen and (min-width: 1280px) {
1362 min-height: 280px;
1363 }
1364
1365 .everest-forms-badge {
1366 position: absolute;
1367 bottom: 16px;
1368 right: 16px;
1369 z-index: 1;;
1370 }
1371
1372 .form-action {
1373 display: none;
1374 position: absolute;
1375 left: 0;
1376 right: 0;
1377 top: 50%;
1378 transform: translateY(-50%);
1379 z-index: 1;
1380
1381 .everest-forms-btn {
1382 &.everest-forms-btn-secondary {
1383 background: $color-white;
1384 }
1385
1386 &:last-child {
1387 margin-left: 8px;
1388 }
1389 }
1390 }
1391 }
1392
1393 img {
1394 display: block;
1395 width: 100%;
1396 }
1397
1398 .everest-forms-form-id-container {
1399 display: flex;
1400 flex-wrap: wrap;
1401 align-items: center;
1402 justify-content: space-between;
1403 position: relative;
1404
1405 .everest-forms-template-name {
1406 font-size: 16px;
1407 font-weight: 500;
1408 margin: 16px 0;
1409 color: $color_gray-base;
1410 text-decoration: none;
1411
1412 &:hover {
1413 color: $everestforms;
1414 }
1415 }
1416 }
1417
1418 &:hover {
1419 .everest-forms-screenshot::after {
1420 content: '';
1421 display: block;
1422 background: transparentize($color_gray-base, 0.5);
1423 position: absolute;
1424 top: 0;
1425 left: 0;
1426 bottom: 0;
1427 right: 0;
1428 }
1429
1430 .form-action {
1431 display: flex;
1432 align-items: center;
1433 justify-content: center;
1434 }
1435
1436 }
1437
1438 &:nth-child(even) {
1439 float: right;
1440 }
1441
1442 .evf-template-overlay {
1443 position: absolute;
1444 background-color: rgba(0, 0, 0, 0.5);
1445 top: 0;
1446 left: 0;
1447 right: 0;
1448 bottom: 0;
1449 opacity: 0;
1450 visibility: hidden;
1451 transition: 0.5s background-color ease-in-out;
1452 color: $color-white;
1453 text-align: center;
1454 padding: 40% 0;
1455
1456 .evf-template-select {
1457 text-decoration: none;
1458 }
1459
1460 &.loading {
1461 .evf-button,
1462 .evf-button::before,
1463 .evf-button::after {
1464 background: $color-white;
1465 -webkit-animation: load1 1s infinite ease-in-out;
1466 animation: load1 1s infinite ease-in-out;
1467 width: 1em;
1468 height: 4em;
1469 padding: 0;
1470 border-radius: 0;
1471 }
1472 .evf-button {
1473 color: $color-white;
1474 text-indent: -9999em;
1475 margin: 0 auto;
1476 position: relative;
1477 font-size: 11px;
1478 -webkit-transform: translateZ(0);
1479 -ms-transform: translateZ(0);
1480 transform: translateZ(0);
1481 -webkit-animation-delay: -0.16s;
1482 animation-delay: -0.16s;
1483 }
1484 .evf-button::before,
1485 .evf-button::after {
1486 position: absolute;
1487 top: 0;
1488 content: '';
1489 }
1490 .evf-button::before {
1491 left: -1.5em;
1492 -webkit-animation-delay: -0.32s;
1493 animation-delay: -0.32s;
1494 }
1495 .evf-button::after {
1496 left: 1.5em;
1497 }
1498 @-webkit-keyframes load1 {
1499 0%,
1500 80%,
1501 100% {
1502 box-shadow: 0 0;
1503 height: 4em;
1504 }
1505 40% {
1506 box-shadow: 0 -2em;
1507 height: 5em;
1508 }
1509 }
1510 @keyframes load1 {
1511 0%,
1512 80%,
1513 100% {
1514 box-shadow: 0 0;
1515 height: 4em;
1516 }
1517 40% {
1518 box-shadow: 0 -2em;
1519 height: 5em;
1520 }
1521 }
1522
1523 }
1524 }
1525
1526 &:hover .evf-template-overlay,
1527 .evf-template-overlay.loading {
1528 opacity: 1;
1529 visibility: visible;
1530 }
1531
1532 .evf-button {
1533 display: inline-block;
1534 padding: 15px 22px;
1535 background-color: $color-white;
1536 color: #000;
1537 font-size: 12px;
1538 text-transform: uppercase;
1539 border: none;
1540 border-radius: 100px;
1541 }
1542 }
1543 }
1544 }
1545 }
1546
1547 /**
1548 * Form Builder
1549 **/
1550 #everest-forms-panel-settings {
1551 .evf-content-section {
1552 display: none;
1553 }
1554
1555 .evf-content-section.active {
1556 display: block;
1557 }
1558 }
1559
1560 #everest-forms-panel-payments,
1561 #everest-forms-panel-integrations {
1562 .evf-panel-content-section {
1563 display: none;
1564 }
1565
1566 .evf-panel-content-section.active {
1567 display: block;
1568 }
1569 }
1570
1571 .everest-forms_page_evf-builder {
1572 .everest-forms-add-fields-group,
1573 .everest-forms-field-option-group {
1574 .handlediv {
1575 float: right;
1576
1577 &::before {
1578 content: '\f142' !important;
1579 cursor: pointer;
1580 display: inline-block;
1581 font: 400 20px/1 Dashicons;
1582 line-height: 0.5 !important;
1583 padding: 4px;
1584 position: relative;
1585 right: 0;
1586 top: 0;
1587 }
1588 }
1589
1590 &.closed {
1591 .handlediv::before {
1592 content: '\f140' !important;
1593 }
1594 }
1595 }
1596
1597 #everest-forms-builder {
1598 width: 100%;
1599 position: absolute;
1600 top: 0;
1601 bottom: 0;
1602 min-height: calc(100vh - 32px);
1603
1604 * {
1605 box-sizing: border-box;
1606 }
1607
1608 .wp-picker-holder * {
1609 box-sizing: content-box;
1610 }
1611
1612 #everest-forms-builder-form {
1613 position: fixed;
1614 }
1615
1616 h2,
1617 h3,
1618 h4,
1619 h5,
1620 h6 {
1621 color: $color_gray-dark;
1622 }
1623
1624 a {
1625 text-decoration: none;
1626
1627 &:focus {
1628 outline: none;
1629 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
1630 }
1631 }
1632
1633 .add,
1634 .remove,
1635 .addPayment,
1636 .removePayment {
1637 color: $color_gray-normal;
1638 background: $color-white;
1639 height: 30px;
1640 width: 30px;
1641 display: flex;
1642 align-items: center;
1643 justify-content: center;
1644
1645 &:hover {
1646 color: $color-white;
1647 }
1648 }
1649
1650 .after-label-description {
1651 float: right;
1652 }
1653
1654 input,
1655 select,
1656 option,
1657 textarea {
1658 border-color: $color_gray-lighten;
1659
1660 &::placeholder {
1661 color: $color_gray-light;
1662 }
1663
1664 &:focus {
1665 border-color: #5b9dd9;
1666 }
1667 }
1668
1669 .everest-forms-inner-options {
1670 padding-left: 20px;
1671 }
1672
1673 .input-group-col-2 {
1674 display: flex;
1675 flex-wrap: wrap;
1676
1677 input[type='text']='text'],
1678 select {
1679 flex: 0 0 50%;
1680 margin-right: 2%;
1681 margin-bottom: 10px;
1682 max-width: calc(50% - 1%);
1683
1684 &:nth-child(2n) {
1685 margin-right: 0;
1686 }
1687 }
1688 }
1689
1690 .everest-forms-nav-wrapper {
1691 background-color: $everestforms;
1692
1693 nav.evf-nav-tab-wrapper {
1694 margin: 0;
1695 float: left;
1696 padding-right: 30px;
1697 width: calc(100% - 505px);
1698 }
1699
1700 .everest-forms-btn {
1701 &:focus {
1702 box-shadow: 0 0 0 3px adjust-color($everestforms, $saturation: 39%, $lightness: +18%);
1703 }
1704 }
1705
1706 .evf-forms-nav-right {
1707 float: right;
1708 width: 505px;
1709 text-align: right;
1710 padding: 21px 30px 19px;
1711
1712 .evf-shortcode-field {
1713 display: inline-block;
1714 vertical-align: middle;
1715
1716 input {
1717 margin: 0;
1718 width: 225px;
1719 height: 36px;
1720 padding: 4px 10px;
1721 line-height: 1.25;
1722 border-radius: 3px 0 0 3px;
1723 }
1724
1725 button {
1726 padding: 0;
1727 width: 36px;
1728 height: 36px;
1729 margin-left: -4px;
1730 border-radius: 0 3px 3px 0;
1731 background-color: lighten($everestforms, 7%);
1732
1733 &.copy-shortcode {
1734 font-size: 16px;
1735 color: $color-white;
1736
1737 &::before {
1738 @include iconbefore( '\e00c');
1739 line-height: 27px;
1740 margin-right: 0;
1741 padding-right: 0;
1742 border-right: none;
1743 }
1744 }
1745
1746 &:focus {
1747 box-shadow: none;
1748 }
1749 }
1750 }
1751
1752 .everest-forms-save-button {
1753 width: 75px;
1754 cursor: pointer;
1755 min-height: 36px;
1756 color: $color-white;
1757 background: $green;
1758 margin-left: 10px;
1759 position: relative;
1760 display: inline-block;
1761 vertical-align: middle;
1762 text-transform: uppercase;
1763
1764 &.processing {
1765 width: 75px;
1766 font-size: 0;
1767 min-height: 36px;
1768 transition: all 0.35s ease 0s;
1769
1770 &:focus {
1771 box-shadow: 0 0 0 2px adjust-color($everestforms, $saturation: 39%, $lightness: +18%);
1772 }
1773 }
1774
1775 .loading-dot {
1776 position: absolute;
1777 top: 50%;
1778 transform: translateY(-50%);
1779 left: 0;
1780 right: 0;
1781 margin: 0 auto;
1782 }
1783
1784 .spinner,
1785 .evf-loading {
1786 width: 14px;
1787 height: 14px;
1788 margin-top: 5px !important;
1789 margin-left: 5px !important;
1790 background-size: 14px 14px;
1791 }
1792
1793 &:hover {
1794 background: darken($green, 10%);
1795 }
1796 }
1797
1798 .everest-forms-preview-button {
1799 background: $color-white;
1800 margin-left: 10px;
1801 display: inline-block;
1802 vertical-align: middle;
1803
1804 &:hover {
1805 background: transparentize($color-white, 0.1);
1806 }
1807 }
1808 }
1809 }
1810
1811 .evf-tab-content {
1812 h5 {
1813 margin: 0 auto 20px auto;
1814 font-size: 24px;
1815 line-height: normal;
1816 }
1817
1818 .evf_smart_tag,
1819 .everest-forms-field-option-row-default_value {
1820
1821 input[type='text']='text'] {
1822 width: calc(100% - 34px);
1823 min-height: 27px;
1824 }
1825 }
1826
1827 .evf-toggle-smart-tag-display {
1828 right: 0;
1829 width: 30px;
1830 min-height: 30px;
1831 color: $color_gray-base;
1832 position: absolute;
1833 background: $color-white;
1834 border: 1px solid $color_gray-lighten;
1835 border-radius: 4px;
1836 box-shadow: inset 0 1px 2px transparentize($color_gray-dark, 0.9);
1837
1838 .dashicons-editor-code {
1839 &::before {
1840 left: 0;
1841 right: 0;
1842 margin: 0 auto;
1843 line-height: 28px;
1844 position: absolute;
1845 }
1846 }
1847 }
1848
1849 .evf-smart-tag-lists {
1850 right: 0;
1851 z-index: 1;
1852 max-height: 123px;
1853 margin-top: -1px;
1854 width: 230px;
1855 overflow-y: auto;
1856 position: absolute;
1857 background: $color-white;
1858 border-radius: 4px;
1859 border: 1px solid $color_gray-lighten;
1860 box-shadow: 1px 3px 20px 0 transparentize($color_gray-dark, 0.8);
1861
1862 li,
1863 .smart-tag-title {
1864 padding: 7px 10px;
1865 }
1866
1867 .smart-tag-title {
1868 font-weight: 600;
1869 background: $color_gray-light-skin;
1870 border-bottom: 1px solid $color_gray-lighten;
1871 }
1872
1873 ul {
1874 margin: 0;
1875 }
1876
1877 li {
1878 cursor: pointer;
1879 margin-bottom: 0;
1880
1881 &:hover {
1882 background: $color_gray-light-skin;
1883 }
1884 }
1885 }
1886
1887 &.everest-forms-panel-field-textarea {
1888 .evf-smart-tag-lists {
1889 top: 40%;
1890 }
1891 }
1892
1893 .everest-forms-panel {
1894 width: 100%;
1895 display: none;
1896
1897 &.active {
1898 display: block;
1899 }
1900
1901 .everest-forms-sub-label {
1902 font-size: 12px;
1903 font-weight: 400;
1904 margin-bottom: 0;
1905 color: $color_gray-base;
1906 }
1907
1908 .everest-forms-panel-sidebar-content {
1909 display: flex;
1910
1911 .everest-forms-panel-content-wrap {
1912 width: calc(100% - 400px);
1913 }
1914 }
1915
1916 .everest-forms-one-half {
1917 float: left;
1918 width: 49%;
1919 margin-right: 2%;
1920
1921 &:nth-child(2) {
1922 margin-right: 0;
1923 }
1924 }
1925
1926 .everest-forms-field-row {
1927 margin: 0 0 10px 0;
1928 position: relative;
1929 }
1930
1931 .everest-forms-panel-sidebar {
1932 width: 400px;
1933 height: calc(100vh - 150px);
1934 position: relative;
1935 background-color: $color_gray-light-skin;
1936 border-right: 1px solid $color_gray-lighten;
1937
1938 .everest-forms-add-fields-heading {
1939 display: block;
1940 font-size: 14px;
1941 font-weight: 500;
1942 margin-bottom: 15px;
1943 padding-bottom: 15px;
1944 color: $color_gray-dark;
1945 border-bottom: 1px solid $color_gray-lighten;
1946
1947 i {
1948 float: right;
1949 font-size: 14px;
1950 margin-left: 5px;
1951 line-height: 1.5;
1952 }
1953 }
1954
1955 .evf-registered-buttons {
1956 margin-right: -1.5%;
1957 margin-left: -1.5%;
1958 list-style: none;
1959 padding: 0;
1960 display: flex;
1961 flex-wrap: wrap;
1962 }
1963
1964 .evf-registered-item {
1965 margin-left: 1.5%;
1966 margin-right: 1.5%;
1967 padding: 20px 8px;
1968 border: 1px solid $color_gray-lighten;
1969 width: 30.3%;
1970 z-index: 999;
1971 margin-bottom: 10px;
1972 color: $color_gray-light;
1973 cursor: pointer;
1974 border-radius: 4px;
1975 font-size: 12px;
1976 transition: 0.5s color ease-in-out, 0.5s border-color ease-in-out;
1977 text-align: center;
1978 background-color: $color-white;
1979
1980 .dashicons {
1981 display: block;
1982 margin: 0 auto;
1983 }
1984
1985 &.upgrade-modal,
1986 &.enable-stripe-model {
1987 opacity: 0.45;
1988 }
1989
1990 &:hover {
1991 color: $blue;
1992 border-color: $blue;
1993
1994 .evf-icon {
1995 color: inherit;
1996 }
1997
1998 svg {
1999 .cls-1,
2000 .cls-2,
2001 .cls-3 {
2002 fill: $blue;
2003 }
2004 }
2005 }
2006
2007 &:focus {
2008 outline: none;
2009 }
2010
2011 svg {
2012 width: 40px;
2013 height: 40px;
2014 display: block;
2015 margin: 0 auto 10px;
2016
2017 .cls-1,
2018 .cls-2,
2019 .cls-3 {
2020 fill: #414042;
2021 transition: 0.5s fill ease-in-out;
2022 font-size: 7px;
2023 font-weight: 300;
2024 }
2025 }
2026
2027 &.ui-draggable-dragging {
2028 margin: 0;
2029 width: 105px !important;
2030 background-color: $color-white;
2031 position: relative;
2032 z-index: 99999;
2033
2034 svg {
2035 .cls-1,
2036 .cls-2,
2037 .cls-3 {
2038 fill: $blue;
2039 }
2040 }
2041 }
2042 }
2043
2044 .evf-setting--checkbox,
2045 .evf-field-option--checkbox {
2046 input,
2047 label {
2048 width: auto;
2049 padding: 0;
2050 display: inline-block;
2051 vertical-align: top;
2052 height: auto;
2053 }
2054
2055 input {
2056 margin: 3px 5px 0 0;
2057 }
2058 }
2059
2060 .everest-forms-field-options {
2061 display: none;
2062
2063 .everest-forms-border-container {
2064 .everest-forms-field-option-row {
2065 &.everest-forms-field-option-row-date_format {
2066 > .inline {
2067 margin-left: 0;
2068 margin-right: 10px;
2069
2070 &:last-child {
2071 margin-right: 0;
2072 }
2073 }
2074 }
2075
2076 &:last-child {
2077 margin-bottom: 15px;
2078 }
2079 }
2080 }
2081
2082 .everest-forms-field-option-row {
2083 position: relative;
2084 margin-bottom: 15px;
2085
2086 &:last-child {
2087 margin-bottom: 0;
2088 }
2089
2090 .inline {
2091 margin-bottom: 0;
2092 display: inline-block;
2093 vertical-align: top;
2094 margin-left: 5px;
2095 }
2096
2097 .everest-forms-current-date-format,
2098 .everest-forms-min-max-date-format {
2099 margin-bottom: 14px;
2100 }
2101
2102 &.everest-forms-field-option-row-limit_controls {
2103 display: flex;
2104 align-items: center;
2105
2106 input[type="number"]="number""] {
2107 width: 30%;
2108 margin-right: 8px;
2109 }
2110
2111 select {
2112 min-height: 30px;
2113 }
2114
2115 &.everest-forms-hidden {
2116 display: none;
2117 }
2118 }
2119 }
2120
2121 .everest-forms-field-option {
2122 display: none;
2123
2124 // Email/Password Confirmation.
2125 &.everest-forms-confirm-disabled {
2126 .everest-forms-field-option-row-sublabel_hide,
2127 .everest-forms-field-option-row-confirmation_placeholder {
2128 display: none;
2129 }
2130 }
2131 }
2132
2133 .everest-forms-field-option-phone {
2134 .format-selected-smart {
2135 display: none;
2136 }
2137
2138 .format-selected-default {
2139 .everest-forms-field-option-row {
2140 margin-bottom: 15px;
2141 }
2142 }
2143 }
2144
2145 .everest-forms-field-option-group {
2146 &.everest-forms-field-option-group-basic {
2147 .everest-forms-field-option-group-toggle {
2148 padding-top: 0;
2149 }
2150 }
2151
2152 &:last-child {
2153 .everest-forms-field-option-group-inner {
2154 border-bottom: none;
2155 }
2156 }
2157 }
2158
2159 .everest-forms-field-option-group-toggle {
2160 background-color: $color_gray-light-skin;
2161 border-bottom: 1px solid $color_gray-lighten;
2162 padding: 15px 0;
2163 font-size: 14px;
2164 font-weight: 600;
2165 display: block;
2166 color: $color_gray-dark;
2167 }
2168
2169 .everest-forms-field-option-group-inner {
2170 padding: 15px 0;
2171 border-bottom: 1px solid $color_gray-lighten;
2172 }
2173 }
2174
2175 .evf-panel-tab {
2176 display: flex;
2177 align-items: center;
2178 justify-content: space-between;
2179 padding: 15px 20px;
2180 font-size: 14px;
2181 font-weight: 600;
2182 color: $color_gray-dark;
2183 background-color: adjust-color($color_gray-more-lighten, $saturation: -1, $lightness: +2);
2184 border-bottom: 1px solid $color_gray-lighten;
2185
2186 .everest-forms-toggle-arrow {
2187 font-size: 14px;
2188 margin-left: auto;
2189 line-height: 1.4;
2190 }
2191
2192 &.active {
2193 position: relative;
2194 color: $everestforms;
2195 background-color: $color-white;
2196 }
2197 }
2198
2199 .everest-forms-active-connections,
2200 .everest-forms-active-email {
2201 display: none;
2202 padding: 0 20px;
2203 margin-top: -2px;
2204 background: $color-white;
2205 position: relative;
2206 border-bottom: 1px solid $color_gray-lighten;
2207
2208 &.active {
2209 display: flex;
2210 align-items: flex-end;
2211 flex-direction: column-reverse;
2212
2213 &.everest-forms-hidden {
2214 display: none;
2215 }
2216 }
2217
2218 .everest-forms-connections-add,
2219 .everest-forms-email-add {
2220 margin-bottom: 20px;
2221 }
2222
2223 .everest-forms-active-connections-list,
2224 .everest-forms-active-email-connections-list {
2225 width: 100%;
2226 padding: 20px;
2227 display: flex;
2228 flex-wrap: wrap;
2229 margin: 0 0 20px;
2230 border-radius: 4px;
2231 border: 1px solid $color_gray-lighten;
2232
2233 &.empty-list {
2234 display: none;
2235 }
2236
2237 h4 {
2238 margin-top: 0;
2239 }
2240
2241 li {
2242 width: 100%;
2243 display: flex;
2244 padding: 10px;
2245 cursor: pointer;
2246 margin-bottom: -1px;
2247 align-items: center;
2248 justify-content: space-between;
2249 transition: all 0.25s ease 0s;
2250 border: 1px solid $color_gray-lighten;
2251
2252 &.active-user {
2253 background: $color-white;
2254
2255 .user-nickname {
2256 color: $everestforms;
2257 transition: all 0.25s ease 0s;
2258 }
2259 }
2260
2261 &:hover {
2262 .user-nickname {
2263 color: $everestforms;
2264 }
2265 }
2266
2267 .user-nickname {
2268 color: $color_gray-base;
2269 font-weight: 600;
2270 }
2271
2272 .toggle-remove {
2273 color: $color_gray-base;
2274 cursor: pointer;
2275 position: relative;
2276 padding-left: 13px;
2277 transition: all 0.25s ease 0s;
2278
2279 &:hover {
2280 color: $red;
2281
2282 &::before,
2283 &::after {
2284 background: $red;
2285 }
2286 }
2287
2288 &::before,
2289 &::after {
2290 top: 50%;
2291 left: 3px;
2292 width: 2px;
2293 content: '';
2294 height: 10px;
2295 position: absolute;
2296 background: $color_gray-base;
2297 display: inline-block;
2298 transition: all 0.25s ease 0s;
2299 }
2300
2301 &::before {
2302 transform: translateY(-50%) rotate(45deg);
2303 }
2304
2305 &::after {
2306 transform: translateY(-50%) rotate(-45deg);
2307 }
2308 }
2309 }
2310 }
2311 }
2312 }
2313
2314 .everest-forms-field-option-date-time {
2315 .format-selected-date .everest-forms-time,
2316 .format-selected-time .everest-forms-date {
2317 display: none;
2318 }
2319 }
2320
2321 .everest-forms-field-captcha {
2322 .format-selected-math {
2323 font-size: 16px;
2324
2325 input {
2326 width: 70px;
2327 display: inline-block;
2328 }
2329 }
2330
2331 .format-selected-math .everest-forms-question,
2332 .format-selected-question .everest-forms-equation {
2333 display: none;
2334 }
2335 }
2336
2337 .everest-forms-field-option-address {
2338 .default,
2339 .placeholder {
2340 width: 44%;
2341 float: left;
2342 margin-right: 2%;
2343
2344 input {
2345 width: 99%;
2346 }
2347
2348 label {
2349 font-weight: 400;
2350 }
2351 }
2352
2353 .hide {
2354 input {
2355 margin: 7px 0 0 0;
2356 }
2357 }
2358 }
2359 }
2360
2361 .everest-forms-panel-content-wrap {
2362 .evf-admin-row {
2363 display: flex;
2364 position: relative;
2365 margin-bottom: 15px;
2366 background-color: transparent;
2367 border: 1px solid transparent;
2368 transition: 0.5s border, 0.5s background-color;
2369
2370 &:last-child {
2371 margin-bottom: 0;
2372 }
2373
2374 .evf-toggle-row {
2375 top: 0;
2376 right: 0;
2377 opacity: 0;
2378 display: flex;
2379 cursor: pointer;
2380 position: absolute;
2381 visibility: hidden;
2382 color: $color-white;
2383 transition: 0.7s all;
2384 z-index: 9999;
2385
2386 .evf-show-grid {
2387 &:hover {
2388 span {
2389 &.dashicons {
2390 background-color: $green;
2391 }
2392 }
2393 }
2394 }
2395
2396 .evf-delete-row {
2397 span {
2398 &.dashicons {
2399 border-radius: 0 0 0 3px;
2400 border-right: 1px solid transparentize($color-white, 0.8);
2401 }
2402 }
2403
2404 &:hover {
2405 span {
2406 &.dashicons {
2407 background-color: $red;
2408 }
2409 }
2410 }
2411 }
2412
2413 span {
2414
2415 &.dashicons {
2416 background: $color_gray-base;
2417 font-size: 14px;
2418 height: auto;
2419 width: auto;
2420 color: $color-white;
2421 padding: 5px;
2422 }
2423 }
2424
2425 .evf-toggle-row-content {
2426 display: none;
2427 position: absolute;
2428 width: 160px;
2429 padding: 20px;
2430 text-align: center;
2431 right: -10px;
2432 border-radius: 5px;
2433 background-color: $color-white;
2434 font-weight: 600;
2435 font-size: 12px;
2436 top: 35px;
2437 transition: 0.9s background-color;
2438 border: 1px solid $color-gray-lighten;
2439 box-shadow: 1px 2px 10px 0 transparentize($color_gray-dark, 0.85);
2440
2441 &::before,
2442 &::after {
2443 content: '';
2444 position: absolute;
2445
2446 }
2447
2448 &::before {
2449 top: -7px;
2450 right: 14px;
2451 border-right: 7px solid transparent;
2452 border-bottom: 7px solid $color-white;
2453 border-left: 7px solid transparent;
2454 }
2455
2456 &::after {
2457 top: -8px;
2458 right: 12px;
2459 border-right: 9px solid transparent;
2460 border-bottom: 9px solid $color-gray-lighten;
2461 border-left: 9px solid transparent;
2462 z-index: -1;
2463 }
2464
2465 > span {
2466 color: $color_gray-base;
2467 display: block;
2468 }
2469
2470 small {
2471 color: $color_gray-light;
2472 margin-bottom: 10px;
2473 display: block;
2474 }
2475
2476 .evf-grid-selector {
2477 margin: 3px;
2478 width: 40px;
2479 height: 30px;
2480 display: inline-block;
2481 border: 1px solid $color_gray-lighten;
2482
2483 span {
2484 height: 100%;
2485 display: inline-block;
2486 background: $color-white;
2487
2488 &:nth-child(n+1) {
2489 border-left: 1px solid $color_gray-lighten;
2490 }
2491 &:nth-child(1) {
2492 border-left: 0 none;
2493 }
2494 }
2495
2496 &.active {
2497 border-color: $blue;
2498
2499 span {
2500 border-color: $blue;
2501
2502 }
2503 }
2504 }
2505 }
2506
2507 }
2508
2509 &.evf-hover {
2510 background-color: lighten($blue, 48%);
2511 border: 1px dashed $blue;
2512
2513 .evf-admin-grid {
2514 border: 1px dashed $color-gray-light;
2515 }
2516
2517 .evf-toggle-row {
2518 opacity: 1;
2519 visibility: visible;
2520 }
2521 }
2522
2523 .evf-admin-grid {
2524 margin: 10px;
2525 padding: 10px;
2526 cursor: pointer;
2527 background: $color-white;
2528 position: relative;
2529 border: 1px solid transparent;
2530 transition: 0.5s border, 0.5s background-color;
2531
2532 &.evf-hover {
2533 &.evf-item-hover {
2534 position: relative;
2535
2536 .everest-forms-field,
2537 .evf-registered-item {
2538 &:nth-last-child(2) {
2539 margin-bottom: 0;
2540
2541 &.active {
2542 margin-bottom: 10px;
2543 }
2544 }
2545 }
2546
2547 &::before {
2548 display: none;
2549 }
2550 }
2551 }
2552
2553 &.evf-grid-1 {
2554 width: 100%;
2555 }
2556
2557 &.evf-grid-2 {
2558 width: 50%;
2559 }
2560
2561 &.evf-grid-3 {
2562 width: 30%;
2563 }
2564
2565 .evf-registered-item {
2566 padding: 20px;
2567 font-size: 18px;
2568 min-height: 94px;
2569 margin-bottom: 10px;
2570
2571 &:last-child {
2572 margin-bottom: 0;
2573 }
2574
2575 &.ui-draggable {
2576 width: 100%;
2577
2578 .evf-icon {
2579 display: inline-block;
2580 }
2581 }
2582
2583 .evf-icon {
2584 font-size: 24px;
2585 vertical-align: middle;
2586 }
2587
2588 .spinner {
2589 float: none;
2590 width: 25px;
2591 height: 25px;
2592 margin: 10px 0 5px 10px;
2593 }
2594
2595 .dashicons {
2596 font-size: 22px;
2597 margin-top: 3px;
2598 }
2599 }
2600
2601 .ui-sortable-placeholder {
2602 width: 100%;
2603 visibility: visible !important;
2604 background-color: lighten($green, 42%);
2605 border: 1px dashed lighten($green, 15%);
2606 }
2607
2608 &.evf-empty-grid {
2609 display: flex;
2610 align-items: center;
2611 justify-content: center;
2612 position: relative;
2613 border: 1px dashed $color-gray-light;
2614
2615 &::before {
2616 content: '\f132';
2617 font-size: 40px;
2618 font-family: dashicons;
2619 line-height: 1.2;
2620 cursor: all-scroll;
2621 color: $color_gray-lighten;
2622 }
2623 }
2624 }
2625 }
2626
2627 .everest-forms-field-payment-single {
2628 .widefat,
2629 .item-price-hidden {
2630 display: none;
2631 }
2632 .item-price-hidden {
2633 margin: 0;
2634 color: #999;
2635 font-size: 12px;
2636 }
2637
2638 .format-selected-user {
2639 .widefat {
2640 display: block;
2641 }
2642 .item-price {
2643 display: none;
2644 }
2645 }
2646
2647 .format-selected-hidden {
2648 .item-price-hidden {
2649 display: block;
2650 }
2651 }
2652 }
2653
2654 .everest-forms-field {
2655 cursor: move;
2656 padding: 15px;
2657 position: relative;
2658 margin-bottom: 10px;
2659 border: 1px solid transparent;
2660 border-radius: 3px;
2661 transition: 0.5s box-shadow;
2662
2663 .everest-forms-image-choices {
2664 .everest-forms-image-choices-item {
2665 label {
2666 font-weight: normal;
2667 margin-bottom: 0;
2668 }
2669
2670 .everest-forms-image-choices-image {
2671 display: block;
2672 margin-bottom: 10px;
2673
2674 img {
2675 max-width: 100%;
2676 display: block;
2677 }
2678 }
2679 }
2680 }
2681
2682 // column layout for choice fields
2683 &.everest-forms-list-2-columns,
2684 &.everest-forms-list-3-columns {
2685 ul {
2686 display: flex;
2687 flex-wrap: wrap;
2688 margin-left: -15px;
2689 margin-right: -15px;
2690
2691 li {
2692 padding-left: 15px;
2693 padding-right: 15px;
2694 }
2695 }
2696 }
2697
2698 &.everest-forms-list-2-columns {
2699 li {
2700 flex: 0 0 50%;
2701 max-width: 50%;
2702
2703 &:nth-child(1n + 3) {
2704 margin-top: 10px;
2705 }
2706 }
2707 }
2708
2709 &.everest-forms-list-3-columns {
2710 li {
2711 flex: 0 0 33.333%;
2712 max-width: 33.333%;
2713
2714 &:nth-child(1n + 4) {
2715 margin-top: 10px;
2716 }
2717 }
2718 }
2719
2720 &.everest-forms-list-inline {
2721 ul {
2722 li {
2723 display: inline-block;
2724 margin-right: 15px;
2725 }
2726 }
2727 }
2728
2729 &:last-child {
2730 margin-bottom: 0;
2731 }
2732
2733 &.everest-forms-field--first,
2734 &.everest-forms-field--last {
2735 width: 48.5%;
2736 margin-right: 3%;
2737 float: left;
2738 }
2739
2740 &.everest-forms-field--last {
2741 margin-right: 0;
2742 float: right;
2743 }
2744
2745 &.active {
2746 margin: 0 0 10px;
2747 border: 1px solid $color_gray-lighten;
2748 background: $color_gray-light-skin;
2749
2750 .evf-field-action {
2751 opacity: 1;
2752 visibility: visible;
2753 }
2754
2755 &:last-child {
2756 margin-bottom: 0;
2757 }
2758 }
2759
2760 &.required label {
2761 .required {
2762 font-weight: 300;
2763 margin: 0 0 0 5px;
2764 display: inline-block;
2765 vertical-align: middle;
2766 }
2767 }
2768
2769 &.ui-sortable-placeholder {
2770 border: 1px dashed transparentize($blue, 0.75);
2771 }
2772
2773 &.label_hide {
2774 input[type="text"]="text""] {
2775 margin-bottom: 0;
2776 }
2777
2778 .description {
2779 margin-top: 5px;
2780
2781 &:empty {
2782 margin-top: 0;
2783 }
2784 }
2785 }
2786
2787 input {
2788 &[type='text']='text'],
2789 &[type='email']='email'] {
2790 margin-bottom: 5px;
2791 }
2792
2793 &[type='checkbox']='checkbox'],
2794 &[type='radio']='radio'] {
2795 margin-right: 10px;
2796 }
2797 }
2798
2799 option,
2800 select,
2801 textarea {
2802 margin-bottom: 5px;
2803 }
2804
2805 canvas {
2806 border: 1px solid rgba(222, 222, 222, 0.75);
2807 }
2808
2809 .evf-field-action {
2810 position: absolute;
2811 top: 15px;
2812 right: 15px;
2813 visibility: hidden;
2814 opacity: 0;
2815 transition: 0.5s all;
2816
2817 a {
2818 padding: 5px;
2819 color: $color-white;
2820 background: $color_gray-base;
2821 border-right: 1px solid transparentize($color-white, 0.8);
2822
2823 &:first-child {
2824 border-radius: 3px 0 0 3px;
2825 }
2826
2827 &:last-child {
2828 border-radius: 0 3px 3px 0;
2829 border-right: none;
2830 }
2831
2832 &.everest-forms-field-delete:hover {
2833 background-color: $red;
2834 }
2835
2836 &:hover {
2837 background-color: $blue;
2838 }
2839 }
2840
2841 .dashicons {
2842 font-size: 15px;
2843 height: auto;
2844 width: auto;
2845 }
2846 }
2847
2848 &.label_hide {
2849 .label-title {
2850 display: none;
2851 }
2852 }
2853
2854 &.sublabel_hide {
2855 .everest-forms-sub-label {
2856 display: none;
2857 }
2858 }
2859
2860 .everest-forms-confirm-enabled {
2861 display: flex;
2862
2863 .everest-forms-confirm-primary,
2864 .everest-forms-confirm-confirmation {
2865 width: 50%;
2866 flex-wrap: wrap;
2867 }
2868
2869 .everest-forms-confirm-primary {
2870 padding-right: 15px;
2871 }
2872
2873 .everest-forms-confirm-confirmation {
2874 padding-left: 15px;
2875 }
2876 }
2877
2878 .everest-forms-confirm-disabled {
2879 .everest-forms-confirm-primary {
2880 .everest-forms-sub-label {
2881 display: none;
2882 }
2883 }
2884
2885 .everest-forms-confirm-confirmation {
2886 display: none;
2887 }
2888 }
2889
2890 &:hover {
2891 border: 1px solid $color_gray-lighten;
2892
2893 .evf-field-action {
2894 visibility: visible;
2895 opacity: 1;
2896 }
2897 }
2898
2899 &.ui-sortable-helper {
2900 padding: 20px 30px;
2901 height: auto !important;
2902 left: -20px;
2903 right: -20px;
2904 background-color: $color-white;
2905
2906 &:hover {
2907 .evf-field-action {
2908 display: none;
2909 }
2910 }
2911 }
2912
2913 label {
2914 cursor: all-scroll;
2915 }
2916
2917 .primary-input {
2918 margin-bottom: 0;
2919 }
2920 }
2921
2922 .file-uploader {
2923 width: 100%;
2924 border: 2px dashed $color_gray-lighten;
2925 background-color: $color_gray-light-skin;
2926 border-radius: 3px;
2927 cursor: pointer;
2928 text-align: center;
2929 padding-top: 30px;
2930 padding-bottom: 30px;
2931 position: relative;
2932
2933 svg {
2934 width: 30px;
2935 height: 30px;
2936 fill: #bbbcbd;
2937 margin-bottom: 20px;
2938 }
2939
2940 input {
2941 &.file-input {
2942 touch-action: manipulation;
2943 max-width: 100%;
2944 min-width: 14px;
2945 margin: 0;
2946 opacity: 0;
2947 height: 18px;
2948 }
2949 }
2950
2951 .drop {
2952 display: block;
2953 font-size: 14px;
2954 font-weight: 600;
2955 color: $color_gray-light;
2956 margin-bottom: 10px;
2957 }
2958
2959 .or {
2960 font-size: 12px;
2961 color: $color-gray-light;
2962 font-weight: 500;
2963 display: block;
2964 margin-bottom: 10px;
2965
2966 }
2967
2968 .file-control {
2969 position: absolute;
2970 bottom: 30px;
2971 color: $blue;
2972 padding-bottom: 2px;
2973 display: block;
2974 left: 0;
2975 right: 0;
2976
2977 &::before {
2978 content: '';
2979 width: 45px;
2980 background-color: $blue;
2981 height: 1px;
2982 display: block;
2983 left: 50%;
2984 bottom: -2px;
2985 position: absolute;
2986 transform: translateX(-50%);
2987 }
2988 }
2989 }
2990
2991 .publishing-action {
2992 width: 100%;
2993 text-align: right;
2994 }
2995
2996 .submit-button {
2997 display: inline-block;
2998 font-size: 12px;
2999 font-weight: 600;
3000 color: $color-white;
3001 padding: 15px 20px;
3002 border: 0 none;
3003 background-color: $green;
3004 border-radius: 3px;
3005 }
3006 }
3007
3008 label {
3009 font-size: 13px;
3010 margin-bottom: 10px;
3011 color: $color_gray-base;
3012 display: block;
3013 font-weight: 600;
3014
3015 i {
3016 color: $color_gray-light;
3017 font-size: 16px;
3018 line-height: 1.2;
3019 }
3020
3021 .required {
3022 color: $red;
3023 display: none;
3024 }
3025
3026 input {
3027 &[type='checkbox']='checkbox'],
3028 &[type='radio']='radio'] {
3029 margin-right: 10px;
3030 }
3031 }
3032
3033 &.evf-toggle-switch {
3034 display: flex;
3035 margin-bottom: 0;
3036 }
3037
3038 &.everest-forms-hidden {
3039 display: none;
3040 }
3041 }
3042
3043 .everest-forms-label-edit {
3044 margin-bottom: 4px;
3045
3046 label {
3047 margin-bottom: 4px;
3048 padding: 4px 0;
3049 flex: 1;
3050 }
3051
3052 input {
3053 font-size: 13px;
3054 font-weight: 600;
3055 }
3056
3057 .dashicons {
3058 margin-right: 7px;
3059 }
3060 }
3061
3062 input:not(.ed_button),
3063 textarea:not(.wp-editor-area) {
3064 color: $color_gray-base;
3065
3066 &::placeholder {
3067 color: $color_gray-light;
3068 }
3069 }
3070
3071 textarea,
3072 textarea:not(.wp-editor-area) {
3073 height: 120px;
3074
3075 &.short {
3076 height: 60px;
3077 }
3078 }
3079
3080 .description {
3081 color: $color_gray-normal;
3082 }
3083
3084 .everest-forms-checklist {
3085 ul {
3086 label {
3087 margin-top: 0;
3088 margin-bottom: 0;
3089 font-weight: normal;
3090 }
3091 }
3092 }
3093
3094 .everest-forms-question {
3095 margin-top: 0;
3096 line-height: 1.2;
3097 }
3098
3099 .evf-grid-lists {
3100 margin-left: -1.5%;
3101 margin-right: 1.5%;
3102 background-color: $color_gray-light-skin;
3103 display: flex;
3104
3105 .evf-grid-lists-item {
3106 padding-left: 1.5%;
3107 padding-right: 1.5%;
3108 background-color: $color-white;
3109 }
3110 }
3111
3112 .evf-content-section-title {
3113 font-size: 24px;
3114 font-weight: 500;
3115 line-height: 1.5;
3116 margin-bottom: 20px;
3117 padding-bottom: 20px;
3118 display: flex;
3119 align-items: center;
3120 color: $color_gray-dark;
3121 border-bottom: 1px solid $color_gray-lighten;
3122
3123 .evf-title {
3124 margin-right: 20px;
3125 }
3126
3127 .evf-toggle-section {
3128 margin-top: 2px;
3129 }
3130 }
3131
3132 .everest-forms-panel-field {
3133 position: relative;
3134 margin-bottom: 20px;
3135
3136 .wp-editor-container {
3137 margin-bottom: 10px;
3138 }
3139
3140 .desc {
3141 margin: 10px 0;
3142 font-style: italic;
3143 line-height: 1.2;
3144 }
3145
3146 &.everest-forms-panel-field-tinymce {
3147 .evf-toggle-smart-tag-display {
3148 top: 34px;
3149 right: 5px;
3150 border: 1px solid $color_gray-lighten;
3151 }
3152
3153 .evf-smart-tag-lists {
3154 top: 70px;
3155 }
3156 }
3157
3158 &.evf_conditional_logic_container {
3159 label {
3160 margin-bottom: 0;
3161 display: inline-block;
3162 }
3163 }
3164 }
3165
3166 .evf-choices-list {
3167 background: $color_gray-more-lighten;
3168 border-radius: 4px;
3169 padding: 1px 8px;
3170
3171 .sort {
3172 cursor: grab;
3173 display: flex;
3174 margin-top: 6px;
3175 padding-right: 6px;
3176 color: $color_gray-light;
3177
3178 svg {
3179 fill: currentColor;
3180 transform: rotate(90deg);
3181 }
3182
3183 &:active {
3184 cursor: grabbing;
3185 }
3186 }
3187
3188 li {
3189 background: $color-white;
3190 border: 1px solid $color_gray-lighten;
3191 display: flex;
3192 flex-wrap: wrap;
3193 padding: 8px;
3194 margin: 8px 0;
3195 z-index: 99999 !important;
3196
3197 .evf-choice-list-input {
3198 flex: 1;
3199 margin-right: 6px;
3200 }
3201
3202 input {
3203 &[type='text']='text'] {
3204 width: 100%;
3205 }
3206
3207 &[type='radio']='radio'],
3208 &[type='checkbox']='checkbox'] {
3209 margin: 7px 6px 0 0;
3210 }
3211
3212 &.value {
3213 display: none;
3214 margin-top: 8px;
3215
3216 &.evf-money-input {
3217 width: 22%;
3218 display: inline-block;
3219 margin: 0 0 0 auto;
3220 flex: 0 0 22%;
3221 }
3222 }
3223 }
3224
3225 .everest-forms-attachment-media-view {
3226 flex: 100%;
3227 display: none;
3228 margin-top: 8px;
3229
3230 .button-add-media {
3231 width: 100%;
3232 padding: 8px;
3233 outline: none;
3234 cursor: pointer;
3235 border-radius: 3px;
3236 color: $color_gray-base;
3237 border: 1px dashed $color-gray-lighten;
3238 }
3239
3240 .thumbnail-image {
3241 display: block;
3242 max-height: 200px;
3243 margin-bottom: 3px;
3244 border-radius: 4px;
3245 position: relative;
3246 overflow: hidden;
3247
3248 img {
3249 display: block;
3250 max-width: 100%;
3251 user-select: none;
3252 border-radius: 4px;
3253 }
3254 }
3255
3256 .actions {
3257 margin-top: 8px;
3258
3259 .remove-button {
3260 margin-right: 8px;
3261 }
3262 }
3263 }
3264
3265 &.ui-sortable-placeholder {
3266 visibility: visible !important; // Overwrite CSS over JS.
3267 background: $color_gray-more-lighten;
3268 border: 1px dashed $color_gray-lighten;
3269 }
3270
3271 &.ui-sortable-helper {
3272 z-index: 99999 !important; // Overwrite CSS over JS.
3273 }
3274 }
3275
3276 .add,
3277 .remove {
3278 display: inline-flex;
3279 align-items: center;
3280 justify-content: center;
3281 width: 20px;
3282 height: 20px;
3283 margin-top: 5px;
3284 border-radius: 10px;
3285
3286 .dashicons {
3287 width: 16px;
3288 height: 16px;
3289 font-size: 16px;
3290 }
3291 }
3292
3293 .add {
3294 &:hover {
3295 color: $blue;
3296 }
3297 }
3298
3299 .remove {
3300 &:hover {
3301 color: $red;
3302 }
3303 }
3304
3305 &.show-images {
3306 li {
3307 .everest-forms-attachment-media-view {
3308 display: block;
3309 }
3310 }
3311 }
3312
3313 &.show-values {
3314 li {
3315 input[type="text"]="text""].value {
3316 display: block;
3317 }
3318 }
3319 }
3320 }
3321
3322 .everest-forms-field-option-row-choices_images {
3323 .notice {
3324 display: inline-block;
3325 margin: 0 0 15px 0 !important;
3326
3327 &.hidden {
3328 display: none;
3329 }
3330 }
3331 }
3332
3333 .everest-forms-field-option-row-rows,
3334 .everest-forms-field-option-row-columns,
3335 .everest-forms-field-option-row-drop_down_choices,
3336 .everest-forms-field-option-row-choices,
3337 .everest-forms-field-option-row-questions {
3338 ul {
3339 li {
3340 clear: both;
3341 padding: 5px 10px;
3342 border-radius: 4px;
3343 border: 1px solid transparent;
3344 }
3345 }
3346
3347 .evf-questions-list {
3348 li {
3349 padding: 10px;
3350 background: $color-white;
3351 margin-bottom: 10px;
3352 border: 1px solid $color_gray-lighten;
3353
3354 input[type='text']='text'] {
3355 width: calc(100% - 39px);
3356 }
3357
3358 .answer-wrap {
3359 margin-top: 6px;
3360 }
3361 }
3362 }
3363
3364 .question-wrap,
3365 .answer-wrap {
3366 input {
3367 margin-right: 8px;
3368 vertical-align: middle;
3369 }
3370
3371 .add,
3372 .remove {
3373 width: 30px;
3374 height: 30px;
3375 display: inline-flex;
3376 vertical-align: middle;
3377 border-radius: 3px;
3378 border: 1px solid $color_gray-lighten;
3379 }
3380
3381 .add {
3382 &:hover {
3383 background: $blue;
3384 border-color: $blue;
3385 }
3386 }
3387
3388 .remove {
3389 &:hover {
3390 background: $red;
3391 border-color: $red;
3392 }
3393 }
3394 }
3395 }
3396
3397 .everest-forms-field-option-payment-multiple,
3398 .everest-forms-field-option-payment-checkbox {
3399 .everest-forms-field-option-row {
3400 li {
3401 input[type='text']='text'] {
3402 width: 73%;
3403 margin-right: 8px;
3404
3405 &.evf-money-input {
3406 width: 23%;
3407 display: inline-block;
3408 margin: 0 0 0 auto;
3409 flex: 0 0 23%;
3410 }
3411 }
3412 }
3413 }
3414 }
3415
3416 .evf-content-email-settings-inner {
3417 display: none;
3418 -webkit-animation: fadeIn 0.5s;
3419 animation: fadeIn 0.5s;
3420 margin: 20px 0;
3421 border-radius: 4px;
3422
3423 &.active-connection {
3424 display: block;
3425
3426 &.everest-forms-hidden {
3427 display: none;
3428 }
3429 }
3430 }
3431 }
3432
3433 .evf-registered-item {
3434 z-index: 999;
3435 cursor: pointer;
3436 border-radius: 2px;
3437 font-size: 12px;
3438 text-align: center;
3439 margin: 0;
3440 background-color: $color-white;
3441 border: 1px solid $color_gray-lighten;
3442 color: $color_gray-normal;
3443
3444 .evf-icon {
3445 color: inherit;
3446 display: block;
3447 font-size: 32px;
3448 text-align: center;
3449 margin-bottom: 5px;
3450 }
3451
3452 &.ui-draggable-dragging {
3453 width: calc(100% - 20px) !important;
3454 text-align: center !important;
3455 font-size: 12px !important;
3456 }
3457
3458 &.ui-sortable-placeholder {
3459 width: 100% !important;
3460 }
3461 }
3462
3463 .everest-forms-field.ui-draggable-dragging {
3464 margin: 0;
3465 width: 105px !important;
3466 background-color: $color-white;
3467 text-align: center;
3468 font-size: 12px !important;
3469
3470 .evf-icon {
3471 color: inherit;
3472 display: block !important;
3473 font-size: 32px !important;
3474 }
3475 }
3476
3477 .everest-forms-border-container {
3478 margin-top: 5px;
3479 margin-bottom: 20px;
3480 padding: 0 20px;
3481 border-radius: 4px;
3482 border: 1px solid $color_gray-lighten;
3483
3484 .everest-forms-border-container-title {
3485 padding: 0 10px;
3486 margin: 0 0 0 -10px;
3487 background: $color_gray-light-skin;
3488 display: inline-block;
3489 transform: translateY(-50%);
3490 }
3491
3492 label {
3493 margin-bottom: 10px;
3494 margin-top: 2px;
3495
3496 .everest-forms-help-tooltip {
3497 height: 16px;
3498 width: 16px;
3499 line-height: 1;
3500 vertical-align: middle;
3501 }
3502 }
3503
3504 select {
3505 margin-bottom: 14px;
3506 }
3507
3508 .inline {
3509 margin-top: 0;
3510 }
3511
3512 .input-group-col-2 {
3513 margin-bottom: 15px;
3514
3515 select {
3516 margin-bottom: 0;
3517 }
3518 }
3519 }
3520
3521 .everest-forms-tab-content {
3522 position: relative;
3523 height: calc(100vh - 200px);
3524
3525 .everest-forms-add-fields-group {
3526 margin-bottom: 5px;
3527 }
3528
3529 .everest-forms-notice {
3530 display: inline-block;
3531 }
3532 }
3533
3534 .everest-forms-panel {
3535 .panel-wrap {
3536 overflow: hidden;
3537 }
3538
3539 .wp-picker-input-wrap {
3540 label {
3541 font-weight: 400;
3542 display: inline-block;
3543 }
3544 }
3545 }
3546
3547 .everest-forms-panel-content-wrap {
3548 .everest-forms-panel-content {
3549 position: relative;
3550 padding: 15px 20px;
3551 background-color: $color-white;
3552 height: calc(100vh - 150px);
3553 overflow-x: hidden !important;
3554
3555 .everest-forms-border-container {
3556 .everest-forms-border-container-title {
3557 background: $color-white;
3558 }
3559 }
3560
3561 .evf-content-email-settings {
3562 .evf-content-email-settings-inner {
3563 padding: 20px 20px 0;
3564 border: 1px solid $color_gray-lighten;
3565
3566 .everest-forms-email-name {
3567 background: $color_gray-light-skin;
3568 margin-left: -20px;
3569 margin-top: -20px;
3570 margin-right: -20px;
3571 padding: 20px;
3572 border-radius: 4px 4px 0 0;
3573 border-bottom: 1px solid $color_gray-lighten;
3574
3575 input[type='text']='text'] {
3576 font-weight: 600;
3577 }
3578
3579 .everest-forms-text-danger {
3580 margin: 10px 0 0;
3581 }
3582 }
3583 }
3584 }
3585
3586 .evf-content-post-submissions-settings,
3587 .evf-content-user-registration-settings {
3588 .everest-forms-panel-field {
3589 max-width: 500px;
3590 }
3591 }
3592
3593 .everest-forms-title-desc {
3594 display: inline-flex;
3595 align-items: center;
3596 flex-direction: row-reverse;
3597 position: relative;
3598 margin-bottom: 10px;
3599
3600 .evf-icon {
3601 display: flex;
3602 align-items: center;
3603 justify-content: center;
3604 width: 32px;
3605 height: 32px;
3606 cursor: pointer;
3607 border-radius: 3px;
3608 color: $color_gray-normal;
3609 background: $color_gray-more-lighten;
3610
3611 &::after {
3612 content: '';
3613 border-radius: 3px;
3614 position: absolute;
3615 left: 32px;
3616 right: calc(100% - 36px);
3617 height: 30px;
3618 border-radius: 0 3px 3px 0;
3619 transition: all .3s ease 0s;
3620 }
3621 }
3622
3623 .everest-forms-name-input {
3624 font-size: 1.3em;
3625 font-weight: 600;
3626 height: 32px;
3627 border: none;
3628 margin: 0;
3629 box-shadow: none;
3630 pointer-events: none;
3631 background: none;
3632 z-index: 1;
3633
3634 &.everst-forms-name-editing {
3635 pointer-events: all;
3636
3637 & + .evf-icon {
3638 background: $everestforms;
3639 color: $color-white;
3640 border-radius: 4px 0 0 4px;
3641
3642 &::after {
3643 top: 0;
3644 right: 0;
3645 border: 1px solid $everestforms;
3646 }
3647 }
3648 }
3649
3650 &:focus {
3651 box-shadow: none;
3652 }
3653 }
3654 }
3655
3656 .evf-admin-field-wrapper {
3657 cursor: move;
3658 position: relative;
3659
3660 .evf-sortable-placeholder {
3661 background-color: transparentize($green, 0.95);
3662 border: 1px dashed transparentize($green, 0.75);
3663 }
3664 }
3665
3666 .evf-add-row {
3667 margin: 20px auto;
3668 text-align: center;
3669
3670 span {
3671 width: auto;
3672 height: auto;
3673 font-size: 13px;
3674 background: #51cf66;
3675 font-family: inherit;
3676
3677 &.dashicons {
3678 &::before {
3679 width: 20px;
3680 height: 20px;
3681 line-height: 1;
3682 font-size: 16px;
3683 margin-right: 10px;
3684 font-family: dashicons;
3685 vertical-align: middle;
3686 padding: 2px 12px 2px 0;
3687 border-right: 1px solid transparentize($color-white, 0.7);
3688 }
3689 }
3690
3691 &:hover {
3692 background: #33ba4a;
3693 }
3694 }
3695 }
3696 }
3697 }
3698
3699 .everest-forms-fields-tab {
3700 display: flex;
3701 flex-wrap: wrap;
3702
3703 a {
3704 width: 50%;
3705 display: block;
3706 padding: 15px 0;
3707 font-weight: 600;
3708 text-align: center;
3709 color: $color_gray-dark;
3710 background: $color_gray-more-lighten;
3711 border-bottom: 1px solid $color_gray-lighten;
3712
3713 &.active {
3714 background: $color_gray-light-skin;
3715 border-bottom: 1px solid transparent;
3716 }
3717
3718 &:first-child {
3719 border-right: 1px solid $color_gray-lighten;
3720 }
3721 }
3722 }
3723
3724 .everest-forms-panel-sidebar {
3725 .everest-forms-add-fields,
3726 .everest-forms-field-options {
3727 padding: 15px 20px;
3728 }
3729 }
3730 }
3731 }
3732
3733 /**
3734 * Settings styling.
3735 **/
3736 .everest-forms {
3737 h2.evf-nav-tab-wrapper {
3738 margin-bottom: 1em;
3739 }
3740
3741 nav.evf-nav-tab-wrapper {
3742 margin: 1.5em 0 1em;
3743 }
3744
3745 .subsubsub {
3746 margin: -8px 0 0;
3747 }
3748
3749 .evf-admin-breadcrumb {
3750 margin-left: 0.5em;
3751 a {
3752 color: #a46497;
3753 }
3754 }
3755
3756 #template div {
3757 margin: 0;
3758
3759 p .button {
3760 float: right;
3761 margin-left: 10px;
3762 margin-top: -4px;
3763 }
3764
3765 .editor textarea {
3766 margin-bottom: 8px;
3767 }
3768 }
3769
3770 textarea[disabled='disabled']='disabled'] {
3771 background: #dfdfdf !important;
3772 }
3773
3774 table.form-table {
3775 margin: 0;
3776 position: relative;
3777 table-layout: fixed;
3778
3779 .forminp-radio {
3780 ul {
3781 margin: 0;
3782
3783 li {
3784 line-height: 1.4em;
3785 }
3786
3787 &.everest-forms-recaptcha-type {
3788 display: flex;
3789
3790 li {
3791 margin-right: 15px;
3792 margin-bottom: 0;
3793
3794 label {
3795 margin-bottom: 0 !important;
3796 margin-top: 5px !important;
3797 }
3798 }
3799 }
3800 }
3801 }
3802
3803 input[type='text']='text'],
3804 input[type='number']='number'],
3805 input[type='email']='email'] {
3806 height: auto;
3807 }
3808
3809 textarea.input-text {
3810 height: 100%;
3811 min-width: 150px;
3812 display: block;
3813 }
3814
3815 // Give regular settings inputs a standard width and padding.
3816 textarea,
3817 input[type='text']='text'],
3818 input[type='email']='email'],
3819 input[type='number']='number'],
3820 input[type='password']='password'],
3821 input[type='datetime']='datetime'],
3822 input[type='datetime-local']='datetime-local'],
3823 input[type='date']='date'],
3824 input[type='time']='time'],
3825 input[type='week']='week'],
3826 input[type='url']='url'],
3827 input[type='tel']='tel'],
3828 input.regular-input {
3829 margin: 0;
3830 padding: 0 8px;
3831 width: 350px;
3832 box-sizing: border-box;
3833 vertical-align: top;
3834
3835 @media only screen and (max-width: 782px) {
3836 width: 100%;
3837 }
3838 }
3839
3840 input[type='datetime-local']='datetime-local'],
3841 input[type='date']='date'],
3842 input[type='time']='time'],
3843 input[type='week']='week'],
3844 input[type='tel']='tel'] {
3845 width: 200px;
3846 }
3847
3848 select {
3849 width: 350px;
3850 margin: 0;
3851 box-sizing: border-box;
3852 height: 32px;
3853 vertical-align: top;
3854
3855 @media only screen and (max-width: 782px) {
3856 width: 100%;
3857 }
3858 }
3859
3860 input[size]] {
3861 width: auto !important;
3862 }
3863
3864 // Ignore nested inputs.
3865 table {
3866 select,
3867 textarea,
3868 input[type='text']='text'],
3869 input[type='email']='email'],
3870 input[type='number']='number'],
3871 input.regular-input {
3872 width: auto;
3873 }
3874 }
3875
3876 textarea.wide-input {
3877 width: 100%;
3878 }
3879
3880 img.help_tip,
3881 .everest-forms-help-tip {
3882 padding: 0;
3883 margin: -4px 0 0 5px;
3884 vertical-align: middle;
3885 cursor: help;
3886 line-height: 1;
3887 }
3888
3889 span.help_tip {
3890 cursor: help;
3891 color: $blue;
3892 }
3893
3894 th {
3895 position: relative;
3896 padding-right: 24px;
3897 }
3898
3899 th label {
3900 position: relative;
3901 display: block;
3902
3903 img.help_tip,
3904 .everest-forms-help-tip {
3905 margin: -7px -24px 0 0;
3906 position: absolute;
3907 right: 0;
3908 top: 50%;
3909
3910 @media only screen and (max-width: 782px) {
3911 right: auto;
3912 margin-left: 5px;
3913 }
3914 }
3915 }
3916
3917 th label,
3918 th.titledesc {
3919 color: $color_gray-base;
3920 }
3921
3922 th label + .everest-forms-help-tip {
3923 position: absolute;
3924 margin: 0;
3925 right: 0;
3926 top: 20px;
3927 }
3928
3929 .select2-container {
3930 vertical-align: top;
3931 margin-bottom: 3px;
3932 }
3933
3934 table.widefat th {
3935 padding-right: inherit;
3936 }
3937
3938 .wp-list-table .everest-forms-help-tip {
3939 float: none;
3940 }
3941
3942 fieldset {
3943 margin-top: 4px;
3944
3945 img.help_tip,
3946 .everest-forms-help-tip {
3947 margin: -3px 0 0 5px;
3948 }
3949
3950 p.description {
3951 margin-bottom: 8px;
3952 }
3953
3954 &:first-child {
3955 margin-top: 0;
3956 }
3957 }
3958
3959 .iris-picker {
3960 z-index: 100;
3961 display: none;
3962 position: absolute;
3963 border: 1px solid #ccc;
3964 border-radius: 3px;
3965 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
3966
3967 .ui-slider {
3968 border: 0 !important;
3969 margin: 0 !important;
3970 width: auto !important;
3971 height: auto !important;
3972 background: none transparent !important;
3973
3974 .ui-slider-handle {
3975 margin-bottom: 0 !important;
3976 }
3977 }
3978 }
3979
3980 .forminp-color {
3981 font-size: 0;
3982 }
3983
3984 .iris-error {
3985 background-color: #ffafaf;
3986 }
3987
3988 .colorpickpreview {
3989 padding: 0;
3990 width: 30px;
3991 height: 30px;
3992 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3993 font-size: 16px;
3994 border-radius: 4px;
3995 margin-right: 3px;
3996
3997 @media only screen and (max-width: 782px) {
3998 float: left;
3999 width: 40px;
4000 height: 40px;
4001 }
4002 }
4003 }
4004
4005 .everest-forms-save-button {
4006 box-shadow: none;
4007 text-shadow: none;
4008 transition: 0.25s all ease-in-out;
4009 }
4010
4011 .everest-forms-integrations-connection {
4012 a {
4013 text-decoration: none;
4014 }
4015
4016 .everest-forms-integrations {
4017 border-radius: 3px;
4018 background: $color-white;
4019 border: 1px solid #ced4da;
4020 padding: 10px 20px;
4021 display: flex;
4022 flex-wrap: wrap;
4023 align-items: center;
4024 justify-content: space-between;
4025 margin-bottom: 10px;
4026
4027 .integration-header-info {
4028 display: flex;
4029 flex: 1;
4030 align-items: center;
4031
4032 .integration-status {
4033 position: relative;
4034
4035 .toggle-switch-outer {
4036 width: 20px;
4037 height: 20px;
4038 display: block;
4039 margin-right: 20px;
4040 position: relative;
4041 border-radius: 3px;
4042 border: 1px solid #ced4da;
4043
4044 &.connected {
4045 border-color: $green;
4046
4047 &::before {
4048 background-color: $green;
4049 }
4050 }
4051
4052 &::before {
4053 left: 0;
4054 top: 50%;
4055 right: 0;
4056 content: '';
4057 width: 10px;
4058 height: 10px;
4059 display: block;
4060 margin: 0 auto;
4061 border-radius: 2px;
4062 position: absolute;
4063 background-color: #ced4da;
4064 transform: translateY(-50%);
4065 }
4066 }
4067 }
4068
4069 .integration-detail {
4070 display: flex;
4071 align-items: center;
4072
4073 .logo {
4074 width: 50px;
4075 height: 50px;
4076 flex: 0 0 50px;
4077 display: flex;
4078 overflow: hidden;
4079 margin: 0 20px 0 0;
4080 border-radius: 4px;
4081 align-items: center;
4082 border: 1px solid #ced4da;
4083
4084 img {
4085 width: 100%;
4086 display: block;
4087 }
4088 }
4089
4090 .integration-info {
4091 margin-right: 20px;
4092
4093 a {
4094 display: inline-block;
4095
4096 &:hover h3 {
4097 color: $everestforms;
4098 }
4099
4100 &:focus {
4101 box-shadow: none;
4102 }
4103 }
4104
4105 h3,
4106 p {
4107 margin-top: 0;
4108 margin-bottom: 7px;
4109 }
4110 }
4111 }
4112 }
4113
4114 .integartion-action {
4115 flex-wrap: wrap;
4116 display: flex;
4117 align-items: center;
4118
4119 .toggle-button {
4120 margin-right: 20px;
4121
4122 .slide {
4123 display: block;
4124 height: 22px;
4125 cursor: pointer;
4126 width: 44px;
4127 position: relative;
4128
4129 &.inactive,
4130 &.active {
4131 border-radius: 34px;
4132
4133 &::before {
4134 border-radius: 50%;
4135 position: absolute;
4136 content: '';
4137 height: 18px;
4138 width: 18px;
4139 bottom: 2px;
4140 background-color: $color-white;
4141 -webkit-transition: 0.4s;
4142 transition: 0.4s;
4143 }
4144 }
4145
4146 &.inactive {
4147 background-color: #ced4da;
4148
4149 &::before {
4150 left: 2px;
4151 }
4152 }
4153
4154 &.active {
4155 background-color: $everestforms;
4156
4157 &::before {
4158 right: 2px;
4159 }
4160 }
4161 }
4162 }
4163
4164 .integration-setup {
4165 width: 35px;
4166 height: 35px;
4167 display: block;
4168 font-size: 16px;
4169 color: #78818a;
4170 position: relative;
4171 border-radius: 3px;
4172 border: 1px solid #ced4da;
4173 transition: all 0.25s;
4174
4175 .evf-icon-setting-cog {
4176 position: absolute;
4177 top: 50%;
4178 transform: translateY(-50%);
4179 width: 100%;
4180 text-align: center;
4181
4182 &::before {
4183 content: '\e021';
4184 }
4185 }
4186
4187 &:hover {
4188 color: $everestforms;
4189 border-color: $everestforms;
4190 }
4191 }
4192 }
4193 }
4194 }
4195
4196 .everest-forms-integration-content {
4197 display: flex;
4198 background-color: $color-white;
4199 border: 1px solid #ced4da;
4200
4201 .integration-addon-detail {
4202 width: 400px;
4203 padding: 20px;
4204 border-right: 1px solid #ced4da;
4205
4206 .evf-integration-info-header {
4207 display: flex;
4208 align-items: center;
4209 }
4210
4211 .evf-integration-logo {
4212 width: 60px;
4213 height: 60px;
4214 padding: 10px;
4215 display: flex;
4216 align-items: center;
4217 flex: 0 0 60px;
4218 margin: 0 20px 0 0;
4219 border-radius: 3px;
4220 border: 1px solid #ced4da;
4221
4222 img {
4223 width: 100%;
4224 }
4225 }
4226
4227 .integration-info {
4228 h3 {
4229 margin-top: 0;
4230 margin-bottom: 5px;
4231 }
4232
4233 .toggle-switch {
4234 &.connected {
4235 display: block;
4236 padding-left: 15px;
4237 position: relative;
4238
4239 &::before {
4240 left: 0;
4241 top: 50%;
4242 content: '';
4243 width: 10px;
4244 height: 10px;
4245 display: block;
4246 position: absolute;
4247 background: $green;
4248 border-radius: 50%;
4249 transform: translateY(-50%);
4250 }
4251 }
4252 }
4253 }
4254 }
4255
4256 .integration-connection-detail {
4257 padding: 20px;
4258 width: calc(100% - 400px);
4259
4260 .evf-account-connect {
4261 margin-bottom: 20px;
4262
4263 h3 {
4264 margin-top: 0;
4265 }
4266
4267 .evf-connection-form {
4268 margin: 20px 0;
4269
4270 input {
4271 width: 350px;
4272 margin-right: 15px;
4273 }
4274 }
4275
4276 .everest-forms-btn {
4277 .evf-loading {
4278 width: 14px;
4279 height: 14px;
4280 background-size: 14px 14px;
4281 margin: 2px 0 0 5px;
4282 }
4283 }
4284 }
4285
4286 .evf-connection-list {
4287 table.evf-connection-list-table {
4288 width: 100%;
4289 border-spacing: 0;
4290 border-collapse: collapse;
4291 border: 1px solid #ced4da;
4292
4293 tr {
4294 td {
4295 padding: 10px 20px;
4296 border-bottom: 1px solid #ced4da;
4297
4298 &:last-child {
4299 text-align: right;
4300 }
4301
4302 .disconnect {
4303 color: $red;
4304 position: relative;
4305 display: inline-block;
4306 padding-left: 15px;
4307
4308 &::before {
4309 display: block;
4310 content: '';
4311 position: absolute;
4312 height: 10px;
4313 width: 10px;
4314 background: $red;
4315 top: 50%;
4316 transform: translateY(-50%);
4317 left: 0;
4318 border-radius: 50%;
4319 }
4320 }
4321 }
4322
4323 &:last-child {
4324
4325 td {
4326 border-bottom: none;
4327 }
4328 }
4329 }
4330 }
4331 }
4332 }
4333 }
4334 }
4335
4336 /**
4337 * Import and Export
4338 */
4339 .everest-forms-import-form,
4340 .everest-forms-export-form {
4341 background: $color-white;
4342 max-width: 700px;
4343 padding: 20px;
4344 margin-top: 20px;
4345 box-shadow: 1px 3px 10px transparentize($color_gray-base, 0.95);
4346 border-radius: 4px;
4347
4348 h3 {
4349 margin: 0;
4350 font-size: 20px;
4351 padding-bottom: 16px;
4352 border-bottom: 2px solid $color_gray-more-lighten;
4353 }
4354
4355 p {
4356 font-size: 14px;
4357 }
4358
4359 select {
4360 margin: 1em 0;
4361 }
4362
4363 .description {
4364 margin-bottom: 16px;
4365
4366 .dashicons {
4367 width: 16px;
4368 height: 16px;
4369 font-size: 16px;
4370 vertical-align: middle;
4371 margin-right: 2px;
4372 margin-bottom: 3px;
4373 }
4374 }
4375
4376 .everest-forms-file-upload {
4377 margin: 1em 0;
4378
4379 input {
4380 display: none;
4381 }
4382
4383 label {
4384 display: inline-block;
4385 padding: 4px;
4386 min-width: 400px;
4387 border-radius: 4px;
4388 border: 1px solid $color_gray-lighten;
4389 }
4390
4391 .everest-forms-btn {
4392 width: auto;
4393 height: auto;
4394 font-size: 13px;
4395 margin-right: 10px;
4396 vertical-align: middle;
4397 }
4398 }
4399
4400 .publishing-action {
4401 padding-top: 20px;
4402 text-align: right;
4403 border-top: 2px solid $color_gray-more-lighten;
4404 }
4405 }
4406
4407 /**
4408 * List Table.
4409 */
4410 .tablenav {
4411 #delete_all {
4412 margin: 1px;
4413 }
4414
4415 #export-csv-submit {
4416 margin: 1px 8px 0 0;
4417 }
4418 }
4419
4420 table.wp-list-table {
4421 span.na {
4422 color: #999;
4423 }
4424
4425 .everest-forms-toggle-form {
4426 width: 28px;
4427 height: 16px;
4428 float: left;
4429 margin-top: 3px;
4430 margin-right: 16px;
4431 position: relative;
4432
4433 input[type='checkbox']='checkbox'] {
4434 display: none;
4435
4436 &:checked {
4437 + .slider {
4438 background-color: $green;
4439
4440 &::before {
4441 transform: translateX(100%);
4442 }
4443 }
4444 }
4445 }
4446
4447 .slider {
4448 cursor: pointer;
4449 position: absolute;
4450 top: 0;
4451 left: 0;
4452 right: 0;
4453 bottom: 0;
4454 transition: 0.4s;
4455 background-color: #cdd0d2;
4456
4457 &::before {
4458 content: '';
4459 width: 12px;
4460 height: 12px;
4461 position: absolute;
4462 left: 2px;
4463 bottom: 2px;
4464 transition: 0.4s;
4465 background-color: $color-white;
4466 }
4467
4468 &.round {
4469 border-radius: 16px;
4470
4471 &::before {
4472 border-radius: 50%;
4473 }
4474 }
4475 }
4476 }
4477
4478 .row-actions {
4479 color: #999;
4480 }
4481
4482 .column-date {
4483 width: 12%;
4484 }
4485
4486 .column-entries {
4487 width: 74px;
4488 text-align: center;
4489 }
4490
4491 .column-actions {
4492 width: 175px;
4493 }
4494
4495 .column-enabled {
4496 width: 25px;
4497 }
4498
4499 .column-status img {
4500 height: 12px;
4501 margin-left: 5px;
4502 margin-bottom: -2px;
4503 }
4504
4505 img.attachment-thumbnail {
4506 height: 40px;
4507 }
4508
4509 .submitdelete {
4510 &:hover {
4511 color: #a00;
4512 }
4513 }
4514
4515 .new-entries-notification td {
4516 padding: 0;
4517 text-align: center;
4518
4519 a {
4520 display: none;
4521 padding: 10px;
4522 box-shadow: none;
4523 background: lighten(#0095ff, 45%);
4524 }
4525 }
4526 }
4527
4528 /**
4529 * Entry viewer.
4530 **/
4531 .everest-forms-entry {
4532 .postbox {
4533 .inside {
4534 padding: 6px 0 0;
4535
4536 p {
4537 margin: 0;
4538 padding: 6px 10px 8px;
4539 }
4540 }
4541
4542 .submitdelete {
4543 color: #a00;
4544 padding: 1px 2px;
4545 text-decoration: none;
4546 }
4547 }
4548
4549 #poststuff {
4550 #everest-forms-entry-fields,
4551 #everest-forms-entry-details,
4552 #everest-forms-entry-actions {
4553 h2.hndle {
4554 cursor: inherit;
4555
4556 .dashicons {
4557 width: 16px;
4558 height: 16px;
4559 font-size: 16px;
4560 margin: 1px 2px 0 4px;
4561 }
4562 }
4563
4564 .inside {
4565 margin: 0;
4566 padding: 0;
4567
4568 .everest-forms-entry-details-meta,
4569 .everest-forms-entry-actions-meta {
4570 padding: 6px 0 0;
4571
4572 p {
4573 margin: 0;
4574 padding: 6px 10px 8px;
4575 }
4576
4577 .dashicons {
4578 top: 0;
4579 left: -2px;
4580 position: relative;
4581 padding: 0 2px 0 0;
4582 color: $color_gray-light;
4583 text-decoration: none;
4584 }
4585 }
4586
4587 .everest-forms-entry-actions-meta a {
4588 box-shadow: none;
4589 text-decoration: none;
4590 }
4591 }
4592 }
4593
4594 #everest-forms-entry-fields {
4595 .inside {
4596 table {
4597 border: none;
4598
4599 td a:focus {
4600 box-shadow: none;
4601 }
4602 }
4603
4604 span.list {
4605 display: block;
4606 }
4607
4608 img.attachment-thumbnail {
4609 height: 150px;
4610 }
4611 }
4612
4613 .everest-forms-empty-field-toggle {
4614 float: right;
4615 padding: 3px 0 0;
4616 text-decoration: none;
4617 }
4618 }
4619 }
4620 }
4621
4622 /**
4623 * DB log viewer.
4624 **/
4625 .wp-list-table.logs {
4626 .log-level {
4627 display: inline;
4628 padding: 0.2em 0.6em 0.3em;
4629 font-size: 80%;
4630 font-weight: bold;
4631 line-height: 1;
4632 color: $color-white;
4633 text-align: center;
4634 white-space: nowrap;
4635 vertical-align: baseline;
4636 border-radius: 0.2em;
4637
4638 &:empty {
4639 display: none;
4640 }
4641 }
4642
4643 /**
4644 * Add color to levels
4645 *
4646 * Descending severity:
4647 * emergency, alert -> red
4648 * critical, error -> orange
4649 * warning, notice -> yellow
4650 * info -> blue
4651 * debug -> green
4652 */
4653 .log-level--emergency,
4654 .log-level--alert {
4655 background-color: #ff4136;
4656 }
4657 .log-level--critical,
4658 .log-level--error {
4659 background-color: #ff851b;
4660 }
4661 .log-level--warning,
4662 .log-level--notice {
4663 color: #222;
4664 background-color: #ffdc00;
4665 }
4666 .log-level--info {
4667 background-color: #0074d9;
4668 }
4669 .log-level--debug {
4670 background-color: #3d9970;
4671 }
4672
4673 // Adjust log table columns only when table is not collapsed.
4674 @media screen and ( min-width: 783px ) {
4675 .column-timestamp {
4676 width: 18%;
4677 }
4678 .column-level {
4679 width: 14%;
4680 }
4681 .column-source {
4682 width: 15%;
4683 }
4684 }
4685 }
4686
4687 #log-viewer-select {
4688 padding: 10px 0 8px;
4689 line-height: 28px;
4690 h2 a {
4691 vertical-align: middle;
4692 }
4693 }
4694
4695 #log-viewer {
4696 background: $color-white;
4697 border: 1px solid #e5e5e5;
4698 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
4699 padding: 5px 20px;
4700
4701 pre {
4702 font-family: monospace;
4703 white-space: pre-wrap;
4704 word-wrap: break-word;
4705 }
4706 }
4707
4708 /**
4709 * Tooltips.
4710 **/
4711 .tips {
4712 cursor: help;
4713 text-decoration: none;
4714 }
4715
4716 img.tips {
4717 padding: 5px 0 0;
4718 }
4719
4720 .tooltipster-base {
4721 display: flex;
4722 position: absolute;
4723 pointer-events: none;
4724
4725 &.tooltipster-ruler {
4726 position: fixed;
4727 top: 0;
4728 right: 0;
4729 bottom: 0;
4730 left: 0;
4731 overflow: hidden;
4732 visibility: hidden;
4733 }
4734
4735 .tooltipster-box {
4736 border: none;
4737 flex: 1 1 auto;
4738 border-radius: 3px;
4739 background: #333;
4740 margin: 0 !important;
4741
4742 .tooltipster-content {
4743 color: $color-white;
4744 overflow: auto;
4745 font-size: 0.8em;
4746 max-width: 150px;
4747 max-height: 100%;
4748 text-align: center;
4749 padding: 0.618em 1em;
4750 box-sizing: border-box;
4751 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
4752
4753 a {
4754 color: #ff7d20;
4755 }
4756
4757 code {
4758 padding: 1px;
4759 background: #888;
4760 }
4761 }
4762 }
4763
4764 .tooltipster-arrow {
4765 overflow: hidden;
4766 position: absolute;
4767
4768 .tooltipster-arrow-uncropped {
4769 position: relative;
4770
4771 .tooltipster-arrow-border {
4772 top: 0;
4773 left: 0;
4774 width: 0;
4775 height: 0;
4776 position: absolute;
4777 border: 5px solid transparent;
4778 }
4779
4780 .tooltipster-arrow-background {
4781 display: none;
4782 }
4783 }
4784 }
4785
4786 &.tooltipster-top,
4787 &.tooltipster-bottom {
4788 .tooltipster-arrow {
4789 width: 10px;
4790 height: 5px;
4791 margin-left: -5px;
4792 }
4793 }
4794
4795 &.tooltipster-left,
4796 &.tooltipster-right {
4797 .tooltipster-arrow {
4798 top: 0;
4799 width: 5px;
4800 height: 10px;
4801 margin-left: 0;
4802 margin-top: -5px;
4803 }
4804 }
4805
4806 &.tooltipster-bottom {
4807 .tooltipster-arrow {
4808 top: -5px;
4809
4810 .tooltipster-arrow-uncropped {
4811 top: -5px;
4812
4813 .tooltipster-arrow-border {
4814 border-bottom-color: #333;
4815 }
4816 }
4817 }
4818 }
4819
4820 &.tooltipster-left {
4821 .tooltipster-arrow {
4822 right: -5px;
4823
4824 .tooltipster-arrow-border {
4825 border-left-color: #333;
4826 }
4827 }
4828 }
4829
4830 &.tooltipster-right {
4831 .tooltipster-arrow {
4832 left: -5px;
4833
4834 .tooltipster-arrow-uncropped {
4835 left: -5px;
4836
4837 .tooltipster-arrow-border {
4838 border-right-color: #333;
4839 }
4840 }
4841 }
4842 }
4843
4844 &.tooltipster-top {
4845 .tooltipster-arrow {
4846 bottom: -5px;
4847
4848 .tooltipster-arrow-border {
4849 border-top-color: #333;
4850 }
4851 }
4852 }
4853
4854 &.tooltipster-fade {
4855 opacity: 0;
4856 transition-property: opacity;
4857
4858 &.tooltipster-show {
4859 opacity: 1;
4860 }
4861 }
4862
4863 &.tooltipster-update-rotate {
4864 animation: rotating 600ms;
4865 }
4866 }
4867
4868 .evf_error_tip {
4869 color: $color-white;
4870 max-width: 20em;
4871 font-size: 0.8em;
4872 line-height: 1.8em;
4873 text-align: center;
4874 border-radius: 3px;
4875 position: absolute;
4876 white-space: normal;
4877 background: #d82223;
4878 margin: 1.5em 1px 0 -1em;
4879 padding: 0.618em 1em;
4880 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
4881 z-index: 9999999;
4882
4883 code {
4884 padding: 1px;
4885 background: #888;
4886 }
4887
4888 &::after {
4889 content: '';
4890 display: block;
4891 border: 8px solid #d82223;
4892 border-right-color: transparent;
4893 border-left-color: transparent;
4894 border-top-color: transparent;
4895 position: absolute;
4896 top: -3px;
4897 left: 50%;
4898 margin: -1em 0 0 -3px;
4899 }
4900 }
4901
4902 /**
4903 *Date picker.
4904 **/
4905 img.ui-datepicker-trigger {
4906 vertical-align: middle;
4907 margin-top: -1px;
4908 cursor: pointer;
4909 }
4910
4911 #ui-datepicker-div {
4912 display: none;
4913 }
4914
4915 /**
4916 * Blank State.
4917 **/
4918 .everest-forms-BlankState {
4919 text-align: center;
4920 padding: 5em 0 0;
4921
4922 .everest-forms-BlankState-icon {
4923 fill: #ddd;
4924 width: 128px;
4925 height: 128px;
4926 margin: 0 0 0.875em;
4927 }
4928
4929 .everest-forms-BlankState-message {
4930 color: #aaa;
4931 margin: 0 auto 1.5em;
4932 line-height: 1.5em;
4933 font-size: 1.2em;
4934 max-width: 500px;
4935 }
4936
4937 .everest-forms-BlankState-cta {
4938 font-size: 1.2em;
4939 padding: 0.75em 1.5em;
4940 margin: 0 0.25em;
4941 height: auto;
4942 display: inline-block !important;
4943 }
4944 }
4945
4946 .evf-pointer {
4947 .evf-pointer-buttons {
4948 .close {
4949 float: left;
4950 margin: 6px 0 0 15px;
4951 }
4952 }
4953 }
4954
4955 /**
4956 * Select2 elements.
4957 */
4958 .select2-drop,
4959 .select2-dropdown {
4960 z-index: 999999 !important;
4961 }
4962
4963 .select2-results {
4964 line-height: 1.5em;
4965
4966 .select2-results__option,
4967 .select2-results__group {
4968 margin: 0;
4969 padding: 8px;
4970
4971 &:focus {
4972 outline: none;
4973 }
4974 }
4975
4976 .description {
4977 display: block;
4978 color: #999;
4979 padding-top: 4px;
4980 }
4981 }
4982
4983 .select2-dropdown {
4984 border-color: #007cba;
4985
4986 &::after {
4987 position: absolute;
4988 left: 0;
4989 right: 0;
4990 height: 1px;
4991 background: #fff;
4992 content: '';
4993 }
4994 }
4995
4996 .select2-dropdown--below {
4997 box-shadow: 0 0 0 1px #007cba, 0 2px 1px rgba(0, 0, 0, 0.1);
4998
4999 &::after {
5000 top: -1px;
5001 }
5002 }
5003
5004 .select2-dropdown--above {
5005 box-shadow: 0 0 0 1px #007cba, 0 -2px 1px rgba(0, 0, 0, 0.1);
5006
5007 &::after {
5008 bottom: -1px;
5009 }
5010 }
5011
5012 .select2-container {
5013
5014 @media only screen and (max-width: 782px) {
5015 font-size: 16px;
5016 }
5017
5018 &:focus {
5019 outline: none;
5020 }
5021
5022 .select2-selection__rendered.ui-sortable li {
5023 cursor: move;
5024 }
5025
5026 .select2-selection {
5027 border-color: #7e8993;
5028 }
5029
5030 .select2-search__field {
5031 min-width: 150px;
5032 }
5033
5034 .select2-selection--single {
5035 height: 30px;
5036 border-color: #7e8993;
5037
5038 @media only screen and (max-width: 782px) {
5039 height: 40px;
5040 }
5041
5042 &:focus {
5043 outline: none;
5044 }
5045
5046 .select2-selection__rendered {
5047 line-height: 28px;
5048 padding-right: 24px;
5049
5050 @media only screen and (max-width: 782px) {
5051 line-height: 38px;
5052 }
5053
5054 &:hover {
5055 color: #007cba;
5056 }
5057 }
5058
5059 .select2-selection__arrow {
5060 right: 1px;
5061 height: 28px;
5062 width: 28px;
5063 background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
5064 background-size: 16px 16px;
5065
5066 @media only screen and (max-width: 782px) {
5067 height: 38px;
5068 }
5069
5070 b {
5071 display: none;
5072 }
5073 }
5074 }
5075
5076 &.select2-container--focus .select2-selection--single,
5077 &.select2-container--open .select2-selection--single,
5078 &.select2-container--open .select2-selection--multiple {
5079 border-color: #007cba;
5080 box-shadow: 0 0 0 1px #007cba;
5081 }
5082
5083 .select2-selection--multiple {
5084 min-height: 30px;
5085 line-height: 1.5;
5086 border-radius: 4px;
5087 border-color: #7e8993;
5088
5089 li {
5090 margin: 0;
5091 }
5092
5093 .select2-selection__choice {
5094 padding: 2px 6px;
5095
5096 .description {
5097 display: none;
5098 }
5099 }
5100 }
5101
5102 .select2-selection__clear {
5103 color: #999;
5104 margin-top: -1px;
5105 }
5106
5107 .select2-search--inline .select2-search__field {
5108 min-height: 28px;
5109 font-family: inherit;
5110 font-size: inherit;
5111 font-weight: inherit;
5112 padding: 0 0 0 3px;
5113 }
5114
5115 .everest-forms table.form-table .select2-container {
5116 @media only screen and (max-width: 782px) {
5117 min-width: 100% !important;
5118 }
5119 }
5120 }
5121
5122 /**
5123 * Select2 colors for built-in admin color themes.
5124 */
5125 .admin-color {
5126 $wp_admin_colors: (
5127 blue: #096484,
5128 coffee: #c7a589,
5129 ectoplasm: #a3b745,
5130 midnight: #e14d43,
5131 ocean: #9ebaa0,
5132 sunrise: #dd823b,
5133 light: #04a4cc
5134 );
5135
5136 @each $name, $color in $wp_admin_colors {
5137
5138 &-#{$name} {
5139
5140 .select2-dropdown {
5141 border-color: $color;
5142 }
5143
5144 .select2-dropdown--below {
5145 box-shadow: 0 0 0 1px $color, 0 2px 1px rgba(0, 0, 0, 0.1);
5146 }
5147
5148 .select2-dropdown--above {
5149 box-shadow: 0 0 0 1px $color, 0 -2px 1px rgba(0, 0, 0, 0.1);
5150 }
5151
5152 .select2-selection--single .select2-selection__rendered:hover {
5153 color: $color;
5154 }
5155
5156 .select2-container.select2-container--focus .select2-selection--single,
5157 .select2-container.select2-container--open .select2-selection--single,
5158 .select2-container.select2-container--open .select2-selection--multiple {
5159 border-color: $color;
5160 box-shadow: 0 0 0 1px $color;
5161 }
5162
5163 .select2-container--default .select2-results__option--highlighted[aria-selected]],
5164 .select2-container--default .select2-results__option--highlighted[data-selected]] {
5165 background-color: $color;
5166 }
5167 }
5168 }
5169 }
5170
5171 .everest-forms {
5172 table {
5173 &.form-table {
5174 .select2-container--default {
5175 &.select2-container--focus {
5176 .select2-selection--multiple {
5177 border-color: #5b9dd9;
5178 box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
5179 outline: 2px solid transparent;
5180 }
5181 }
5182 }
5183
5184 .select2-container {
5185 min-width: 350px !important;
5186
5187 ul {
5188 &.select2-selection__rendered {
5189 display: block;
5190 }
5191 }
5192
5193 input {
5194 &.select2-search__field {
5195 min-width: 50px;
5196 }
5197 }
5198 }
5199 }
5200 }
5201 }
5202
5203 /**
5204 * Small screen optimisation.
5205 **/
5206 @media only screen and (max-width: 1280px) {
5207 .everest-forms_page_evf-builder {
5208 #everest-forms-builder {
5209 .evf-tab-content {
5210 .everest-forms-panel {
5211 .everest-forms-panel-content-wrap {
5212 .everest-forms-panel-content {
5213 padding: 15px 20px;
5214 background-color: $color-white;
5215 }
5216 }
5217 }
5218 }
5219 }
5220 }
5221 }
5222
5223 /**
5224 * Optimisation for screens 960px and smaller.
5225 **/
5226 @media only screen and (max-width: 960px) {
5227 .everest-forms_page_evf-builder {
5228 #everest-forms-builder {
5229 .evf-tab-content {
5230 .everest-forms-panel {
5231 .everest-forms-panel-sidebar {
5232 width: 280px;
5233 height: calc(100vh - 122px);
5234
5235 .evf-registered-buttons {
5236 .evf-registered-item {
5237 width: 47%;
5238 }
5239 }
5240 }
5241
5242 .everest-forms-panel-sidebar-content {
5243 .everest-forms-panel-content-wrap {
5244 width: calc(100% - 280px);
5245 }
5246 }
5247 }
5248 }
5249 }
5250 }
5251
5252 .everest-forms {
5253 .everest-forms-integration-content {
5254 .integration-addon-detail {
5255 width: 280px;
5256 }
5257
5258 .integration-connection-detail {
5259 .evf-account-connect {
5260 .evf-connection-form {
5261 input {
5262 width: 100%;
5263 margin-bottom: 15px;
5264
5265 &:last-child {
5266 margin-bottom: 0;
5267 }
5268 }
5269 }
5270 }
5271 }
5272 }
5273 }
5274 }
5275
5276 /**
5277 * Optimisation for screens 782px and smaller.
5278 **/
5279 @media screen and (max-width: 782px) {
5280 .everest-forms_page_evf-builder {
5281 .auto-fold {
5282 #wpcontent {
5283 padding-left: 0;
5284 }
5285 }
5286
5287 .everest-forms {
5288 .everest-forms-overlay {
5289 z-index: 99999;
5290 }
5291 }
5292
5293 #everest-forms-builder {
5294 width: 100%;
5295
5296 #everest-forms-builder-form {
5297 width: 100% !important; // Adjust Form builder width
5298
5299 .evf-tab-content {
5300 .everest-forms-panel-content-wrap {
5301 .everest-forms-panel-content {
5302 height: calc(100vh - 122px);
5303
5304 &.ps {
5305 height: calc(100vh - 176px);
5306 }
5307 }
5308
5309 .evf-admin-row {
5310 .evf-admin-grid {
5311 padding: 0;
5312 margin: 0;
5313 }
5314 }
5315 }
5316
5317 .everest-forms-field-option-row-choices {
5318 ul {
5319 li {
5320 input[type='text']='text'] {
5321 width: calc(100% - 118px);
5322 }
5323
5324 a {
5325 &.add,
5326 &.remove {
5327 width: 40px;
5328 height: 40px;
5329 }
5330 }
5331 }
5332 }
5333 }
5334 }
5335 }
5336
5337 .everest-forms-nav-wrapper {
5338 nav.evf-nav-tab-wrapper {
5339 width: calc(100% - 269px);
5340 }
5341
5342 .evf-forms-nav-right {
5343 width: 269px;
5344
5345 .evf-shortcode-field {
5346 input {
5347 display: none;
5348 }
5349
5350 button {
5351 border-radius: 3px;
5352 }
5353 }
5354 }
5355 }
5356
5357 .everest-forms-tab-content {
5358 height: calc(100vh - 172px);
5359 }
5360 }
5361 }
5362
5363 .evf-nav-tab-wrapper {
5364 overflow-x: auto;
5365 }
5366
5367 .everest-forms_page_evf-settings {
5368 .everest-forms {
5369 .everest-forms-settings {
5370 table {
5371 &.form-table {
5372 th {
5373 padding: 15px 0 15px;
5374 }
5375 }
5376 }
5377 }
5378 }
5379 }
5380
5381 .everest-forms-builder-setup {
5382 .everest-forms {
5383 #everest-forms-setup-name {
5384 width: auto;
5385 }
5386
5387 .evf-setup-desc {
5388 a {
5389 width: 200px;
5390 }
5391 }
5392 }
5393 }
5394 }
5395
5396 /**
5397 * Optimisation for screens 600px and smaller.
5398 */
5399 @media screen and (max-width: 600px) {
5400 .everest-forms_page_evf-builder,
5401 .everest-forms_page_evf-settings {
5402 .everest-forms {
5403 .evf-nav-tab-wrapper {
5404 a {
5405 &.nav-tab {
5406 margin: 0;
5407 }
5408 }
5409 }
5410 }
5411 }
5412
5413 .everest-forms-builder-setup {
5414 .everest-forms {
5415 width: 100%;
5416 margin: 20px 0;
5417
5418 .evf-setup-desc a {
5419 display: block;
5420 margin-bottom: 30px;
5421 text-align: center;
5422 width: 100%;
5423 margin-left: 0;
5424 }
5425 }
5426 }
5427
5428 .everest-forms_page_evf-builder {
5429 #wpbody-content {
5430 padding-bottom: 0;
5431 }
5432
5433 #everest-forms-builder {
5434 position: initial;
5435
5436 #everest-forms-builder-form {
5437 position: relative;
5438 }
5439
5440 .evf-tab-content {
5441 .everest-forms-panel-content-wrap {
5442 padding: 20px 20px 0;
5443
5444 .evf-admin-row {
5445 flex-direction: column;
5446 margin: 0 0 20px;
5447 position: relative;
5448
5449 .evf-admin-grid {
5450 &.evf-grid-1,
5451 &.evf-grid-2,
5452 &.evf-grid-3 {
5453 width: auto;
5454 }
5455 }
5456 }
5457 }
5458 }
5459
5460 .everest-forms-nav-wrapper {
5461 nav.evf-nav-tab-wrapper {
5462 width: calc(100% - 207px);
5463 }
5464
5465 .evf-forms-nav-right {
5466 width: 207px;
5467 margin-top: 10px;
5468 padding: 9px 17px;
5469
5470 .evf-shortcode-field {
5471 display: none;
5472 }
5473 }
5474 }
5475
5476 .evf-tab-content {
5477 .everest-forms-panel {
5478 .everest-forms-panel-sidebar-content {
5479 flex-direction: column;
5480
5481 .everest-forms-panel-sidebar,
5482 .everest-forms-panel-content-wrap {
5483 width: 100%;
5484 }
5485
5486 .everest-forms-panel-content-wrap {
5487 padding: 0;
5488 }
5489 }
5490 }
5491
5492 .evf-choices-list {
5493 li {
5494 input[type='text']='text'] {
5495 width: 84%;
5496 }
5497 }
5498 }
5499 }
5500 }
5501 }
5502
5503 .everest-forms {
5504 .everest-forms-integration-content {
5505 flex-wrap: wrap;
5506
5507 .integration-addon-detail {
5508 width: 100%;
5509 margin: 0 20px;
5510 border-bottom: 1px solid #ced4da;
5511 border-right: none;
5512 padding-left: inherit;
5513 }
5514
5515 .integration-connection-detail {
5516 width: 100%;
5517 }
5518 }
5519
5520 .everest-forms-integrations-connection {
5521 .everest-forms-integrations {
5522 .integration-header-info {
5523 .integration-detail {
5524 flex-direction: column;
5525 align-items: flex-start;
5526 }
5527 }
5528
5529 .integration-header-info {
5530 align-items: flex-start;
5531
5532 .integration-status {
5533 margin-top: 15px;
5534 }
5535
5536 .integration-detail {
5537 .logo {
5538 margin-bottom: 15px;
5539 }
5540 }
5541 }
5542 }
5543 }
5544 }
5545 }
5546
5547 /**
5548 * Optimisation for screens 400px and smaller.
5549 */
5550 @media screen and (max-width: 400px) {
5551 #everest-forms-builder {
5552 .evf-tab-lists li {
5553 a {
5554 padding: 15px;
5555 }
5556
5557 .dashicons {
5558 font-size: 24px;
5559 }
5560 }
5561
5562 .evf-tab-content {
5563 .everest-forms-panel {
5564 .everest-forms-panel-sidebar {
5565 .evf-registered-buttons {
5566 .evf-registered-item {
5567 width: 47%;
5568 }
5569 }
5570 }
5571 }
5572 }
5573 }
5574
5575 .jconfirm.jconfirm-white .jconfirm-box,
5576 .jconfirm.jconfirm-light .jconfirm-box {
5577 width: 90% !important;
5578 }
5579 }
5580