PluginProbe ʕ •ᴥ•ʔ
JetFormBuilder — Dynamic Blocks Form Builder / 1.2.2
JetFormBuilder — Dynamic Blocks Form Builder v1.2.2
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
686 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 display: block;
535 }
536
537 .rtl .jet-form-editor__macros-inserter {
538 left: 15px;
539 right: unset;
540 }
541
542 .rtl .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
543 margin-left: unset;
544 margin-right: 10px;
545 }
546
547 .jet-form-edit-modal__actions {
548 position: sticky;
549 bottom: 0;
550 margin: 20px -24px -24px;
551 padding: 18px 24px 20px;
552 background-color: #fff;
553 width: calc(100% + 48px);
554 border-top: 1px solid #ddd;
555 z-index: 100;
556 }
557
558 .jet-form-edit-modal.width-60 {
559 width: 60vw;
560 }
561
562 .jet-form-builder__repeater-component-item {
563 margin-bottom: 1.5em;
564 }
565
566 .jet-form-builder__repeater-component-item .repeater-item__content {
567 flex: 1 1 100%;
568 }
569
570 .jet-form-builder__repeater-component-item .repeater-item__remove {
571 flex: 1;
572 }
573
574 .jet-form-builder__repeater-component-item .repeater__item__header .repeater-action-button {
575 margin-right: 1em;
576 }
577
578 .jet-form-builder__repeater-component-item .repeater__item__header span.repeater-item-title {
579 font-size: 1.1em;
580 font-style: italic;
581 color: #8e8e8e;
582 }
583
584 .jet-form-edit-modal .input-with-button .components-input-control__container,
585 .jet-form-edit-modal .input-with-button .components-text-control__input {
586 width: 30em;
587 margin-right: 1em;
588 }
589
590 .jet-form-edit-modal .with-wrap .components-base-control__field {
591 flex-wrap: wrap;
592 }
593
594 .jet-form-edit-modal .margin-bottom--small {
595 margin-bottom: 0.7em;
596 }
597
598 select.components-select-control__input.components-select-control__input.components-select-control__input {
599 max-width: 100vw;
600 width: 100%;
601 line-height: 1.1;
602 padding: 1px 24px 1px 8px;
603 }
604
605 .jet-form-builder__calculated-field {
606 display: flex;
607 width: 100%;
608 }
609
610 .jet-form-action .components-card__body {
611 display: flex;
612 justify-content: space-between;
613 align-items: center;
614 }
615
616 .jet-form-action .components-card__body div:first-child {
617 flex: 0 0 50%;
618 }
619
620 .components-text-control__input {
621 margin: unset;
622 box-sizing: border-box;
623 }
624
625 .flex-column .components-base-control__field {
626 flex-direction: column;
627 }
628
629 .edit-post-sidebar .components-input-control.components-number-control {
630 margin-bottom: 2em;
631 }
632
633 .repeater-item__left-heading {
634 max-width: 85%;
635 word-break: break-all;
636 }
637
638 .jet-form-edit-modal__content {
639 padding-bottom: 0.5em;
640 }
641
642 .jet-label-overflow {
643 overflow: hidden;
644 text-overflow: ellipsis;
645 display: block;
646 white-space: nowrap;
647 }
648
649 .jet-control-clear .components-base-control__field {
650 padding: unset;
651 border-top: unset;
652 }
653
654 .jet-control-clear-full .components-base-control__field {
655 display: block;
656 padding: unset;
657 border-top: unset;
658 }
659
660 .jet-forms-checkbox-field p.components-base-control__help {
661 margin-top: -33px;
662 margin-left: 10vw;
663 }
664
665 .editor-styles-wrapper .wp-block.wp-block.wp-block {
666 max-width: 100%;
667 }
668
669 .editor-styles-wrapper p.components-base-control__help {
670 font-size: 12px;
671 line-height: 1.5;
672 margin: 1em 0;
673 }
674
675 .components-button.has-icon:not(.has-text) .dashicon.dashicon {
676 margin: unset;
677 }
678
679 .jet-form-builder-repeater__remove {
680 margin-top: 10px;
681 }
682
683 .interface-complementary-area-header.components-panel__header {
684 z-index: 100;
685 }
686