PluginProbe ʕ •ᴥ•ʔ
JetFormBuilder — Dynamic Blocks Form Builder / 1.2.6
JetFormBuilder — Dynamic Blocks Form Builder v1.2.6
3.6.3.1 3.6.3 3.6.2.2 3.6.2.1 3.6.2 3.6.1.1 3.6.1 3.6.0.1 trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 1.4.2 1.4.3 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.1.0 2.1.1 2.1.10 2.1.11 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 3.0.0 3.0.0.1 3.0.0.2 3.0.0.3 3.0.1 3.0.1.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.0.1 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 3.1.8 3.1.9 3.2.0 3.2.1 3.2.2 3.2.3 3.3.0 3.3.1 3.3.2 3.3.3 3.3.3.1 3.3.4 3.3.4.1 3.3.4.2 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.5.1 3.4.5.2 3.4.6 3.4.7 3.4.7.1 3.5.0 3.5.1 3.5.1.1 3.5.1.2 3.5.2 3.5.2.1 3.5.3 3.5.4 3.5.5 3.5.6 3.5.6.1 3.5.6.2 3.5.6.3 3.6.0
jetformbuilder / assets / css / editor.css
jetformbuilder / assets / css Last commit date
admin 4 years ago editor.css 4 years ago frontend.css 4 years ago icons.css 4 years ago
editor.css
787 lines
1 :root {
2 --jet-fb__range-field-slider--size: 18px;
3 --jet-fb__range-field-range--height: 4px;
4 }
5
6 .jet-form-builder {
7 background: #fff;
8 margin: 20px 0 0 0;
9 padding: 0;
10 border: 1px solid #ccd0d4;
11 }
12
13 .jet-form-builder > .components-drop-zone__provider {
14 display: flex;
15 justify-content: space-between;
16 min-height: 60vh;
17 flex-wrap: wrap;
18 }
19
20 .jet-form-builder__sidebar {
21 flex: 0 0 30%;
22 order: 2;
23 border-left: 1px solid #e2e4e7;
24 }
25
26 .jet-form-builder__content,
27 .editor-styles-wrapper {
28 flex: 0 0 65%;
29 padding: 10px 0 35px;
30 order: 1;
31 }
32
33 .block-editor-block-contextual-toolbar:not([data-align="wide"]):not([data-align="full"]) .block-editor-block-mover:not(.is-horizontal).is-visible {
34 opacity: 1;
35 }
36
37 .editor-styles-wrapper .block-editor-block-list__block {
38 min-height: 45px;
39 }
40
41 .jet-form-builder .editor-post-title__block {
42 padding-left: 40px;
43 }
44
45 .block-editor-block-list__layout.is-root-container {
46 padding-left: 40px;
47 }
48
49 .jet-form-builder__header {
50 width: 100%;
51 flex: 0 0 100%;
52 box-sizing: border-box;
53 display: flex;
54 padding: 0 40px 0 6px;
55 justify-content: space-between;
56 align-items: center;
57 border-bottom: 1px solid #e2e4e7;
58 height: 60px;
59 }
60
61 .jet-form-toggle-box {
62 padding: 0 12px;
63 }
64
65 .jet-form-toggle-box .components-base-control__field {
66 margin: 0;
67 }
68
69 .jet-form-action {
70 margin-bottom: 10px;
71 }
72
73 .jet-form-action .components-base-control__field {
74 margin: 0;
75 }
76
77 .jet-form-edit-modal .components-base-control__field {
78 display: flex;
79 padding: 12px 0 5px;
80 border-top: 1px solid #ddd;
81 }
82
83 .jet-form-edit-modal .components-flex-item,
84 .jet-form-edit-modal .components-flex__item {
85 flex: 1;
86 }
87
88 .jet-form-edit-modal .jet-post-field-control .components-base-control:nth-child(2) .components-select-control .components-flex__item {
89 display: none;
90 }
91
92 .jet-form-edit-modal .jet-user-meta__row .components-base-control__field {
93 border: none;
94 padding: 0;
95 margin: 0;
96 }
97
98 .jet-form-edit-modal .components-base-control:first-child .components-base-control__field {
99 border-top: none;
100 padding-top: 0;
101 }
102
103 .jet-form-edit-modal .components-base-control__label {
104 flex: 1;
105 }
106
107 .jet-form-edit-modal .components-base-control .components-base-control__label {
108 padding-top: 6px;
109 margin-right: 6px;
110 }
111
112 .jet-form-editor__macros-wrap {
113 position: relative;
114 }
115
116 .jet-form-edit-modal .jet-form-editor__macros-wrap .components-base-control .components-base-control__field {
117 padding-top: 12px;
118 border-top: 1px solid #ddd;
119 }
120
121 .jet-form-edit-modal .jet-user-meta__row {
122 display: flex;
123 padding: 1em;
124 border: 1px solid #ccc;
125 align-items: center;
126 border-radius: 3px;
127 -webkit-box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
128 box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
129 justify-content: space-between;
130 }
131
132 .jet-form-edit-modal .jet-user-meta__row:not(:last-child) {
133 margin-bottom: 1em;
134 }
135
136 .jet-form-edit-modal .jet-user-meta__row .jet-field-map__row-label,
137 .jet-form-edit-modal .jet-user-meta__row .components-base-control__label {
138 flex: 1;
139 min-width: 150px;
140 overflow: hidden;
141 text-overflow: ellipsis;
142 max-width: none;
143 }
144
145 .jet-form-edit-modal .jet-user-meta__row .components-base-control,
146 .jet-form-edit-modal .jet-user-meta__row .components-text-control__input {
147 flex: 1;
148 }
149
150 .jet-form-editor__macros-trigger {
151 height: 36px;
152 min-height: 36px;
153 }
154
155 .jet-form-editor__macros-inserter {
156 position: absolute;
157 right: 1px;
158 top: 14px;
159 z-index: 20;
160 background: whitesmoke;
161 }
162
163 .jet-form-dynamic-preset {
164 display: flex;
165 align-items: flex-start;
166 position: relative;
167 }
168
169 .jet-form-dynamic-preset .components-base-control {
170 width: 100%;
171 }
172
173 .jet-form-dynamic-preset .components-base-control__field textarea {
174 padding-right: 36px;
175 width: calc(100% - 31px);
176 }
177
178 .jet-form-dynamic-preset .components-base-control__field input {
179 padding-right: 28px;
180 }
181
182 .jet-form-dynamic-preset__trigger {
183 width: 31px;
184 height: 31px;
185 box-sizing: border-box;
186 display: flex;
187 align-items: center;
188 justify-content: center;
189 border-radius: 0 2px 2px 0;
190 border: 1px solid #757575;
191 margin: 26px 0 0 0;
192 cursor: pointer;
193 position: absolute;
194 right: 0;
195 top: 0;
196 z-index: 20;
197 }
198
199 .jet-form-dynamic-preset__trigger.trigger__textarea {
200 margin-top: unset;
201 border-radius: 0 0 0 5px;
202 border-width: 0 0 1px 1px;
203 background-color: white;
204 top: 1px;
205 right: 1px;
206 }
207
208 .jet-form-dynamic-preset__trigger:not(.trigger__textarea) {
209 border-left-width: 0;
210 }
211
212 .jet-form-dynamic-preset__trigger:hover svg path {
213 fill: #007cba;
214 fill: var(--wp-admin-theme-color);
215 }
216
217 .jet-form-dynamic-preset__trigger svg {
218 width: 50%;
219 }
220
221 .jet-form-builder__flex-controls {
222 display: flex;
223 }
224
225 .jet-form-builder__flex-controls .repeater-item-column label {
226 flex: 0 0 1em;
227 margin-right: 1em;
228 }
229
230 .jet-form-builder__flex-controls .repeater-item-column input {
231 margin-right: 1em;
232 }
233
234 .field-mime-types.field-mime-types select[multiple] {
235 height: 7rem;
236 }
237
238 .field-mime-types.field-mime-types svg {
239 display: none;
240 }
241
242 .jet-user-meta-rows {
243 flex: 0 0 40%;
244 }
245
246 .jet-user-fields-map__list {
247 flex: 3;
248 padding-top: 0.5em;
249 margin-left: -8px;
250 }
251
252 .jet-user-fields-map__list .components-flex__item {
253 flex: 2;
254 }
255
256 .block-editor-block-list__block[data-type="jet-forms/form-break-field"] {
257 max-width: 100%;
258 margin-top: 28px;
259 margin-bottom: 28px;
260 }
261
262 .block-editor-block-list__block[data-type="jet-forms/group-break-field"] {
263 margin-top: 28px;
264 margin-bottom: 28px;
265 }
266
267 .block-editor-block-list__block[data-type="jet-forms/repeater-field"],
268 .block-editor-block-list__block[data-type="jet-forms/conditional-block"],
269 .block-editor-block-list__block[data-type^="jet-forms/"] .inside-block-options {
270 padding: 20px;
271 background: #fff;
272 -webkit-box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
273 box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
274 -webkit-transition: .3s all;
275 -o-transition: .3s all;
276 transition: .3s all;
277 }
278
279 .block-editor-block-list__block[data-type^="jet-forms/"] .inside-block-options {
280 margin-bottom: 20px;
281 }
282
283 .block-editor-block-list__block[data-type="jet-forms/repeater-field"]:hover,
284 .block-editor-block-list__block[data-type="jet-forms/conditional-block"]:hover {
285 -webkit-box-shadow: 0 20px 20px rgba(22, 43, 64, .12);
286 box-shadow: 0 20px 20px rgba(22, 43, 64, .12);
287 -webkit-transition: .3s all;
288 -o-transition: .3s all;
289 transition: .3s all;
290 }
291
292
293 .jet-form-builder__next-page-wrap, .jet-form-builder__group-break {
294 display: block;
295 white-space: nowrap;
296 }
297
298 .jet-form-builder__next-page-wrap:before, .jet-form-builder__group-break:before {
299 content: "";
300 position: absolute;
301 bottom: 0;
302 left: 0;
303 right: 0;
304 border-top: 1px solid #ccc;
305 }
306
307 .jet-form-builder__next-page-wrap > span, .jet-form-builder__group-break > span {
308 font-size: 13px;
309 position: relative;
310 display: inline-block;
311 text-transform: uppercase;
312 font-weight: 600;
313 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
314 color: #757575;
315 border-radius: 4px;
316 background: #fff;
317 padding: 6px 8px;
318 height: 24px;
319 }
320
321 .jet-form-edit-modal__content .input_with_button {
322 display: flex;
323 align-items: center;
324 justify-content: space-between;
325 }
326
327 .jet-form-edit-modal__content .components-base-control__field > .input_with_button {
328 width: 55%;
329 }
330
331 .jet-form-edit-modal__content .input_with_button .components-base-control {
332 margin-right: 1em;
333 }
334
335 .input_with_button select.components-select-control__input {
336 min-width: 26em;
337 }
338
339 .jet-form-builder__field-wrap.range-wrap fieldset.components-input-control__backdrop {
340 border: none;
341 }
342
343 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap {
344 display: flex;
345 /*display: -webkit-box;*/
346 display: -ms-flexbox;
347 -webkit-box-align: center;
348 -ms-flex-align: center;
349 align-items: center;
350 }
351
352 /* Range */
353 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .components-input-control {
354 flex: 1;
355 }
356
357 /* Range Values */
358 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
359 white-space: nowrap;
360 margin-left: 10px;
361 display: flex;
362 }
363
364 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .components-input-control__container {
365 background-color: rgba(255, 255, 255, 0);
366 }
367
368 .jet-form-builder__field-wrap.range-wrap {
369 width: 100%
370 }
371
372 .jet-form-builder__field-wrap.range-wrap input[type="range"] {
373 margin-right: 10px;
374 -webkit-appearance: none;
375 min-height: 18px;
376 border: 0;
377 }
378
379
380 .jet-form-builder__field-wrap.range-wrap input[type="range"], .jet-form-builder__field-wrap.range-wrap input[type="range"]:focus {
381 padding: 0;
382 background: transparent;
383 border: none;
384 border-radius: 0;
385 -webkit-box-shadow: none;
386 box-shadow: none;
387 outline: none
388 }
389
390 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-webkit-slider-runnable-track {
391 width: 100%;
392 height: var(--jet-fb__range-field-range--height, 4px);
393 cursor: pointer;
394 /**
395 test
396 */
397 background: #e3ddd8;
398 -webkit-box-shadow: none;
399 box-shadow: none;
400 border: none
401 }
402
403 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-moz-range-track {
404 width: 100%;
405 height: var(--jet-fb__range-field-range--height, 4px);
406 cursor: pointer;
407 background: #e3ddd8;
408 box-shadow: none;
409 border: none
410 }
411
412 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-track {
413 width: 100%;
414 height: var(--jet-fb__range-field-range--height, 4px);
415 cursor: pointer;
416 background: #e3ddd8;
417 box-shadow: none;
418 border: none;
419 color: transparent
420 }
421
422 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-fill-lower {
423 background: transparent
424 }
425
426 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-fill-upper {
427 background: transparent
428 }
429
430 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-webkit-slider-thumb {
431 width: var(--jet-fb__range-field-slider--size, 18px);
432 height: var(--jet-fb__range-field-slider--size, 18px);
433 background: #ccc;
434 border-radius: 50%;
435 cursor: pointer;
436 -webkit-box-shadow: none;
437 box-shadow: none;
438 border: none;
439 margin-top: calc((var(--jet-fb__range-field-slider--size, 18px) - var(--jet-fb__range-field-range--height, 4px)) / -2);
440 -webkit-appearance: none
441 }
442
443 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-moz-range-thumb {
444 width: var(--jet-fb__range-field-slider--size, 18px);
445 height: var(--jet-fb__range-field-slider--size, 18px);
446 background: #ccc;
447 border-radius: 50%;
448 cursor: pointer;
449 box-shadow: none;
450 border: none
451 }
452
453 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-thumb {
454 width: var(--jet-fb__range-field-slider--size, 18px);
455 height: var(--jet-fb__range-field-slider--size, 18px);
456 background: #ccc;
457 border-radius: 50%;
458 cursor: pointer;
459 box-shadow: none;
460 border: none
461 }
462
463 .jet-form-builder__submit-wrap {
464 display: -webkit-box;
465 display: -ms-flexbox;
466 display: flex;
467 align-items: flex-start;
468 -webkit-box-orient: vertical;
469 -webkit-box-direction: normal;
470 -ms-flex-direction: column;
471 flex-direction: column;
472 width: 100%
473 }
474
475 .jet-form-builder__field-wrap.range-wrap .components-input-control__backdrop[aria-hidden="true"] {
476 border-width: 0;
477 }
478
479 .jet-form-builder__field-settings .help-input {
480 margin-bottom: 2em;
481 font-size: 12px;
482 color: rgb(117, 117, 117);
483 }
484
485 .jet-form-edit-modal .jet-post-field-control {
486 display: flex;
487 position: relative;
488 }
489
490 .jet-form-edit-modal .jet-post-field-control .components-base-control__field {
491 padding: 0;
492 border: none;
493 }
494
495 .jet-form-edit-modal .jet-post-field-control .components-base-control:nth-child(2) {
496 position: absolute;
497 left: 25em;
498 }
499
500 .jet-field-map__row-label .fields-map__required {
501 color: red;
502 font-weight: 900;
503 }
504
505 .jet-form-load-button.components-button.loading i, .jet-form-validate-button.components-button.loading i {
506 animation: jet-form-editor-spin 2s infinite linear
507 }
508
509
510 .jet-form-validate-button.components-button i.dashicons:before {
511 content: "";
512 }
513
514 .jet-form-validate-button.components-button i.dashicons {
515 margin-right: 4px;
516 }
517
518 .jet-form-validate-button.components-button.is-valid i.dashicons:before {
519 content: "�
520 �";
521 color: #46b450
522 }
523
524 .jet-form-validate-button.components-button.is-invalid i.dashicons:before {
525 content: "";
526 color: #a00
527 }
528
529 @keyframes jet-form-editor-spin {
530 0% {
531 transform: rotate(0deg)
532 }
533 to {
534 transform: rotate(359deg)
535 }
536 }
537
538 .jet-form-edit-modal__content .description-controls {
539 color: #999;
540 display: block;
541 margin-bottom: 1.2em;
542 }
543
544 .jet-form-builder-row {
545 overflow: hidden;
546 display: block;
547 }
548
549 .rtl .jet-form-editor__macros-inserter {
550 left: 15px;
551 right: unset;
552 }
553
554 .rtl .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
555 margin-left: unset;
556 margin-right: 10px;
557 }
558
559 .jet-form-edit-modal__actions {
560 position: sticky;
561 bottom: 0;
562 margin: 20px -24px -24px;
563 padding: 18px 24px 20px;
564 background-color: #fff;
565 width: calc(100% + 48px);
566 border-top: 1px solid #ddd;
567 z-index: 100;
568 }
569
570 .jet-form-edit-modal.width-60 {
571 width: 60vw;
572 }
573
574 .jet-form-builder__repeater-component-item {
575 margin-bottom: 1.5em;
576 }
577
578 .jet-form-builder__repeater-component-item .repeater-item__content {
579 flex: 1 1 100%;
580 }
581
582 .jet-form-builder__repeater-component-item .repeater-item__remove {
583 flex: 1;
584 }
585
586 .jet-form-builder__repeater-component-item .repeater__item__header .repeater-action-button {
587 margin-right: 1em;
588 }
589
590 .jet-form-builder__repeater-component-item .repeater__item__header span.repeater-item-title {
591 font-size: 1.1em;
592 font-style: italic;
593 color: #8e8e8e;
594 }
595
596 .jet-form-edit-modal .input-with-button .components-input-control__container,
597 .jet-form-edit-modal .input-with-button .components-text-control__input {
598 width: 30em;
599 margin-right: 1em;
600 }
601
602 .jet-form-edit-modal .with-wrap .components-base-control__field {
603 flex-wrap: wrap;
604 }
605
606 .jet-form-edit-modal .margin-bottom--small {
607 margin-bottom: 0.7em;
608 }
609
610 select.components-select-control__input.components-select-control__input.components-select-control__input {
611 max-width: 100vw;
612 width: 100%;
613 line-height: 1.5;
614 padding: 1px 24px 1px 8px;
615 }
616
617 .jet-form-builder__calculated-field {
618 display: flex;
619 width: 100%;
620 }
621
622 .components-text-control__input {
623 margin: unset;
624 box-sizing: border-box;
625 flex: 3;
626 }
627
628 .flex-column .components-base-control__field {
629 flex-direction: column;
630 }
631
632 .edit-post-sidebar .components-input-control.components-number-control {
633 margin-bottom: 2em;
634 }
635
636 .repeater-item__left-heading {
637 max-width: 85%;
638 word-break: break-all;
639 }
640
641 .jet-form-edit-modal__content {
642 padding-bottom: 0.5em;
643 }
644
645 .jet-label-overflow {
646 overflow: hidden;
647 text-overflow: ellipsis;
648 display: block;
649 white-space: nowrap;
650 }
651
652 .jet-control-clear .components-base-control__field {
653 padding-top: unset;
654 border-top: unset;
655 }
656
657 .jet-control-clear-full {
658 flex: 3;
659 }
660
661 .jet-control-clear-full .components-base-control__field {
662 display: block;
663 padding: unset;
664 border-top: unset;
665 }
666
667 .jet-forms-checkbox-field p.components-base-control__help {
668 margin-top: -33px;
669 margin-left: 15vw;
670 }
671
672 .editor-styles-wrapper .wp-block.wp-block.wp-block {
673 max-width: 100%;
674 }
675
676 .editor-styles-wrapper p.components-base-control__help {
677 font-size: 12px;
678 line-height: 1.5;
679 margin: 1em 0;
680 }
681
682 .components-button.has-icon:not(.has-text) .dashicon.dashicon {
683 margin: unset;
684 }
685
686 .jet-form-builder-repeater__remove {
687 margin-top: 10px;
688 }
689
690 .interface-complementary-area-header.components-panel__header {
691 z-index: 100;
692 }
693
694 .jet-form-edit-modal .jet-inline-radio .components-radio-control__option:not(:nth-child(1)):not(:nth-child(2)) {
695 margin-left: 1em;
696 }
697
698 .jet-control-full {
699 padding: 12px 0 5px;
700 border-top: 1px solid #ddd;
701 }
702
703 .jet-border-unset.components-base-control div.components-base-control__field.components-base-control__field {
704 border-top: unset;
705 }
706
707 .jet-user-meta__row .components-flex.components-select-control {
708 display: block;
709 flex: 1;
710 }
711
712 .jet-modal-fixed-height .jet-form-edit-modal__wrapper {
713 display: flex;
714 flex-direction: column;
715 height: calc(100% - 86px);
716 justify-content: space-between;
717 }
718
719 .jet-custom-select-control {
720 display: flex;
721 }
722
723 .jet-custom-select-control .components-custom-select-control__label {
724 margin-right: 7.7em;
725 }
726
727 .jet-margin-bottom-wrapper > div:not(:last-child) {
728 margin-bottom: 1.2em;
729 }
730
731 .jet-form-builder-row .components-base-control__label {
732 display: flex;
733 }
734
735 .jet-form-builder__label::after {
736 content: ' ';
737 }
738
739 .jet-form-toggle-box .components-clipboard-button.has-icon {
740 position: absolute;
741 transform: translateX(23px);
742 }
743
744 .jet-form-toggle-box input.components-text-control__input {
745 padding-right: 2.5em;
746 }
747
748 div.components-modal__screen-overlay {
749 z-index: 1000099;
750 }
751
752 .jet-fb-control__input.jet-fb-control__input {
753 max-width: unset;
754 padding: 0 24px 0 8px;
755 width: 100%;
756 }
757
758 .jet-fb-with-border:not(:last-child) {
759 border-bottom: 1px solid #ddd;
760 margin-bottom: 1.2em;
761 padding-bottom: 1.2em;
762 }
763
764 .jet-form-edit-modal div.components-input-control__container {
765 flex: 3;
766 margin-left: unset;
767 }
768
769 .jet-form-edit-modal .components-textarea-control__input {
770 flex: 3;
771 }
772
773 .jet-form-edit-modal .components-base-control__label + select.components-select-control__input {
774 flex: 3;
775 margin-left: 6px;
776 }
777
778 .jet-d-flex-between {
779 display: flex;
780 justify-content: space-between;
781 }
782
783 .jet-d-flex-between > div {
784 flex: 0.95;
785 }
786
787