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