PluginProbe
JetFormBuilder — Dynamic Blocks Form Builder / 1.1.0
JetFormBuilder — Dynamic Blocks Form Builder v1.1.0
3.6.6.1 3.6.6 3.6.5.4 3.6.5.3 3.6.5.2 3.6.5.1 3.6.5 3.6.4.2 3.6.4.1 3.6.4 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 All 134 releases
jetformbuilder / assets / css / frontend.css

frontend.css in JetFormBuilder — Dynamic Blocks Form Builder 1.1.0, at assets/css/frontend.css

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