PluginProbe ʕ •ᴥ•ʔ
JetFormBuilder — Dynamic Blocks Form Builder / 1.2.1
JetFormBuilder — Dynamic Blocks Form Builder v1.2.1
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 5 years ago editor.css 5 years ago frontend.css 5 years ago icons.css 5 years ago
editor.css
685 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:first-child {
74 margin-top: 15px;
75 }
76
77 .jet-form-action .components-base-control__field {
78 margin: 0;
79 }
80
81 .jet-form-edit-modal .components-base-control__field {
82 display: flex;
83 padding: 12px 0 5px;
84 border-top: 1px solid #ddd;
85 }
86
87 .jet-form-edit-modal .components-flex__item {
88 flex: 0 0 150px;
89 max-width: 150px;
90 }
91
92 .jet-form-edit-modal .jet-post-field-control .components-base-control:nth-child(2) .components-select-control .components-flex__item {
93 display: none;
94 }
95
96 .jet-form-edit-modal .fields-map-control .components-base-control__field {
97 border: none;
98 padding: 0 0 5px 0;
99 }
100
101 .jet-form-edit-modal .components-base-control:first-child .components-base-control__field {
102 border-top: none;
103 padding-top: 0;
104 }
105
106 .jet-form-edit-modal .components-base-control__label {
107 flex: 0 0 200px;
108 max-width: 157px;
109 }
110
111 .jet-form-edit-modal .components-base-control .components-base-control__label {
112 padding: 6px 8px 0 0;
113 }
114
115 .jet-form-editor__macros-wrap {
116 position: relative;
117 }
118
119 .jet-form-edit-modal .jet-form-editor__macros-wrap .components-base-control .components-base-control__field {
120 padding-top: 12px;
121 border-top: 1px solid #ddd;
122 }
123
124 .jet-form-edit-modal .jet-user-meta__row {
125 display: flex;
126 }
127
128 .jet-form-edit-modal .jet-user-meta__row .jet-field-map__row-label {
129 flex: 1 1 30%;
130 }
131
132 .jet-form-edit-modal .jet-user-meta__row .components-base-control {
133 flex: 1 1 40%;
134 }
135
136 .jet-form-editor__macros-trigger {
137 height: 36px;
138 min-height: 36px;
139 }
140
141 .jet-form-editor__macros-inserter {
142 position: absolute;
143 right: 1px;
144 top: 14px;
145 z-index: 20;
146 background: whitesmoke;
147 }
148
149 .jet-form-dynamic-preset {
150 display: flex;
151 align-items: flex-start;
152 position: relative;
153 }
154
155 .jet-form-dynamic-preset .components-base-control {
156 width: 100%;
157 }
158
159 .jet-form-dynamic-preset .components-base-control__field textarea {
160 padding-right: 36px;
161 width: calc(100% - 31px);
162 }
163
164 .jet-form-dynamic-preset .components-base-control__field input {
165 padding-right: 28px;
166 }
167
168 .jet-form-dynamic-preset__trigger {
169 width: 31px;
170 height: 31px;
171 box-sizing: border-box;
172 display: flex;
173 align-items: center;
174 justify-content: center;
175 border-radius: 0 2px 2px 0;
176 border: 1px solid #757575;
177 margin: 26px 0 0 0;
178 cursor: pointer;
179 position: absolute;
180 right: 0;
181 top: 0;
182 z-index: 20;
183 }
184
185 .jet-form-dynamic-preset__trigger.trigger__textarea {
186 margin-top: unset;
187 border-radius: 0 0 0 5px;
188 border-width: 0 0 1px 1px;
189 background-color: white;
190 top: 1px;
191 right: 1px;
192 }
193
194 .jet-form-dynamic-preset__trigger:not(.trigger__textarea) {
195 border-left-width: 0;
196 }
197
198 .jet-form-dynamic-preset__trigger:hover svg path {
199 fill: #007cba;
200 fill: var(--wp-admin-theme-color);
201 }
202
203 .jet-form-dynamic-preset__trigger svg {
204 width: 50%;
205 }
206
207 .jet-form-builder__flex-controls {
208 display: flex;
209 }
210
211 .jet-form-builder__flex-controls .repeater-item-column label {
212 flex: 0 0 1em;
213 margin-right: 1em;
214 }
215
216 .jet-form-builder__flex-controls .repeater-item-column input {
217 margin-right: 1em;
218 }
219
220 .field-mime-types.field-mime-types select[multiple] {
221 height: 7rem;
222 }
223
224 .field-mime-types.field-mime-types svg {
225 display: none;
226 }
227
228 .jet-user-meta-rows {
229 flex: 0 0 40%;
230 }
231
232 .jet-user-fields-map__list {
233 flex: 0 0 35%;
234 }
235
236 .jet-user-fields-map__list .components-flex__item {
237 flex: 2;
238 }
239
240 .jet-user-fields-map__list .components-input-control__container {
241 flex: 5;
242 }
243
244 .block-editor-block-list__block[data-type="jet-forms/form-break-field"] {
245 max-width: 100%;
246 margin-top: 28px;
247 margin-bottom: 28px;
248 }
249
250 .block-editor-block-list__block[data-type="jet-forms/group-break-field"] {
251 margin-top: 28px;
252 margin-bottom: 28px;
253 }
254
255 .block-editor-block-list__block[data-type="jet-forms/repeater-field"],
256 .block-editor-block-list__block[data-type="jet-forms/conditional-block"],
257 .block-editor-block-list__block[data-type^="jet-forms/"] .inside-block-options {
258 padding: 20px;
259 background: #fff;
260 -webkit-box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
261 box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
262 -webkit-transition: .3s all;
263 -o-transition: .3s all;
264 transition: .3s all;
265 }
266
267 .block-editor-block-list__block[data-type^="jet-forms/"] .inside-block-options {
268 margin-bottom: 20px;
269 }
270
271 .block-editor-block-list__block[data-type="jet-forms/repeater-field"]:hover,
272 .block-editor-block-list__block[data-type="jet-forms/conditional-block"]:hover {
273 -webkit-box-shadow: 0 20px 20px rgba(22, 43, 64, .12);
274 box-shadow: 0 20px 20px rgba(22, 43, 64, .12);
275 -webkit-transition: .3s all;
276 -o-transition: .3s all;
277 transition: .3s all;
278 }
279
280
281 .jet-form-builder__next-page-wrap, .jet-form-builder__group-break {
282 display: block;
283 white-space: nowrap;
284 }
285
286 .jet-form-builder__next-page-wrap:before, .jet-form-builder__group-break:before {
287 content: "";
288 position: absolute;
289 bottom: 0;
290 left: 0;
291 right: 0;
292 border-top: 1px solid #ccc;
293 }
294
295 .jet-form-builder__next-page-wrap > span, .jet-form-builder__group-break > span {
296 font-size: 13px;
297 position: relative;
298 display: inline-block;
299 text-transform: uppercase;
300 font-weight: 600;
301 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
302 color: #757575;
303 border-radius: 4px;
304 background: #fff;
305 padding: 6px 8px;
306 height: 24px;
307 }
308
309 .jet-form-edit-modal__content .input_with_button {
310 display: flex;
311 align-items: center;
312 justify-content: space-between;
313 }
314
315 .jet-form-edit-modal__content .components-base-control__field > .input_with_button {
316 width: 55%;
317 }
318
319 .jet-form-edit-modal__content .input_with_button .components-base-control {
320 margin-right: 1em;
321 }
322
323 .input_with_button select.components-select-control__input {
324 min-width: 26em;
325 }
326
327 .jet-form-builder__field-wrap.range-wrap fieldset.components-input-control__backdrop {
328 border: none;
329 }
330
331 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap {
332 display: flex;
333 /*display: -webkit-box;*/
334 display: -ms-flexbox;
335 -webkit-box-align: center;
336 -ms-flex-align: center;
337 align-items: center;
338 }
339
340 /* Range */
341 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .components-input-control {
342 margin-right: auto;
343 }
344
345 /* Range Values */
346 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
347 white-space: nowrap;
348 margin-left: 10px;
349 display: flex;
350 }
351
352 .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .components-input-control__container {
353 background-color: rgba(255, 255, 255, 0);
354 }
355
356 .jet-form-builder__field-wrap.range-wrap {
357 width: 100%
358 }
359
360 .jet-form-builder__field-wrap.range-wrap input[type="range"] {
361 margin-right: 10px;
362 -webkit-appearance: none;
363 min-height: 18px;
364 border: 0;
365 }
366
367
368 .jet-form-builder__field-wrap.range-wrap input[type="range"], .jet-form-builder__field-wrap.range-wrap input[type="range"]:focus {
369 padding: 0;
370 background: transparent;
371 border: none;
372 border-radius: 0;
373 -webkit-box-shadow: none;
374 box-shadow: none;
375 outline: none
376 }
377
378 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-webkit-slider-runnable-track {
379 width: 100%;
380 height: var(--jet-fb__range-field-range--height, 4px);
381 cursor: pointer;
382 /**
383 test
384 */
385 background: #e3ddd8;
386 -webkit-box-shadow: none;
387 box-shadow: none;
388 border: none
389 }
390
391 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-moz-range-track {
392 width: 100%;
393 height: var(--jet-fb__range-field-range--height, 4px);
394 cursor: pointer;
395 background: #e3ddd8;
396 box-shadow: none;
397 border: none
398 }
399
400 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-track {
401 width: 100%;
402 height: var(--jet-fb__range-field-range--height, 4px);
403 cursor: pointer;
404 background: #e3ddd8;
405 box-shadow: none;
406 border: none;
407 color: transparent
408 }
409
410 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-fill-lower {
411 background: transparent
412 }
413
414 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-fill-upper {
415 background: transparent
416 }
417
418 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-webkit-slider-thumb {
419 width: var(--jet-fb__range-field-slider--size, 18px);
420 height: var(--jet-fb__range-field-slider--size, 18px);
421 background: #ccc;
422 border-radius: 50%;
423 cursor: pointer;
424 -webkit-box-shadow: none;
425 box-shadow: none;
426 border: none;
427 margin-top: calc((var(--jet-fb__range-field-slider--size, 18px) - var(--jet-fb__range-field-range--height, 4px)) / -2);
428 -webkit-appearance: none
429 }
430
431 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-moz-range-thumb {
432 width: var(--jet-fb__range-field-slider--size, 18px);
433 height: var(--jet-fb__range-field-slider--size, 18px);
434 background: #ccc;
435 border-radius: 50%;
436 cursor: pointer;
437 box-shadow: none;
438 border: none
439 }
440
441 .jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-thumb {
442 width: var(--jet-fb__range-field-slider--size, 18px);
443 height: var(--jet-fb__range-field-slider--size, 18px);
444 background: #ccc;
445 border-radius: 50%;
446 cursor: pointer;
447 box-shadow: none;
448 border: none
449 }
450
451 .jet-form-builder__submit-wrap {
452 display: -webkit-box;
453 display: -ms-flexbox;
454 display: flex;
455 align-items: flex-start;
456 -webkit-box-orient: vertical;
457 -webkit-box-direction: normal;
458 -ms-flex-direction: column;
459 flex-direction: column;
460 width: 100%
461 }
462
463 .jet-form-builder__field-wrap.range-wrap .components-input-control__backdrop[aria-hidden="true"] {
464 border-width: 0;
465 }
466
467 .jet-form-builder__field-settings .help-input {
468 margin-bottom: 2em;
469 font-size: 12px;
470 color: rgb(117, 117, 117);
471 }
472
473 .jet-form-edit-modal .jet-post-field-control {
474 display: flex;
475 position: relative;
476 }
477
478 .jet-form-edit-modal .jet-post-field-control .components-base-control__field {
479 padding: 0;
480 border: none;
481 }
482
483 .jet-form-edit-modal .jet-post-field-control .components-base-control:nth-child(2) {
484 position: absolute;
485 left: 25em;
486 }
487
488 .jet-field-map__row-label .fields-map__required {
489 color: red;
490 font-weight: 900;
491 }
492
493 .jet-form-load-button.components-button.loading i, .jet-form-validate-button.components-button.loading i {
494 animation: jet-form-editor-spin 2s infinite linear
495 }
496
497
498 .jet-form-validate-button.components-button i.dashicons:before {
499 content: "";
500 }
501
502 .jet-form-validate-button.components-button i.dashicons {
503 margin-right: 4px;
504 }
505
506 .jet-form-validate-button.components-button.is-valid i.dashicons:before {
507 content: "�
508 �";
509 color: #46b450
510 }
511
512 .jet-form-validate-button.components-button.is-invalid i.dashicons:before {
513 content: "";
514 color: #a00
515 }
516
517 @keyframes jet-form-editor-spin {
518 0% {
519 transform: rotate(0deg)
520 }
521 to {
522 transform: rotate(359deg)
523 }
524 }
525
526 .jet-form-edit-modal__content .description-controls {
527 color: #999;
528 display: block;
529 margin-bottom: 1.2em;
530 }
531
532 .jet-form-builder-row {
533 overflow: hidden;
534 }
535
536 .rtl .jet-form-editor__macros-inserter {
537 left: 15px;
538 right: unset;
539 }
540
541 .rtl .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
542 margin-left: unset;
543 margin-right: 10px;
544 }
545
546 .jet-form-edit-modal__actions {
547 position: sticky;
548 bottom: 0;
549 margin: 20px -24px -24px;
550 padding: 18px 24px 20px;
551 background-color: #fff;
552 width: calc(100% + 48px);
553 border-top: 1px solid #ddd;
554 z-index: 100;
555 }
556
557 .jet-form-edit-modal.width-60 {
558 width: 60vw;
559 }
560
561 .jet-form-builder__repeater-component-item {
562 margin-bottom: 1.5em;
563 }
564
565 .jet-form-builder__repeater-component-item .repeater-item__content {
566 flex: 1 1 100%;
567 }
568
569 .jet-form-builder__repeater-component-item .repeater-item__remove {
570 flex: 1;
571 }
572
573 .jet-form-builder__repeater-component-item .repeater__item__header .repeater-action-button {
574 margin-right: 1em;
575 }
576
577 .jet-form-builder__repeater-component-item .repeater__item__header span.repeater-item-title {
578 font-size: 1.1em;
579 font-style: italic;
580 color: #8e8e8e;
581 }
582
583 .jet-form-edit-modal .input-with-button .components-input-control__container,
584 .jet-form-edit-modal .input-with-button .components-text-control__input {
585 width: 30em;
586 margin-right: 1em;
587 }
588
589 .jet-form-edit-modal .with-wrap .components-base-control__field {
590 flex-wrap: wrap;
591 }
592
593 .jet-form-edit-modal .margin-bottom--small {
594 margin-bottom: 0.7em;
595 }
596
597 select.components-select-control__input.components-select-control__input.components-select-control__input {
598 max-width: 100vw;
599 width: 100%;
600 line-height: 1.1;
601 padding: 1px 24px 1px 8px;
602 }
603
604 .jet-form-builder__calculated-field {
605 display: flex;
606 width: 100%;
607 }
608
609 .jet-form-action .components-card__body {
610 display: flex;
611 justify-content: space-between;
612 align-items: center;
613 }
614
615 .jet-form-action .components-card__body div:first-child {
616 flex: 0 0 50%;
617 }
618
619 .components-text-control__input {
620 margin: unset;
621 box-sizing: border-box;
622 }
623
624 .flex-column .components-base-control__field {
625 flex-direction: column;
626 }
627
628 .edit-post-sidebar .components-input-control.components-number-control {
629 margin-bottom: 2em;
630 }
631
632 .repeater-item__left-heading {
633 max-width: 85%;
634 word-break: break-all;
635 }
636
637 .jet-form-edit-modal__content {
638 padding-bottom: 0.5em;
639 }
640
641 .jet-label-overflow {
642 overflow: hidden;
643 text-overflow: ellipsis;
644 display: block;
645 white-space: nowrap;
646 }
647
648 .jet-control-clear .components-base-control__field {
649 padding: unset;
650 border-top: unset;
651 }
652
653 .jet-control-clear-full .components-base-control__field {
654 display: block;
655 padding: unset;
656 border-top: unset;
657 }
658
659 .jet-forms-checkbox-field p.components-base-control__help {
660 margin-top: -33px;
661 margin-left: 10vw;
662 }
663
664 .editor-styles-wrapper .wp-block.wp-block {
665 max-width: 100%;
666 }
667
668 .editor-styles-wrapper p.components-base-control__help {
669 font-size: 12px;
670 line-height: 1.5;
671 margin: 1em 0;
672 }
673
674 .components-button.has-icon:not(.has-text) .dashicon.dashicon {
675 margin: unset;
676 }
677
678 .jet-form-builder-repeater__remove {
679 margin-top: 10px;
680 }
681
682 .interface-complementary-area-header.components-panel__header {
683 z-index: 100;
684 }
685