PluginProbe ʕ •ᴥ•ʔ
JetFormBuilder — Dynamic Blocks Form Builder / 1.0.3
JetFormBuilder — Dynamic Blocks Form Builder v1.0.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 / frontend.css
jetformbuilder / assets / css Last commit date
editor.css 5 years ago frontend.css 5 years ago
frontend.css
709 lines
1 :root {
2 --jet-fb__range-field-slider--size: 18px;
3 --jet-fb__range-field-range--height: 4px;
4 }
5
6 .jet-form.is-loading {
7 opacity: .5;
8 pointer-events: none
9 }
10
11 .jet-form-builder-row {
12 display: -webkit-box;
13 display: -ms-flexbox;
14 display: flex;
15 -ms-flex-wrap: wrap;
16 flex-wrap: wrap;
17 margin: 0;
18 padding: 5px 0;
19 overflow: hidden;
20 }
21
22 .jet-form-builder-row:last-child {
23 padding-bottom: 0;
24 }
25
26 .jet-form-builder-row--first-visible {
27 padding-top: 0 !important
28 }
29
30 .jet-form-builder-row.jet-form-builder-row--hidden {
31 margin: 0 !important;
32 padding: 0 !important
33 }
34
35 .jet-form-builder__group-break {
36 width: 100%;
37 -webkit-box-flex: 0;
38 -ms-flex: 0 0 100%;
39 flex: 0 0 100%
40 }
41
42 .jet-form-col {
43 min-height: 1px;
44 padding: 0 5px;
45 display: -webkit-box;
46 display: -ms-flexbox;
47 display: flex;
48 -webkit-box-align: start;
49 -ms-flex-align: start;
50 align-items: flex-start;
51 -ms-flex-line-pack: start;
52 align-content: flex-start;
53 -ms-flex-wrap: wrap;
54 flex-wrap: wrap;
55 max-width: 100%;
56 -webkit-box-flex: 0;
57 -ms-flex: 0 0 100%;
58 flex: 0 0 100%
59 }
60
61 .jet-form-col.field-type-heading {
62 -ms-flex-wrap: wrap !important;
63 flex-wrap: wrap !important
64 }
65
66 .layout-row .jet-form-col {
67 -ms-flex-wrap: nowrap;
68 flex-wrap: nowrap
69 }
70
71 .jet-form-col__start {
72 -webkit-box-flex: 0;
73 -ms-flex: 0 0 30%;
74 flex: 0 0 30%;
75 max-width: 30%
76 }
77
78 .jet-form-col__end {
79 display: -webkit-box;
80 display: -ms-flexbox;
81 display: flex;
82 -webkit-box-flex: 1;
83 -ms-flex: 1 1 auto;
84 flex: 1 1 auto
85 }
86
87 .jet-form-page--hidden {
88 display: none
89 }
90
91 .jet-form-builder__next-page-msg {
92 display: none
93 }
94
95 .jet-form-builder__next-page-msg--visible {
96 display: block
97 }
98
99 .jet-form-builder__calculated-field {
100 display: flex;
101 width: 100%;
102 }
103
104 .jet-form-builder__calculated-field--hidden {
105 display: none;
106 }
107
108 .layout-column .jet-form-builder__label {
109 max-width: 100%;
110 -webkit-box-flex: 0;
111 -ms-flex: 0 1 100%;
112 flex: 0 1 100%
113 }
114
115 .jet-form-builder__heading, .jet-form-builder__label {
116 /*-webkit-box-flex: 0;
117 -ms-flex: 0 0 100%;
118 flex: 0 0 100%;
119 display: -webkit-box;
120 display: -ms-flexbox;
121 display: flex;
122 -webkit-box-pack: justify;
123 -ms-flex-pack: justify;
124 justify-content: space-between;
125 -webkit-box-align: center;
126 -ms-flex-align: center;
127 align-items: center;*/
128 width: 100%
129 }
130
131 .jet-form-builder__field-error {
132 width: 100%
133 }
134
135 .jet-form-builder__desc {
136 display: block
137 }
138
139 .layout-column .jet-form-builder__desc {
140 max-width: 100%;
141 -webkit-box-flex: 0;
142 -ms-flex: 0 1 100%;
143 flex: 0 1 100%
144 }
145
146 .jet-form-builder__prev-page {
147 outline: none
148 }
149
150 .jet-form-builder__field {
151 -webkit-box-sizing: border-box;
152 box-sizing: border-box
153 }
154
155 .layout-column .jet-form-builder__field:not(.checkboxes-field):not(.radio-field):not(.range-field) {
156 max-width: 100%;
157 width: 100%;
158 -webkit-box-flex: 0;
159 -ms-flex: 0 1 100%;
160 flex: 0 1 100%
161 }
162
163 .layout-row .jet-form-builder__field:not(.checkboxes-field):not(.radio-field):not(.range-field) {
164 width: 100%
165 }
166
167 .jet-form-builder__field-wrap {
168 position: relative;
169 }
170
171 .jet-form-builder__field-label {
172 cursor: pointer;
173 display: -webkit-inline-box;
174 display: -ms-inline-flexbox;
175 display: inline-flex;
176 -webkit-box-align: center;
177 -ms-flex-align: center;
178 align-items: center
179 }
180
181 .jet-form-builder__field-template + .jet-form-builder__field-label {
182 position: absolute;
183 top: 0;
184 left: 0;
185 right: 0;
186 bottom: 0;
187 z-index: -1;
188 opacity: 0
189 }
190
191 .jet-form-builder__field-label input {
192 margin: 0 5px 0 0
193 }
194
195 .rtl .jet-form-builder__field-label input {
196 margin: 0 0 0 5px
197 }
198
199 .jet-form-builder__field-template {
200 cursor: pointer
201 }
202
203 .jet-form-builder__field-value {
204 white-space: nowrap;
205 display: flex;
206 }
207
208 .jet-form-builder__field-value-number {
209 /*display: inline-block;*/
210 text-align: center
211 }
212
213 .jet-form-builder__submit-wrap {
214 display: -webkit-box;
215 display: -ms-flexbox;
216 display: flex;
217 align-items: flex-start;
218 -webkit-box-orient: vertical;
219 -webkit-box-direction: normal;
220 -ms-flex-direction: column;
221 flex-direction: column;
222 width: 100%
223 }
224
225 .jet-form-builder__submit-wrap.has-prev {
226 -webkit-box-orient: horizontal;
227 -webkit-box-direction: normal;
228 -ms-flex-direction: row;
229 flex-direction: row;
230 -webkit-box-pack: justify;
231 -ms-flex-pack: justify;
232 }
233
234 button.jet-form-builder__submit {
235 display: inline-flex;
236 justify-content: flex-start;
237 }
238
239 .jet-form-builder__check-mark {
240 display: -webkit-box;
241 display: -ms-flexbox;
242 display: flex;
243 -webkit-box-align: center;
244 -ms-flex-align: center;
245 align-items: center;
246 -webkit-box-pack: center;
247 -ms-flex-pack: center;
248 justify-content: center
249 }
250
251 .jet-form-builder__check-mark__icon.is-svg-icon svg {
252 display: block
253 }
254
255 .jet-form-builder__check-mark--default {
256 display: -webkit-box;
257 display: -ms-flexbox;
258 display: flex;
259 -webkit-box-align: center;
260 -ms-flex-align: center;
261 align-items: center;
262 -webkit-box-pack: center;
263 -ms-flex-pack: center;
264 justify-content: center
265 }
266
267 .jet-form-builder__field-template--checked .jet-form-builder__check-mark--default {
268 display: none
269 }
270
271 .jet-form-builder__check-mark--checked {
272 display: none;
273 -webkit-box-align: center;
274 -ms-flex-align: center;
275 align-items: center;
276 -webkit-box-pack: center;
277 -ms-flex-pack: center;
278 justify-content: center
279 }
280
281 .jet-form-builder__field-template--checked .jet-form-builder__check-mark--checked {
282 display: -webkit-box;
283 display: -ms-flexbox;
284 display: flex
285 }
286
287 .jet-form-builder-repeater__initial {
288 display: none
289 }
290
291 .jet-form-builder-repeater__row {
292 display: -webkit-box;
293 display: -ms-flexbox;
294 display: flex;
295 width: 100%;
296 -webkit-box-align: start;
297 -ms-flex-align: start;
298 align-items: flex-start;
299 padding: 15px 0
300 }
301
302 .jet-form-builder-repeater__row-fields {
303 -webkit-box-flex: 1;
304 -ms-flex: 1 1 auto;
305 flex: 1 1 auto
306 }
307
308 .jet-form-builder-repeater__row .jet-form-col {
309 padding: 0 5px
310 }
311
312 .jet-form-builder-repeater__actions {
313 display: -webkit-box;
314 display: -ms-flexbox;
315 display: flex
316 }
317
318 .jet-form-builder-repeater__new {
319 margin: 10px 0 0 0
320 }
321
322 .jet-form-builder-repeater__remove {
323 margin: 0 0 0 10px;
324 text-decoration: none !important
325 }
326
327 .layout-column .jet-form-builder__fields-group.checkradio-wrap {
328 width: 100%
329 }
330
331 .jet-form-builder__field-wrap.range-wrap {
332 display: -webkit-box;
333 display: -ms-flexbox;
334 display: flex;
335 -webkit-box-align: center;
336 -ms-flex-align: center;
337 align-items: center;
338 width: 100%
339 }
340
341 input[type="range"].jet-form-builder__field.range-field {
342 margin-right: 10px;
343 -webkit-appearance: none;
344 min-height: 18px;
345 width: 100%;
346 }
347
348 .rtl input[type="range"].jet-form-builder__field.range-field {
349 margin-left: 10px;
350 margin-right: 0;
351 width: 100%;
352 }
353
354 input[type="range"].jet-form-builder__field.range-field, input[type="range"].jet-form-builder__field.range-field:focus {
355 padding: 0;
356 background: transparent;
357 border: none;
358 border-radius: 0;
359 -webkit-box-shadow: none;
360 box-shadow: none;
361 outline: none
362 }
363
364 input[type="range"].jet-form-builder__field.range-field::-webkit-slider-runnable-track {
365 width: 100%;
366 height: var(--jet-fb__range-field-range--height, 4px);
367 cursor: pointer;
368 /**
369 test
370 */
371 background: #e3ddd8;
372 -webkit-box-shadow: none;
373 box-shadow: none;
374 border: none
375 }
376
377 input[type="range"].jet-form-builder__field.range-field::-moz-range-track {
378 width: 100%;
379 height: var(--jet-fb__range-field-range--height, 4px);
380 cursor: pointer;
381 background: #e3ddd8;
382 box-shadow: none;
383 border: none
384 }
385
386 input[type="range"].jet-form-builder__field.range-field::-ms-track {
387 width: 100%;
388 height: var(--jet-fb__range-field-range--height, 4px);
389 cursor: pointer;
390 background: #e3ddd8;
391 box-shadow: none;
392 border: none;
393 color: transparent
394 }
395
396 input[type="range"].jet-form-builder__field.range-field::-ms-fill-lower {
397 background: transparent
398 }
399
400 input[type="range"].jet-form-builder__field.range-field::-ms-fill-upper {
401 background: transparent
402 }
403
404 input[type="range"].jet-form-builder__field.range-field::-webkit-slider-thumb {
405 width: var(--jet-fb__range-field-slider--size, 18px);
406 height: var(--jet-fb__range-field-slider--size, 18px);
407 background: #ccc;
408 border-radius: 50%;
409 cursor: pointer;
410 -webkit-box-shadow: none;
411 box-shadow: none;
412 border: none;
413 margin-top: calc((var(--jet-fb__range-field-slider--size, 18px) - var(--jet-fb__range-field-range--height, 4px)) / -2);
414 -webkit-appearance: none
415 }
416
417 input[type="range"].jet-form-builder__field.range-field::-moz-range-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 box-shadow: none;
424 border: none
425 }
426
427 input[type="range"].jet-form-builder__field.range-field::-ms-thumb {
428 width: var(--jet-fb__range-field-slider--size, 18px);
429 height: var(--jet-fb__range-field-slider--size, 18px);
430 background: #ccc;
431 border-radius: 50%;
432 cursor: pointer;
433 box-shadow: none;
434 border: none
435 }
436
437 .jet-form-message {
438 margin: 20px 0 0 0;
439 text-align: center;
440 padding: 20px
441 }
442
443 .jet-form-message--success {
444 border: 1px solid green;
445 color: green
446 }
447
448 .jet-form-message--error {
449 border: 1px solid red;
450 color: red
451 }
452
453 .jet-form-builder-file-upload__files {
454 display: -webkit-box;
455 display: -ms-flexbox;
456 display: flex;
457 -ms-flex-wrap: wrap;
458 flex-wrap: wrap
459 }
460
461 .jet-form-builder-file-upload .sortable-placeholder {
462 -webkit-box-flex: 0;
463 -ms-flex: 0 0 100px;
464 flex: 0 0 100px;
465 width: 100px;
466 margin: 0 10px 10px 0;
467 position: relative;
468 background: rgba(123, 123, 123, 0.2);
469 height: 100px
470 }
471
472 .jet-form-builder-file-upload__content {
473 min-height: 100px;
474 min-width: 100px;
475 position: relative;
476 display: -webkit-inline-box;
477 display: -ms-inline-flexbox;
478 display: inline-flex
479 }
480
481 .jet-form-builder-file-upload__loader {
482 top: 0;
483 left: 0;
484 right: 10px;
485 bottom: 10px;
486 position: absolute;
487 background: rgba(0, 0, 0, 0.5);
488 display: none;
489 -webkit-box-pack: center;
490 -ms-flex-pack: center;
491 justify-content: center;
492 -webkit-box-align: center;
493 -ms-flex-align: center;
494 align-items: center
495 }
496
497 .is-loading .jet-form-builder-file-upload__loader {
498 display: -webkit-box;
499 display: -ms-flexbox;
500 display: flex
501 }
502
503 .jet-form-builder-file-upload__file {
504 width: 100px;
505 height: 100px;
506 margin: 0 10px 10px 0;
507 position: relative;
508 background-color: rgba(123, 123, 123, 0.2);
509 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237a7a7a' width='48px' height='48px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
510 background-position: center;
511 background-repeat: no-repeat
512 }
513
514 .is-loading .jet-form-builder-file-upload__file {
515 opacity: .5
516 }
517
518 .jet-form-builder-file-upload__file-remove {
519 position: absolute;
520 left: 0;
521 right: 0;
522 top: 50%;
523 bottom: 0;
524 cursor: pointer;
525 display: -webkit-box;
526 display: -ms-flexbox;
527 display: flex;
528 -webkit-box-align: center;
529 -ms-flex-align: center;
530 align-items: center;
531 -webkit-box-pack: center;
532 -ms-flex-pack: center;
533 justify-content: center;
534 -webkit-transition: opacity 200ms linear;
535 transition: opacity 200ms linear;
536 opacity: 0;
537 background: rgba(0, 0, 0, 0.4)
538 }
539
540 .jet-form-builder-file-upload__file-remove svg path {
541 fill: #fff
542 }
543
544 .jet-form-builder-file-upload__file:hover .jet-form-builder-file-upload__file-remove {
545 opacity: 1
546 }
547
548 .jet-form-builder-file-upload__file img {
549 display: block;
550 width: 100%;
551 height: 100% !important;
552 padding: 0;
553 margin: 0;
554 -o-object-fit: cover;
555 object-fit: cover;
556 -o-object-position: center center;
557 object-position: center center
558 }
559
560 .jet-form-builder-file-upload__errors.is-hidden {
561 display: none
562 }
563
564 input.jet-form-builder__field.file-field.jet-form-builder-file-upload__input {
565 border: none !important;
566 padding: 0 !important;
567 border-radius: 0 !important;
568 margin: 0 !important;
569 width: auto !important
570 }
571
572 .field-type-wysiwyg .jet-form-builder__field {
573 padding: 0 !important;
574 border: none !important;
575 border-radius: 0 !important
576 }
577
578
579
580 .jet-form-builder__field-wrap:not(.checkradio-wrap) {
581 width: 100%;
582 }
583
584 .jet-form-builder__field.checkradio-field {
585 position: absolute;
586 z-index: -1;
587 opacity: 0;
588 }
589
590 .jet-form-builder__field-label {
591 display: inline-flex;
592 align-items: center;
593 user-select: none;
594 }
595
596 .jet-form-builder__field-label > span::before {
597 content: '';
598 display: inline-block;
599 width: 0.8em;
600 height: 0.8em;
601 flex-shrink: 0;
602 flex-grow: 0;
603 border: 1px solid #adb5bd;
604 margin-right: 0.5em;
605 background-repeat: no-repeat;
606 background-position: center center;
607 background-size: 50% 50%;
608 }
609
610 .jet-form-builder__field-label.for-checkbox > span::before {
611 border-radius: 10%;
612 }
613
614 .jet-form-builder__field-label.for-radio > span::before {
615 border-radius: 50%;
616 }
617
618 /* стили при наведении курсора на радио */
619 .jet-form-builder__field-label.for-radio :not(:disabled).jet-form-builder__field-label.for-radio :not(:checked):hover + span::before {
620 border-color: #b3d7ff;
621 }
622
623 /* стили для активной радиокнопки (при нажатии на неё) */
624 .jet-form-builder__field-label.for-radio :not(:disabled):active + span::before {
625 background-color: #b3d7ff;
626 border-color: #b3d7ff;
627 }
628
629 /*!* стили для радиокнопки, на�
630 одящейся в фокусе *!*/
631 /*.jet-form-builder__field-label.for-radio :focus+span::before {*/
632 /* box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
633 /*}*/
634
635 /* стили для радиокнопки, на�
636 одящейся в фокусе и не на�
637 одящейся в состоянии checked */
638 .jet-form-builder__field-label.for-radio :focus:not(:checked) + span::before {
639 border-color: #80bdff;
640 }
641
642 /* стили для радиокнопки, на�
643 одящейся в состоянии checked */
644 .jet-form-builder__field-label.for-radio :checked + span::before {
645 border-color: #0b76ef;
646 background-color: #0b76ef;
647 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
648 }
649
650 /* стили для радиокнопки, на�
651 одящейся в состоянии disabled */
652 .jet-form-builder__field-label.for-radio :disabled + span::before {
653 background-color: #e9ecef;
654 }
655
656 /* стили при наведении курсора на checkbox */
657 .jet-form-builder__field-label.for-checkbox :not(:disabled):not(:checked):hover + span::before {
658 border-color: #b3d7ff;
659 }
660
661 /* стили для активного чекбокса (при нажатии на него) */
662 .jet-form-builder__field-label.for-checkbox :not(:disabled):active + span::before {
663 background-color: #b3d7ff;
664 border-color: #b3d7ff;
665 }
666
667 /*!* стили для чекбокса, на�
668 одящегося в фокусе *!*/
669 /*.jet-form-builder__field-label.for-checkbox :focus+span::before {*/
670 /* box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
671 /*}*/
672
673 /* стили для чекбокса, на�
674 одящегося в фокусе и не на�
675 одящегося в состоянии checked */
676 .jet-form-builder__field-label.for-checkbox :focus:not(:checked) + span::before {
677 border-color: #80bdff;
678 }
679
680 /* стили для чекбокса, на�
681 одящегося в состоянии checked */
682 .jet-form-builder__field-label.for-checkbox :checked + span::before {
683 border-color: #0b76ef;
684 background-color: #0b76ef;
685 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
686 }
687
688 /* стили для чекбокса, на�
689 одящегося в состоянии disabled */
690 .jet-form-builder__field-label.for-checkbox :disabled + span::before {
691 background-color: #e9ecef;
692 }
693
694 .jet-form-builder__field-wrap.checkradio-wrap span {
695 display: contents;
696 }
697
698 .rtl .jet-form-builder-row,
699 .rtl .jet-form-builder__field,
700 .rtl .jet-form-builder__next-page-wrap {
701 text-align: right;
702 }
703 .rtl .jet-form-builder__field-label > span::before {
704 margin-right: unset;
705 margin-left: 0.5em;
706 }
707
708
709