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