PluginProbe
weForms – Easy Drag & Drop Contact Form Builder For WordPress / 1.4.3
weForms – Easy Drag & Drop Contact Form Builder For WordPress v1.4.3
1.6.7 1.6.8 1.6.9 1.6.12 1.6.13 1.6.14 1.6.15 1.6.16 1.6.17 1.6.18 1.6.19 1.6.2 1.6.20 1.6.21 1.6.22 1.6.23 1.6.24 1.6.25 1.6.26 1.6.27 1.6.28 1.6.3 1.6.4 1.6.5 1.6.6 All 74 releases
weforms / assets / wpuf / css / wpuf-form-builder.css

wpuf-form-builder.css in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.4.3, at assets/wpuf/css/wpuf-form-builder.css

1,375 lines 33.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 [v-cloak] {
2 display: none;
3 }
4 .wpuf-pro-text-alert {
5 font-style: italic;
6 color: #cccccc;
7 }
8 .wpuf-pro-text-alert a {
9 text-decoration: none;
10 color: #aaa;
11 }
12 #wpuf-pro-content {
13 opacity: 0.7;
14 }
15 .clearfix:before,
16 .clearfix:after {
17 content: " ";
18 display: table;
19 }
20 .clearfix:after {
21 clear: both;
22 }
23 .pull-left {
24 float: left !important;
25 }
26 .pull-right {
27 float: right !important;
28 }
29 .text-center {
30 text-align: center;
31 }
32 .text-right {
33 text-align: right;
34 }
35 .margin-0 {
36 margin: 0;
37 }
38 .margin-bottom-10 {
39 margin-bottom: 10px;
40 }
41 .list-inline {
42 padding-left: 0;
43 list-style: none;
44 margin-left: -5px;
45 }
46 .list-inline > li {
47 display: inline-block;
48 padding-left: 5px;
49 padding-right: 5px;
50 }
51 .disabled {
52 pointer-events: none;
53 cursor: not-allowed;
54 opacity: 0.7;
55 }
56 .label-hr {
57 border-bottom: 1px solid #ccc;
58 display: block;
59 padding-bottom: 8px;
60 }
61 .slide-fade-enter-active {
62 -webkit-transition: all 0.6s;
63 -o-transition: all 0.6s;
64 transition: all 0.6s;
65 overflow: hidden;
66 }
67 .slide-fade-leave-active {
68 -webkit-transition: all 0.4s;
69 -o-transition: all 0.4s;
70 transition: all 0.4s;
71 overflow: hidden;
72 }
73 .slide-fade-enter,
74 .slide-fade-leave-active {
75 opacity: .3 !important;
76 max-height: 0 !important;
77 margin: 0 !important;
78 }
79 .sweet-alert {
80 border-radius: 0;
81 }
82 .sweet-alert h2 {
83 font-size: 26px;
84 line-height: 1.6;
85 }
86 .sweet-alert p {
87 font-size: 15px;
88 font-weight: 400;
89 color: #656565;
90 line-height: 1.7;
91 }
92 .sweet-alert p a {
93 text-decoration: none;
94 }
95 .sweet-alert button {
96 border-radius: 3px;
97 padding: 10px 20px;
98 min-width: 100px;
99 }
100 .loader,
101 .loader:after {
102 border-radius: 50%;
103 width: 25px;
104 height: 25px;
105 }
106 .loader {
107 display: inline-block;
108 position: relative;
109 text-indent: -9999em;
110 border-top: 3px solid rgba(0, 115, 170, 0.2);
111 border-right: 3px solid rgba(0, 115, 170, 0.2);
112 border-bottom: 3px solid rgba(0, 115, 170, 0.2);
113 border-left: 3px solid #0073aa;
114 -webkit-transform: translateZ(0);
115 -ms-transform: translateZ(0);
116 transform: translateZ(0);
117 -webkit-animation: wpuf_form_builder_loader 1.1s infinite linear;
118 animation: wpuf_form_builder_loader 1.1s infinite linear;
119 }
120 .button.button-ajax-working .loader {
121 display: inline-block;
122 width: 17px;
123 height: 17px;
124 top: 4px;
125 margin-right: 3px;
126 border-top: 1px solid #66c6e4;
127 border-right: 1px solid #66c6e4;
128 border-bottom: 1px solid #66c6e4;
129 border-left: 1px solid rgba(102, 198, 228, 0);
130 }
131 @-webkit-keyframes wpuf_form_builder_loader {
132 0% {
133 -webkit-transform: rotate(0deg);
134 transform: rotate(0deg);
135 }
136 100% {
137 -webkit-transform: rotate(360deg);
138 transform: rotate(360deg);
139 }
140 }
141 @keyframes wpuf_form_builder_loader {
142 0% {
143 -webkit-transform: rotate(0deg);
144 transform: rotate(0deg);
145 }
146 100% {
147 -webkit-transform: rotate(360deg);
148 transform: rotate(360deg);
149 }
150 }
151 #toast-container.toast-top-right {
152 top: 80px;
153 right: 18px;
154 }
155 #toast-container > div {
156 opacity: 1;
157 }
158 #toast-container > :hover {
159 opacity: .9;
160 }
161 .wp-core-ui .button-group.wpuf-flex-button-group {
162 position: relative;
163 z-index: 1;
164 display: flex;
165 flex-flow: row nowrap;
166 justify-content: flex-start;
167 align-content: center;
168 align-items: center;
169 }
170 .wp-core-ui .button-group.wpuf-flex-button-group .button {
171 flex-grow: 1;
172 flex-shrink: 1;
173 flex-basis: 0;
174 align-self: auto;
175 text-align: center;
176 }
177 .selectize-input {
178 padding: 6px 5px;
179 border: 1px solid #ddd;
180 }
181 .selectize-dropdown .active {
182 background-color: #0073aa;
183 color: #fff;
184 }
185 .selectize-element-group {
186 display: none;
187 }
188 .selectize-element-group + .selectize-control {
189 display: none;
190 }
191 .selectize-element-group.active + .selectize-control {
192 display: block;
193 margin-top: 10px;
194 }
195 .selectize-control.multi .selectize-input [data-value] {
196 text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
197 -webkit-border-radius: 3px;
198 -moz-border-radius: 3px;
199 border-radius: 3px;
200 background-color: rgba(0, 115, 170, 0.64);
201 background-image: -moz-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
202 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 115, 170, 0.4)), to(#0073aa));
203 background-image: -webkit-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
204 background-image: -o-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
205 background-image: linear-gradient(to bottom, rgba(0, 115, 170, 0.4), #0073aa);
206 background-repeat: repeat-x;
207 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
208 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
209 box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
210 }
211 .selectize-control.multi .selectize-input [data-value].active {
212 background-color: rgba(0, 115, 170, 0.64);
213 background-image: -moz-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
214 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 115, 170, 0.4)), to(#0073aa));
215 background-image: -webkit-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
216 background-image: -o-linear-gradient(top, rgba(0, 115, 170, 0.4), #0073aa);
217 background-image: linear-gradient(to bottom, rgba(0, 115, 170, 0.4), #0073aa);
218 background-repeat: repeat-x;
219 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
220 }
221 #wpuf-form-builder {
222 width: calc(100% - 200px);
223 padding-top: 10px;
224 position: fixed;
225 top: 25px;
226 background: #f1f1f1;
227 }
228 #wpuf-form-builder * {
229 box-sizing: border-box;
230 }
231 #wpuf-form-builder > fieldset > .nav-tab-wrapper .nav-tab:focus {
232 outline: 0;
233 -webkit-box-shadow: none;
234 box-shadow: none;
235 }
236 #wpuf-form-builder > fieldset > .nav-tab-wrapper .button {
237 font-weight: 400;
238 }
239 #wpuf-form-builder > fieldset > .tab-contents {
240 border-bottom: 1px solid #cccccc;
241 }
242 #wpuf-form-builder > fieldset > .tab-contents > .group {
243 display: none;
244 }
245 #wpuf-form-builder > fieldset > .tab-contents > .group.active {
246 display: block;
247 }
248 #wpuf-form-builder > fieldset > .tab-contents > .group:not(#wpuf-form-builder-container):not(#wpuf-form-builder-settings) {
249 height: calc(100vh - 125px);
250 overflow-y: auto;
251 padding-top: 15px;
252 }
253 #wpuf-form-builder .wpuf-settings-nav-tab-wrapper {
254 width: 200px;
255 }
256 #wpuf-form-builder .wp-picker-holder * {
257 box-sizing: content-box;
258 }
259 #wpuf-form-builder .tab-content {
260 height: calc(100vh - 140px);
261 overflow-y: auto;
262 margin-top: 15px;
263 }
264 #wpuf-form-builder-settings {
265 position: relative;
266 margin-top: 15px;
267 min-height: 380px;
268 }
269 #wpuf-form-builder-settings .nav-tab-wrapper {
270 position: absolute;
271 top: 0;
272 left: 0;
273 width: 170px;
274 border-bottom: 0;
275 }
276 #wpuf-form-builder-settings .nav-tab-wrapper a {
277 width: calc(100% - -1px);
278 margin-left: 0;
279 margin-bottom: .5em;
280 border-right: 1px solid #cccccc;
281 border-bottom: 1px solid #cccccc;
282 font-weight: 400;
283 font-size: 13px;
284 }
285 #wpuf-form-builder-settings .nav-tab-wrapper a.nav-tab-active {
286 border-right-color: #f1f1f1;
287 }
288 #wpuf-form-builder-settings .nav-tab-wrapper a:focus {
289 outline: 0;
290 -webkit-box-shadow: none;
291 box-shadow: none;
292 }
293 #wpuf-form-builder-settings .tab-contents {
294 margin-left: 170px;
295 border-left: 1px solid #cccccc;
296 padding-left: 20px;
297 }
298 #wpuf-form-builder-settings .tab-contents > .group {
299 display: none;
300 height: calc(100vh - 140px);
301 overflow-y: auto;
302 }
303 #wpuf-form-builder-settings .tab-contents > .group.active {
304 display: block;
305 }
306 #wpuf-form-builder-settings .tab-contents .form-table {
307 margin-top: 0;
308 }
309 #wpuf-form-builder-payment {
310 position: relative;
311 margin-top: 15px;
312 min-height: 380px;
313 }
314 #wpuf-form-builder-payment .nav-tab-wrapper {
315 position: absolute;
316 top: 0;
317 left: 0;
318 width: 170px;
319 border-bottom: 0;
320 }
321 #wpuf-form-builder-payment .nav-tab-wrapper a {
322 width: calc(100% - -1px);
323 margin-left: 0;
324 margin-bottom: .5em;
325 border-right: 1px solid #cccccc;
326 border-bottom: 1px solid #cccccc;
327 font-weight: 400;
328 font-size: 13px;
329 }
330 #wpuf-form-builder-payment .nav-tab-wrapper a.nav-tab-active {
331 border-right-color: #f1f1f1;
332 }
333 #wpuf-form-builder-payment .nav-tab-wrapper a:focus {
334 outline: 0;
335 -webkit-box-shadow: none;
336 box-shadow: none;
337 }
338 #wpuf-form-builder-payment .tab-contents {
339 margin-left: 170px;
340 border-left: 1px solid #cccccc;
341 padding-left: 20px;
342 }
343 #wpuf-form-builder-payment .tab-contents > .group {
344 display: none;
345 height: calc(100vh - 140px);
346 overflow-y: auto;
347 }
348 #wpuf-form-builder-payment .tab-contents > .group.active {
349 display: block;
350 }
351 #wpuf-form-builder-payment .tab-contents .form-table {
352 margin-top: 0;
353 }
354 #wpuf-form-builder-container {
355 position: relative;
356 }
357 #wpuf-form-builder-container header {
358 height: 45px;
359 border-right: 1px solid #cccccc;
360 }
361 #wpuf-form-builder-container header .form-title {
362 cursor: pointer;
363 font-size: 1.3em;
364 font-weight: 600;
365 float: left;
366 margin-right: 10px;
367 margin-top: 10px;
368 line-height: 1.5;
369 max-width: 300px;
370 white-space: nowrap;
371 overflow: hidden;
372 text-overflow: ellipsis;
373 }
374 #wpuf-form-builder-container header .form-title:hover {
375 background-color: rgba(85, 85, 85, 0.2);
376 }
377 #wpuf-form-builder-container header .form-switcher-arrow {
378 cursor: pointer;
379 font-size: 24px;
380 margin-top: 10px;
381 line-height: 1;
382 width: 20px;
383 text-align: center;
384 }
385 #wpuf-form-builder-container header .form-switcher-arrow:hover {
386 background-color: rgba(85, 85, 85, 0.2);
387 }
388 #wpuf-form-builder-container header .form-id {
389 color: #fff;
390 background-color: #008ec2;
391 line-height: 170%;
392 padding: 0 8px;
393 border-radius: 2px;
394 font-size: 13px;
395 display: inline-block;
396 margin: 10px 0 0 15px;
397 cursor: pointer;
398 }
399 #wpuf-form-builder-container section {
400 height: calc(100vh - 170px);
401 overflow-y: auto;
402 }
403 #wpuf-form-builder-container #builder-form-fields {
404 position: absolute;
405 top: 0;
406 right: 0;
407 width: 360px;
408 }
409 #wpuf-form-builder-container #builder-form-fields header ul {
410 margin: 0;
411 }
412 #wpuf-form-builder-container #builder-form-fields header ul li {
413 width: 50%;
414 text-align: center;
415 float: left;
416 line-height: 1;
417 margin: 0;
418 }
419 #wpuf-form-builder-container #builder-form-fields header ul li a {
420 text-decoration: none;
421 line-height: 44px;
422 display: block;
423 background-color: #e5e5e5;
424 color: #777;
425 border-bottom: 1px solid #cccccc;
426 -webkit-transition: background-color 0.4s;
427 -o-transition: background-color 0.4s;
428 transition: background-color 0.4s;
429 }
430 #wpuf-form-builder-container #builder-form-fields header ul li a:hover {
431 background-color: #f2f2f2;
432 }
433 #wpuf-form-builder-container #builder-form-fields header ul li a:focus {
434 outline: 0;
435 -webkit-box-shadow: none;
436 box-shadow: none;
437 }
438 #wpuf-form-builder-container #builder-form-fields header ul li.active a {
439 background-color: #fff;
440 color: #444;
441 border-bottom: 1px solid #fff;
442 }
443 #wpuf-form-builder-container #builder-form-fields header ul li:first-child {
444 border-right: 1px solid #cccccc;
445 }
446 #wpuf-form-builder-container #builder-form-fields section {
447 background-color: #fff;
448 border-right: 1px solid #cccccc;
449 }
450 #wpuf-form-builder-container #builder-form-fields section .wpuf-form-builder-panel {
451 padding: 10px;
452 }
453 #wpuf-form-builder-container #builder-stage {
454 margin-right: 360px;
455 }
456 #wpuf-form-builder-container #builder-stage section {
457 background-color: #6b6b6b;
458 padding: 30px;
459 }
460 #wpuf-form-builder-container #builder-stage section #form-preview {
461 background-color: #fff;
462 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
463 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
464 padding: 25px;
465 max-width: 800px;
466 margin: 0 auto;
467 }
468 #form-preview-stage .field-items {
469 position: relative;
470 background-color: #fff;
471 }
472 #form-preview-stage .field-items .control-buttons {
473 position: absolute;
474 top: 0;
475 left: 0;
476 z-index: 10;
477 display: none;
478 width: 100%;
479 height: 100%;
480 margin: 0;
481 text-align: center;
482 background: rgba(255, 185, 0, 0.08);
483 border: 1px dashed #ffb900;
484 }
485 #form-preview-stage .field-items .control-buttons p {
486 position: absolute;
487 top: 50%;
488 left: 50%;
489 margin: -14px 0 0 -61px;
490 line-height: 1;
491 color: #eee;
492 background-color: #23282d;
493 }
494 #form-preview-stage .field-items .control-buttons i {
495 cursor: pointer;
496 padding: 8px;
497 }
498 #form-preview-stage .field-items .control-buttons i.move {
499 cursor: move;
500 }
501 #form-preview-stage .field-items .control-buttons i:hover {
502 background-color: #0073aa;
503 }
504 #form-preview-stage .field-items:hover .control-buttons {
505 display: block;
506 }
507 #form-preview-stage .field-items.current-editing {
508 background-color: rgba(255, 185, 0, 0.15);
509 }
510 #form-preview-stage .field-items.current-editing.ui-sortable-helper {
511 background-color: #fff;
512 }
513 #form-preview-stage .field-items.ui-sortable-helper {
514 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
515 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
516 }
517 #form-preview-stage .form-preview-stage-dropzone {
518 background-color: rgba(255, 185, 0, 0.3) !important;
519 border: 1px solid #ffb900;
520 height: 50px;
521 }
522 #form-preview-stage .wpuf-submit + .button + .form-preview-stage-dropzone,
523 #form-preview-stage .field-items.empty-list-item + .form-preview-stage-dropzone {
524 display: none;
525 }
526 #form-preview-stage .field-items.empty-list-item {
527 padding: 24px;
528 margin: 0;
529 border: 1px dashed rgba(35, 40, 45, 0.5);
530 }
531 #form-preview-stage .form-preview-stage-dropzone + .field-items.empty-list-item {
532 display: none;
533 }
534 #form-preview-stage .hidden-field-list {
535 border-top: 1px dashed #cccccc;
536 }
537 #form-preview-stage .hidden-field-list h4 {
538 font-weight: 400;
539 font-size: 16px;
540 margin: 12px 0;
541 }
542 #form-preview-stage .hidden-field-list ul li {
543 background-color: #f1f1f1;
544 }
545 .panel-form-field-group {
546 margin-bottom: 15px;
547 }
548 .panel-form-field-group h3 {
549 margin: 0;
550 font-size: 15px;
551 border-bottom: 1px solid #eee;
552 padding-bottom: 10px;
553 cursor: pointer;
554 }
555 .panel-form-field-group h3 i {
556 float: right;
557 }
558 .panel-form-field-group .panel-form-field-buttons {
559 opacity: 1;
560 max-height: 100vh;
561 overflow: hidden;
562 margin: 15px 0 0;
563 }
564 .panel-form-field-group .button {
565 display: block;
566 width: 48%;
567 margin: 0 0 10px 0;
568 float: left;
569 text-align: left;
570 }
571 .panel-form-field-group .button:nth-child(odd) {
572 margin-right: 2%;
573 }
574 .panel-form-field-group .button.button-faded {
575 opacity: .5;
576 }
577 .button.ui-draggable-dragging {
578 margin: 0;
579 text-align: left;
580 }
581 .wpuf-form-builder-field-options .option-fields-section {
582 margin-bottom: 15px;
583 }
584 .wpuf-form-builder-field-options .section-title {
585 margin: 0;
586 font-size: 15px;
587 border-bottom: 1px solid #eee;
588 padding-bottom: 10px;
589 cursor: pointer;
590 }
591 .wpuf-form-builder-field-options .section-title i {
592 float: right;
593 }
594 .wpuf-form-builder-field-options .option-field-section-fields {
595 margin-top: 15px;
596 height: auto;
597 opacity: 1;
598 }
599 .wpuf-form-builder-field-options .panel-field-opt {
600 margin-bottom: 15px;
601 }
602 .wpuf-form-builder-field-options .panel-field-opt .field-helper-text {
603 color: rgba(35, 40, 45, 0.5);
604 margin-left: 6px;
605 }
606 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="text"],
607 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="range"],
608 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="number"] {
609 display: block;
610 width: 100%;
611 margin: 5px 0 0;
612 line-height: 1.75;
613 }
614 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > label {
615 display: block;
616 margin-bottom: 5px;
617 }
618 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-radio > ul {
619 margin-top: 0;
620 margin-bottom: 0;
621 }
622 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-select select {
623 width: 100%;
624 height: 32px;
625 margin: 4px 0 0;
626 }
627 .wpuf-form-builder-field-options .panel-field-opt .chosen-select + .chosen-container {
628 margin-top: 10px;
629 }
630 .wpuf-form-builder-field-options .panel-field-opt .label-title-block {
631 display: block;
632 margin-bottom: 3px;
633 }
634 .option-field-option-chooser {
635 margin: 12px 0 0;
636 }
637 .option-field-option-chooser.margin-0 {
638 margin: 0;
639 }
640 .option-field-option-chooser .selector,
641 .option-field-option-chooser .sort-handler,
642 .option-field-option-chooser .label,
643 .option-field-option-chooser .value,
644 .option-field-option-chooser .action-buttons {
645 float: left;
646 }
647 .option-field-option-chooser .selector {
648 width: 25px;
649 }
650 .option-field-option-chooser .selector input {
651 margin-top: 14px;
652 }
653 .option-field-option-chooser .sort-handler {
654 width: 22px;
655 cursor: ns-resize;
656 }
657 .option-field-option-chooser .sort-handler i {
658 margin-top: 14px;
659 font-size: 15px;
660 }
661 .option-field-option-chooser .label {
662 width: 208px;
663 margin-right: 8px;
664 }
665 .option-field-option-chooser.show-value .label,
666 .option-field-option-chooser.show-value .value {
667 width: 100px;
668 margin-right: 8px;
669 }
670 .option-field-option-chooser .header .label,
671 .option-field-option-chooser .header .value {
672 color: #909090;
673 }
674 .option-field-option-chooser .action-buttons {
675 width: 36px;
676 }
677 .option-field-option-chooser .action-buttons i {
678 cursor: pointer;
679 font-size: 16px;
680 margin-top: 13px;
681 }
682 .option-field-option-chooser .plus-buttons {
683 padding: 5px;
684 font-size: 18px;
685 text-align: center;
686 cursor: pointer;
687 border: 1px solid #ccc;
688 width: 61%;
689 margin-left: 14%;
690 }
691 .panel-field-opt-repeater-columns .repeater-columns li > div {
692 float: left;
693 }
694 .panel-field-opt-repeater-columns .repeater-columns .sorter {
695 width: 30px;
696 }
697 .panel-field-opt-repeater-columns .repeater-columns .sorter i {
698 cursor: ns-resize;
699 font-size: 16px;
700 margin-top: 5px;
701 }
702 .panel-field-opt-repeater-columns .repeater-columns .input-container {
703 width: 195px;
704 margin-right: 10px;
705 }
706 .panel-field-opt-repeater-columns .repeater-columns .input-container input {
707 width: 100%;
708 }
709 .panel-field-opt-repeater-columns .repeater-columns .action-buttons {
710 width: 50px;
711 }
712 .panel-field-opt-repeater-columns .repeater-columns .action-buttons i {
713 cursor: pointer;
714 font-size: 16px;
715 padding: 0 3px;
716 margin-top: 4px;
717 }
718 .panel-field-opt-textarea textarea {
719 display: block;
720 width: 100%;
721 margin: 5px 0 0;
722 line-height: 1.75;
723 }
724 .panel-field-html-help-text pre {
725 max-width: 100%;
726 overflow-x: auto;
727 }
728 .panel-field-opt-select .opt-select-element {
729 display: block;
730 max-width: 100%;
731 }
732 ul.wpuf-form li .wpuf-text-editor .wp-editor-wrap {
733 border: 0;
734 }
735 .form-switcher-content {
736 position: absolute;
737 background-color: #f9f9f9;
738 min-width: 160px;
739 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
740 z-index: 9999;
741 margin: 0;
742 }
743 .form-switcher-content li {
744 margin: 0;
745 }
746 .form-switcher-content a {
747 color: black;
748 padding: 12px;
749 text-decoration: none;
750 display: block;
751 text-align: center;
752 }
753 .form-switcher-content a:hover {
754 color: #fff;
755 background-color: #008ec2;
756 }
757 .form-switcher-content a.active {
758 font-weight: bold;
759 color: #fff;
760 background-color: #008ec2;
761 }
762 .insert-photo-icon {
763 vertical-align: text-top;
764 color: #82878c;
765 font-size: 18px;
766 }
767 .password-strength-meter {
768 border-style: solid;
769 border-width: 1px;
770 float: left;
771 margin: 0;
772 padding: 3px 5px;
773 text-align: center;
774 width: 200px;
775 display: block;
776 background-color: #eee;
777 border-color: #ddd;
778 }
779 ul.wpuf-form li .wpuf-password-field {
780 width: 100%;
781 margin-bottom: 10px;
782 }
783 ul.wpuf-form li .wpuf-password-field:after {
784 clear: both;
785 content: "";
786 display: table;
787 }
788 .wpuf-recaptcha-placeholder {
789 width: 100%;
790 max-width: 304px;
791 }
792 .wpuf-merge-tag-wrap .merge-tag-link {
793 position: absolute;
794 right: 5px;
795 top: 30px;
796 color: #999;
797 text-decoration: none;
798 }
799 .wpuf-merge-tag-wrap .merge-tag-link:hover {
800 color: #555;
801 }
802 .wpuf-merge-tag-wrap .wpuf-merge-tags {
803 max-height: 110px;
804 overflow: hidden;
805 overflow-y: scroll;
806 border: 1px solid #e5e5e5;
807 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.04);
808 display: none;
809 position: absolute;
810 right: 0px;
811 top: 60px;
812 background: #fff;
813 z-index: 1000;
814 min-height: 150px;
815 }
816 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-head {
817 font-weight: bold;
818 background: #f0f0f0;
819 padding: 3px 10px;
820 }
821 .wpuf-merge-tag-wrap .wpuf-merge-tags .merge-tag-section ul {
822 margin: 0;
823 padding: 5px 10px;
824 }
825 .wpuf-form-template-modal {
826 background: #fff;
827 position: fixed;
828 top: 5%;
829 bottom: 5%;
830 right: 10%;
831 left: 10%;
832 display: none;
833 box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
834 z-index: 160000;
835 }
836 .wpuf-form-template-modal.show {
837 display: block;
838 }
839 .wpuf-form-template-modal * {
840 box-sizing: border-box;
841 }
842 .wpuf-form-template-modal a.close {
843 position: absolute;
844 top: 0;
845 right: 0;
846 font: 300 1.71429em "dashicons" !important;
847 color: #777;
848 content: '\f335';
849 display: inline-block;
850 padding: 10px 20px;
851 z-index: 5;
852 text-decoration: none;
853 height: 50px;
854 cursor: pointer;
855 border-left: 1px solid #ddd;
856 }
857 .wpuf-form-template-modal a.close:hover {
858 background: #eee;
859 opacity: 0.8;
860 text-decoration: none;
861 }
862 .wpuf-form-template-modal a.close:active {
863 background: #eee;
864 opacity: 0.4;
865 }
866 .wpuf-form-template-modal .modal-header {
867 position: absolute;
868 top: 0;
869 left: 0;
870 right: 0;
871 height: 50px;
872 z-index: 4;
873 border-bottom: 1px solid #ddd;
874 padding-left: 15px;
875 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
876 }
877 .wpuf-form-template-modal .modal-header h2 {
878 line-height: 50px;
879 text-align: left;
880 margin-top: 0;
881 color: #5d6d74;
882 font-size: 20px;
883 text-shadow: 0 1px 1px #fff;
884 }
885 .wpuf-form-template-modal .modal-header h2 small {
886 font-weight: normal;
887 font-size: 13px;
888 margin-left: 15px;
889 }
890 .wpuf-form-template-modal .content-container {
891 position: absolute;
892 top: 50px;
893 right: 0;
894 bottom: 50px;
895 left: 0;
896 overflow: auto;
897 padding: 2em 2em;
898 }
899 .wpuf-form-template-modal .content-container.no-footer {
900 bottom: 0;
901 }
902 .wpuf-form-template-modal .content {
903 margin: 0 auto;
904 max-width: 900px;
905 text-align: left;
906 }
907 .wpuf-form-template-modal .content ul {
908 width: 100%;
909 margin: 0;
910 padding: 0;
911 }
912 .wpuf-form-template-modal .content ul li {
913 text-align: center;
914 min-height: 280px;
915 width: 220px;
916 border: 0px;
917 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
918 position: relative;
919 border-radius: 3px;
920 margin-bottom: 30px;
921 float: left;
922 margin-left: 30px;
923 }
924 .wpuf-form-template-modal .content ul li h3 {
925 margin-top: 0;
926 margin-bottom: 0;
927 border: 0px;
928 background: #1E87B6;
929 padding: 13px;
930 font-weight: normal;
931 font-size: 13px;
932 color: #fff;
933 border-radius: 3px 3px 0px 0px;
934 text-align: left;
935 }
936 .wpuf-form-template-modal .content ul li .title {
937 font-size: 17px;
938 margin: 0 0 10px 0;
939 line-height: 23px;
940 }
941 .wpuf-form-template-modal .content ul li.template-active img,
942 .wpuf-form-template-modal .content ul li.template-inactive img {
943 max-width: 100%;
944 max-height: 211px;
945 }
946 .wpuf-form-template-modal .content ul li .form-middle-text {
947 margin-top: 70px;
948 font-size: 15px;
949 }
950 .wpuf-form-template-modal .content ul li .form-middle-text span.dashicons {
951 font-size: 45px;
952 color: #ddd;
953 margin: 0 auto;
954 width: auto;
955 height: auto;
956 display: block;
957 }
958 .wpuf-form-template-modal .content ul li .form-create-overlay {
959 position: absolute;
960 display: none;
961 }
962 .wpuf-form-template-modal .content ul li .form-create-overlay a.button.button-primary {
963 width: 200px;
964 min-height: 30px;
965 padding: 0;
966 color: #fff;
967 }
968 .wpuf-form-template-modal .content ul li.on-progress:before {
969 content: "\f463";
970 display: inline-block;
971 font: normal 20px/1 'dashicons';
972 color: #f56e28;
973 -webkit-animation: rotation 2s infinite linear;
974 animation: rotation 2s infinite linear;
975 position: absolute;
976 top: 40%;
977 left: 45%;
978 }
979 .wpuf-form-template-modal .content ul li.on-progress a {
980 pointer-events: none;
981 opacity: 0.2;
982 }
983 .wpuf-form-template-modal .content ul li:hover {
984 background: #fff;
985 }
986 .wpuf-form-template-modal .content ul li:hover .form-create-overlay {
987 animation: weFormsFadeIn .25s;
988 padding: 10px;
989 text-align: center;
990 display: flex;
991 flex-direction: column;
992 justify-content: center;
993 background: rgba(0, 0, 0, 0.7);
994 height: 100%;
995 width: 100%;
996 top: 0px;
997 left: 0px;
998 color: #fff;
999 border-radius: 3px;
1000 }
1001 .wpuf-form-template-modal .content ul li a {
1002 text-decoration: none;
1003 color: #555;
1004 padding: 20px;
1005 display: block;
1006 min-height: 118px;
1007 }
1008 .wpuf-form-template-modal .content ul li .title {
1009 font-size: 17px;
1010 margin: 0 0 10px 0;
1011 line-height: 23px;
1012 }
1013 .wpuf-form-template-modal .content ul li .description {
1014 color: #fff;
1015 }
1016 .wpuf-form-template-modal .content ul li:nth-child(3n+1) {
1017 margin-left: 0;
1018 clear: both;
1019 }
1020 .wpuf-form-template-modal .content ul li.template-inactive .title,
1021 .wpuf-form-template-modal .content ul li.template-inactive .description {
1022 color: #ddd;
1023 }
1024 .wpuf-form-template-modal .content ul li.blank-form {
1025 text-align: center;
1026 }
1027 .wpuf-form-template-modal .content ul li.blank-form span {
1028 display: block;
1029 }
1030 .wpuf-form-template-modal .content ul li.blank-form span.dashicons {
1031 font-size: 45px;
1032 color: #ddd;
1033 margin: 0 auto;
1034 width: auto;
1035 height: auto;
1036 }
1037 .wpuf-form-template-modal footer {
1038 position: absolute;
1039 left: 0;
1040 bottom: 0;
1041 width: 100%;
1042 padding: 12px 20px;
1043 border-top: 1px solid #ddd;
1044 background: #fff;
1045 text-align: left;
1046 }
1047 .wpuf-form-template-modal-backdrop {
1048 position: fixed;
1049 z-index: 159999;
1050 top: 0;
1051 left: 0;
1052 right: 0;
1053 bottom: 0;
1054 min-height: 360px;
1055 background: #000;
1056 opacity: .7;
1057 display: none;
1058 }
1059 .wpuf-form-template-modal-backdrop.show {
1060 display: block;
1061 }
1062 /* Smartphones (portrait and landscape) ----------- */
1063 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
1064 .wpuf-form-template-modal .modal-header h2 small {
1065 display: none;
1066 }
1067 .wpuf-form-template-modal .content ul li {
1068 float: none;
1069 width: 100%;
1070 margin-left: 0;
1071 }
1072 }
1073 .wpuf-toggle-switch {
1074 cursor: pointer;
1075 text-indent: -9999px;
1076 width: 25px;
1077 height: 15px;
1078 background: #ccc;
1079 display: block;
1080 border-radius: 100px;
1081 position: relative;
1082 }
1083 .wpuf-toggle-switch:after {
1084 content: '';
1085 position: absolute;
1086 top: 2px;
1087 left: 2px;
1088 width: 12px;
1089 height: 12px;
1090 background: #fff;
1091 border-radius: 50%;
1092 transition: 0.3s;
1093 }
1094 .wpuf-toggle-switch.checked {
1095 background: #0085ba;
1096 }
1097 .wpuf-toggle-switch.checked:after {
1098 left: calc(90%);
1099 transform: translateX(-100%);
1100 }
1101 .wpuf-toggle-switch.big {
1102 width: 35px;
1103 height: 20px;
1104 }
1105 .wpuf-toggle-switch.big:after {
1106 top: 3px;
1107 left: 3px;
1108 width: 15px;
1109 height: 15px;
1110 }
1111 .wpuf-toggle-switch.big.checked:after {
1112 left: calc(95%);
1113 }
1114 .wpuf-integrations-wrap:before,
1115 .wpuf-integrations-wrap:after {
1116 content: " ";
1117 display: table;
1118 }
1119 .wpuf-integrations-wrap:after {
1120 clear: both;
1121 }
1122 .wpuf-integrations-wrap:before,
1123 .wpuf-integrations-wrap:after {
1124 content: " ";
1125 display: table;
1126 }
1127 .wpuf-integrations-wrap:after {
1128 clear: both;
1129 }
1130 .wpuf-integrations-wrap .wpuf-integration {
1131 margin-bottom: 15px;
1132 background-color: #fff;
1133 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1134 border: 1px solid #e5e5e5;
1135 }
1136 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header {
1137 padding: 0;
1138 position: relative;
1139 margin: 0 auto;
1140 border-bottom: 1px solid #eee;
1141 display: flex;
1142 flex-direction: row;
1143 }
1144 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-toggle {
1145 width: 65px;
1146 padding: 10px 10px 8px 14px;
1147 border-right: 1px solid #eee;
1148 margin-right: 10px;
1149 }
1150 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label {
1151 width: 100%;
1152 padding-top: 10px;
1153 font-weight: 500;
1154 font-size: 1.1em;
1155 }
1156 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label img.icon {
1157 height: 24px;
1158 width: auto;
1159 float: left;
1160 margin-top: -3px;
1161 margin-right: 5px;
1162 border: 1px solid #eee;
1163 border-radius: 50%;
1164 }
1165 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-label .label-premium {
1166 font-weight: normal;
1167 font-size: 11px;
1168 background: #7cbb34;
1169 color: #fff;
1170 border-radius: 3px;
1171 padding: 3px 5px;
1172 margin-left: 5px;
1173 }
1174 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions {
1175 width: 44px;
1176 display: block;
1177 }
1178 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions button.toggle-area {
1179 border: none;
1180 border-left: 1px solid #eee;
1181 background-color: #fff;
1182 width: 100%;
1183 height: 100%;
1184 outline: none;
1185 }
1186 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1187 content: "\f140";
1188 content: "\f142";
1189 display: inline-block;
1190 font: normal 20px/1 dashicons;
1191 speak: none;
1192 -webkit-font-smoothing: antialiased;
1193 -moz-osx-font-smoothing: grayscale;
1194 text-decoration: none !important;
1195 }
1196 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-settings {
1197 display: none;
1198 }
1199 .wpuf-integrations-wrap .wpuf-integration.collapsed .wpuf-integration-header .wpuf-integration-header-actions .toggle-indicator:before {
1200 content: "\f140";
1201 }
1202 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings {
1203 padding: 15px;
1204 }
1205 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings p:first-child {
1206 margin-top: 0;
1207 }
1208 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row {
1209 margin-bottom: 10px;
1210 }
1211 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1212 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1213 content: " ";
1214 display: table;
1215 }
1216 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1217 clear: both;
1218 }
1219 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:before,
1220 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1221 content: " ";
1222 display: table;
1223 }
1224 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row:after {
1225 clear: both;
1226 }
1227 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label {
1228 float: left;
1229 width: 160px;
1230 }
1231 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater {
1232 text-decoration: none;
1233 float: right;
1234 margin-right: 10px;
1235 }
1236 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field-label a.wpuf-integration-updater.updating .dashicons:before {
1237 display: inline-block;
1238 -webkit-animation: rotation 2s infinite linear;
1239 animation: rotation 2s infinite linear;
1240 }
1241 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field {
1242 float: left;
1243 width: 80%;
1244 position: relative;
1245 }
1246 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-int-field-small {
1247 max-width: 350px;
1248 position: relative;
1249 }
1250 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .merge-tag-link {
1251 top: 5px;
1252 }
1253 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings .wpuf-int-form-row .wpuf-int-field .wpuf-merge-tag-wrap .wpuf-merge-tags {
1254 top: 30px;
1255 }
1256 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset {
1257 border: 1px solid #eee;
1258 padding: 10px;
1259 margin-bottom: 10px;
1260 }
1261 .wpuf-integrations-wrap .wpuf-integration .wpuf-integration-settings fieldset legend {
1262 padding: 0 10px;
1263 }
1264 #wpuf-toggle-field-options,
1265 #wpuf-toggle-show-form {
1266 background: #008ec2;
1267 text-align: center;
1268 cursor: pointer;
1269 color: #fff;
1270 border-radius: 0;
1271 margin-left: 10px;
1272 margin-top: 10px;
1273 font-size: 14px;
1274 font-weight: 400;
1275 float: right;
1276 width: 100%;
1277 padding: 10px;
1278 display: none;
1279 }
1280 @media (min-width: 768px) and (max-width: 991px) {
1281 #wpuf-form-builder {
1282 width: 100% !important;
1283 right: 0;
1284 }
1285 #wpuf-form-builder > fieldset {
1286 margin-left: 36px;
1287 }
1288 #wpuf-form-builder #wpuf-form-builder-container #builder-stage {
1289 margin-right: 290px;
1290 }
1291 #wpuf-form-builder #wpuf-form-builder-container #builder-form-fields {
1292 width: 290px;
1293 }
1294 .panel-form-field-group .button {
1295 font-size: 11px;
1296 }
1297 }
1298 @media (max-width: 767px) {
1299 #wpuf-form-builder-container #builder-stage section {
1300 padding: 8px;
1301 }
1302 #wpuf-form-builder-container #builder-stage section #form-preview {
1303 padding: 5px;
1304 }
1305 #wpuf-form-builder {
1306 width: 100% !important;
1307 right: 0;
1308 }
1309 #wpuf-form-builder #wpuf-toggle-field-options {
1310 display: inline-block;
1311 }
1312 #wpuf-form-builder #wpuf-form-builder-container #builder-stage {
1313 width: 100%;
1314 margin-right: 0;
1315 }
1316 #wpuf-form-builder-container #builder-form-fields {
1317 width: 100%;
1318 display: none;
1319 }
1320 #wpuf-form-builder-container #builder-form-fields.show {
1321 display: block;
1322 }
1323 #wpuf-form-builder h2.nav-tab-wrapper .nav-tab {
1324 margin: 10px 6px 0 0;
1325 border-bottom: 1px solid #ccc;
1326 font-size: 10px;
1327 }
1328 #wpuf-form-builder h2.nav-tab-wrapper span.pull-right {
1329 margin-top: 10px;
1330 margin-left: 5px;
1331 }
1332 #wpuf-form-builder #wpuf-toggle-show-form.show {
1333 display: block;
1334 }
1335 #wpuf-form-builder #wpuf-toggle-field-options.hide {
1336 display: none;
1337 }
1338 #wpuf-form-builder-settings .nav-tab-wrapper {
1339 width: 120px;
1340 }
1341 #wpuf-form-builder-settings .tab-contents {
1342 margin-left: 120px;
1343 }
1344 #wpuf-form-builder-settings .form-table td select {
1345 height: 34px;
1346 }
1347 #wpuf-form-builder-settings input[type="checkbox"] {
1348 height: 18px;
1349 width: 18px;
1350 }
1351 #wpbody #wpuf-form-builder-settings input,
1352 #wpbody #wpuf-form-builder-settings select,
1353 #wpbody #wpuf-form-builder-settings .form-table td textarea,
1354 #wpuf-form-builder-settings .form-table td p,
1355 #wpuf-form-builder-settings .form-table,
1356 #wpuf-form-builder-settings .form-table td,
1357 #wpuf-form-builder-settings .form-table th,
1358 #wpuf-form-builder-settings .wp-picker-container .wp-color-result.button {
1359 font-size: 12px;
1360 }
1361 #wpuf-form-builder-settings input[type="checkbox"]:checked:before {
1362 margin: -6px -8px;
1363 }
1364 ul.wpuf-form li.country_list,
1365 ul.wpuf-form li.address_field {
1366 max-width: 200px;
1367 }
1368 .wpuf-form-template-modal .content ul li {
1369 margin-left: 0;
1370 }
1371 .wpuf-form-template-modal .modal-header h2 small {
1372 display: none;
1373 }
1374 }
1375