PluginProbe
Smart Grid-Layout Design for Contact Form 7 / 4.12
Smart Grid-Layout Design for Contact Form 7 v4.12
4.18.0 4.17.0 3.2.0 3.2.1 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3.3.5 3.3.6 3.3.7 3.3.8 4.0.0 4.0.1 4.1.0 4.1.1 4.1.2 4.1.3 4.1.4 4.10 4.11 4.12 4.13 4.14 All 119 releases
cf7-grid-layout / public / css / cf7-grid-layout-public.css

cf7-grid-layout-public.css in Smart Grid-Layout Design for Contact Form 7 4.12, at public/css/cf7-grid-layout-public.css

619 lines 16.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * All of the CSS for your public-facing functionality should be
3 * included in this file.
4 */
5 /** @since 4.11.0 layout for imagegrids */
6 .cf7sg-list .cf7sg-dl.cf7sg-dc {
7 display: block;
8 }
9 .cf7sg-list .cf7sg-dc.level-6 {margin: 0 0 0 48px}
10 .cf7sg-list .cf7sg-dc.level-5 {margin: 0 0 0 40px}
11 .cf7sg-list .cf7sg-dc.level-4 {margin: 0 0 0 32px}
12 .cf7sg-list .cf7sg-dc.level-3 {margin: 0 0 0 24px}
13 .cf7sg-list .cf7sg-dc.level-2 {margin: 0 0 0 16px}
14 .cf7sg-list .cf7sg-dc.level-1 {margin: 0 0 0 8px}
15 .cf7sg-list .cf7sg-dc.level-6:dir(rtl) {margin: 0 48px 0 0}
16 .cf7sg-list .cf7sg-dc.level-5:dir(rtl) {margin: 0 40px 0 0}
17 .cf7sg-list .cf7sg-dc.level-4:dir(rtl) {margin: 0 32px 0 0}
18 .cf7sg-list .cf7sg-dc.level-3:dir(rtl) {margin: 0 24px 0 0}
19 .cf7sg-list .cf7sg-dc.level-2:dir(rtl) {margin: 0 16px 0 0}
20 .cf7sg-list .cf7sg-dc.level-1:dir(rtl) {margin: 0 8px 0 0}
21
22 .cf7sg-imagehdd .cf7sg-dl {
23 position: relative;
24 width: 150px;
25 height: 150px;
26 }
27 .cf7sg-imagehdd .cf7sg-dl p {
28 position: absolute;
29 width: 150px;
30 padding: 2px 5px;
31 bottom: 0;
32 line-height: normal;
33 background: #0000008c;
34 color: white;
35 text-align: center;
36 margin: auto;
37 font-size: 18px;
38 }
39 .cf7sg-imagehdd .hybriddd-option {
40 line-height: 0;
41 vertical-align: top;
42 }
43 .cf7sg-imagegrid.hybrid-dropdown,
44 .cf7sg-imagegrid .hybriddd-wrapper {
45 border: none;
46 }
47 .hybriddd-landscape.cf7sg-imagehdd .hybriddd-option > label {
48 padding: 2px;
49 position: relative;
50 }
51 .hybrid-dropdown.cf7sg-imagehdd ul.hybriddd-options,
52 .hybrid-dropdown.cf7sg-imagehdd .hybriddd-option{
53 height: auto;
54 }
55 /* image grid */
56 .cf7sg-imagehdd .hybriddd-wrapper.hybriddd-grid{
57 --hybriddd-gap:2px;
58 width:calc( calc(var(--hybriddd-item, max-content) + var(--hybriddd-gap)) * var(--hybriddd-col));
59 }
60 .cf7sg-imagehdd.hybriddd-none .hybriddd-option label,
61 .cf7sg-imagegrid.hybriddd-none .hybriddd-option label{width:auto};
62 .cf7sg-imagehdd .hybriddd-grid .hybriddd-options {
63 grid-column-gap: var(--hybriddd-gap);
64 column-gap: var(--hybriddd-gap);
65 row-gap: var(--hybriddd-gap);
66 }
67 .cf7sg-imagehdd .hybriddd-grid .hybriddd-option > label:hover {
68 transform: scale(96%);
69 }
70 .hybriddd-none .hybriddd-option > label > input {
71 position: absolute;
72 }
73 .cf7sg-imagehdd .hybridddcb::before {
74 content: '';
75 display: block;
76 width: 0;
77 height: 0;
78 margin: 0;
79 }
80 .cf7sg-imagegrid input:checked+.hybridddcb::before {
81 width: 10px;
82 height: 10px;
83 margin: 4px auto;
84 background: white;
85 border-radius: 50%;
86 }
87 .cf7sg-imagegrid.hybrid-dropdown .hybridddcb{
88 visibility: hidden;
89 }
90 .cf7sg-imagehdd.show-cb .hybridddcb {
91 display: inline-block;
92 position: absolute;
93 top: 0;
94 right: 0;
95 margin: 4px;
96 }
97 .cf7sg-imagegrid input:checked+.hybridddcb {
98 width: 20px;
99 height: 20px;
100 vertical-align: middle;
101 visibility: visible;
102 border-radius: 50%;
103 z-index: 7;
104 background: #000000a6;
105 }
106 .cf7sg-imagegrid .cf7sg-dc .cf7sg-dc-img {
107 border: solid 1px #fff0;
108 }
109 .cf7sg-imagegrid .cf7sg-dc .cf7sg-dc-img:before {
110 background-color: white;
111 color: white;
112 content: " ";
113 display: none;
114 border-radius: 50%;
115 border: 1px solid grey;
116 position: absolute;
117 top: 2px;
118 left: 2px;
119 width: 25px;
120 height: 25px;
121 text-align: center;
122 line-height: 24px;
123 transition-duration: 0.4s;
124 transform: scale(0);
125 }
126 .cf7sg-imagegrid .cf7sg-dc input:checked + .cf7sg-dc-img:before {
127 content: "+";
128 background-color: grey;
129 transform: scale(1);
130 display: block;
131 z-index: 2;
132 }
133 .cf7sg-imagegrid .cf7sg-dc input:checked + .cf7sg-dc-img {
134 border-color: grey;
135 }
136 .cf7sg-imagegrid .cf7sg-dc .cf7sg-dc-img img {
137 height: 100%;
138 width: 100%;
139 transition-duration: 0.2s;
140 transform-origin: center;
141 }
142 .cf7sg-imagegrid .cf7sg-dc input:checked + .cf7sg-dc-img img {
143 transform: scale(0.9);
144 }
145 .cf7sg-imagegrid .cf7sg-dynamic_checkbox {
146 display: flex;
147 flex-flow: row wrap;
148 justify-content: start;
149 /* align-content: center; */
150 }
151 .cf7-smart-grid.has-grid .cf7sg-align-center .wpcf7-form-control {
152 width: max-content;
153 display: block;
154 margin: auto;
155 }
156 .cf7sg-imagegrid .cf7sg-dc input {
157 display: none;
158 }
159 .cf7sg-imagegrid .cf7sg-dc-label p {
160 display: inline-flex;
161 margin: 0;
162 padding: 3px 10px;
163 background: #ffffff7d;
164 text-align: center;
165 }
166 .cf7sg-imagegrid .cf7sg-dc-label {
167 position: absolute;
168 display: flex;
169 justify-content: center;
170 width: 100%;
171 height: 100%;
172 align-items: center;
173 flex-direction: column;
174 }
175
176 .cf7sg-imagegrid .cf7sg-dc {
177 position: relative;
178 display: inline-flex;
179 margin: 3px;
180 }
181 /*------ style rules -----*/
182 .cf7-smart-grid.has-grid .wpcf7 .ajax-loader {
183 margin: -24px 0 0 5px;
184 position: absolute;
185 top: 50%;
186 }
187 /* .cf7sg-container .ui-tabs-active .ui-tabs-anchor, */
188 /* .cf7sg-container .ui-widget-content .ui-state-active, */
189 /* .cf7sg-container .ui-widget-content .ui-state-default, */
190 .cf7sg-container .ui-widget-content,
191 .cf7sg-container .toggle-light .toggle-off,
192 .cf7sg-container .ui-widget-header {
193 background: transparent;
194 }
195 .cf7sg-container { line-height: 1.2;}
196 .cf7sg-container a.ui-button {
197 color: inherit;
198 }
199 .cf7sg-container .cf7sg-add-tab .ui-state-default {
200 border: solid 1px #aaa;
201 }
202 /* .cf7sg-container .ui-tabs-anchor{ background: #aaa5} */
203 .cf7sg-slider-section .glider{overflow-x: hidden;padding-bottom:10px}
204 .cf7sg-container .ui-widget{ font: inherit; font-size:inherit}
205 .cf7sg-slider-section .slider-control.slider-prev{float:left}
206 .cf7sg-slider-section .slider-control.slider-prev:dir(rtl){float:right}
207 .cf7sg-slider-section .slider-control.slider-next{float:right}
208 .cf7sg-slider-section .slider-control.dashicons-arrow-left-alt:dir(rtl){transform: rotate(180deg)}
209 .cf7sg-slider-section .slider-control.slider-next:dir(rtl){float:left}
210 .cf7sg-slider-section .slider-control.dashicons-arrow-right-alt:dir(rtl){transform: rotate(180deg)}
211 .cf7sg-slide-active{z-index: 100;}
212 .cf7sg-slider-section .slider-control:hover{cursor: pointer;}
213 .glider-slide > .cf7sg-collapsible-title {margin-bottom: 10px;}
214 .cf7sg-container .cf7-smart-grid.has-grid .columns .container.glider-slide{padding:0 25px 0 10px}
215 .cf7sg-container .slider-control {margin-top: 10px}
216 .cf7-smart-grid.has-grid .cf7sg-slider-section input.wpcf7-submit.slider-control {float: right;width: auto}
217 .cf7-smart-grid.has-grid .cf7sg-slider-section input.wpcf7-submit.slider-control:dir(rtl){float:left}
218 .glider-dot[data-cf7sg="error"] {background-color: #df8b8b}
219 .glider-dot[data-cf7sg="error"]:focus {background-color: #ffb3b3}
220 .glider-dot[data-cf7sg="error"].active {background-color: red}
221
222 .container.cf7sg-slider-controls .slider-control {
223 margin: 0;
224 display: inline-block;
225 vertical-align: top;
226 }
227 .container.cf7sg-slider-controls .slider-next{float:right;}
228 .cf7sg-slider-controls > .row {width:100%;float:right;}
229 .cf7-smart-grid.has-grid .ui-button {
230 border-radius: 3px;
231 border: 1px solid #aaa;
232 padding: 8px 12px;
233 }
234 .cf7-sg-table-button.disabled .ui-button {
235 color: gray;
236 cursor: not-allowed;
237 text-decoration-line: none;
238 }
239 ul.cf7-sg-tabs-list li .dashicons.dashicons-no-alt {
240 border-left: solid 1px grey;
241 border-bottom: solid 1px grey;
242 border-bottom-left-radius: 14px;
243 border-top-left-radius: 5px;
244 border-bottom-right-radius: 5px;
245 }
246 ul.cf7-sg-tabs-list li[data-cf7sg="error"] {border: #d90000 solid 2px;}
247 .row.cf7-sg-table .row-control {
248 border: solid 1px #b9b9b9;
249 border-left: none;
250 }
251 .cf7sg-collapsible[data-cf7sg="error"] {border-right: double 4px red;}
252 .container.cf7sg-collapsible + .container > .row:first-child > .columns.full > .container.cf7-sg-table {
253 margin-top: 10px;
254 }
255 .wpcf7 form .cf7sg-response-output {
256 margin: 2em 0.5em 1em;
257 padding: 0.2em 1em;
258 border: 2px solid #00a0d2; /* Blue */
259 }
260
261 .wpcf7 form.init .cf7sg-response-output,
262 .wpcf7 form.resetting .cf7sg-response-output,
263 .wpcf7 form.submitting .cf7sg-response-output {
264 display: none;
265 }
266
267 .wpcf7 form.sent .cf7sg-response-output {
268 border-color: #46b450; /* Green */
269 }
270
271 .wpcf7 form.failed .cf7sg-response-output,
272 .wpcf7 form.aborted .cf7sg-response-output {
273 border-color: #dc3232; /* Red */
274 }
275
276 .wpcf7 form.spam .cf7sg-response-output {
277 border-color: #f56e28; /* Orange */
278 }
279
280 .wpcf7 form.invalid .cf7sg-response-output,
281 .wpcf7 form.unaccepted .cf7sg-response-output {
282 border-color: #ffb900; /* Yellow */
283 }
284 .container.cf7sg-collapsible>.ui-accordion .ui-accordion-content{
285 padding: 0.5em 1em;
286 }
287 .row.cf7-sg-table .row-control .dashicons {
288 background-color: white;
289 border-radius: 50%;
290 border: solid 1px #b9b9b9;
291 color: #848484;
292 }
293 .cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
294 background: #e9e9e9;
295 border-radius: 3px;
296 }
297 span.cf7sg-validation-warning {
298 font-size: 80%;
299 color: #626262;
300 border-radius: 3px;
301 border: solid 1px #656565;
302 background: #f2f2f2;
303 }
304 .cf7sg-validation-warning .confirm-button {
305 background: white;
306 border: #989898 solid 2px;
307 border-radius: 5px;
308 color: #8f0000;
309 text-transform: uppercase;
310 font-size: 0.9em;
311 }
312 .cf7-smart-grid.has-grid .field > label em {
313 color: red;
314 }
315 .cf7-smart-grid.has-grid .info-tip {
316 font-size: 80%;
317 font-style: italic;
318 color: grey;
319 margin: 0 0 5px 0;
320 }
321 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
322 border-radius: 3px;
323 }
324 /* .cf7-smart-grid.has-grid .wpcf7-submit {
325 background: #383838;
326 border: solid 1px #383838;
327 border-radius: 3px;
328 font-size: 110%;
329 font-weight: bold;
330 color: white;
331 }
332 .cf7-smart-grid.has-grid .wpcf7-save {
333 background: transparent;
334 color: #383838;
335 } */
336 .cf7sg-collapsible .ui-state-default {
337 background: transparent;
338 }
339 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection--single .select2-selection__rendered {
340 font-size: 0.9em;
341 }
342 .cf7-smart-grid.has-grid .select2-results__option {
343 font-size: 0.8em;
344 }
345 .cf7sg-collapsible .toggle-light .toggle-on,
346 .cf7sg-collapsible .toggle-light .toggle-off {
347 font-size: 0.75em;
348 }
349 span.cf7sg-popup {
350 background: rgba(227, 227, 227, 0.81);
351 font-size: 1.2em;
352 border-radius: 3px;
353 }
354 /*------ layout rules ----*/
355 .sy-slide > .cf7sg-collapsible-title {
356 margin-bottom: 10px;
357 }
358 .cf7sg-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
359 padding: .2em 1em;
360 }
361 .cf7sg-slide-filler .ajax-loader {
362 float: right;
363 }
364 .cf7-smart-grid.has-grid input.select2-search__field {
365 min-width: 1.3em;
366 }
367 .cf7-sg-table-button .max-limit.wpcf7-not-valid-tip {
368 display: inline;
369 margin-right: 30px;
370 }
371 ul.cf7-sg-tabs-list li .dashicons.dashicons-no-alt {
372 position: absolute;
373 right: 0;
374 }
375 .cf7sg-add-tab.ui-tabs-nav .ui-tabs-anchor {
376 padding: .2em 1em;
377 }
378 .ui-tabs .cf7-sg-tabs-list.ui-tabs-nav .ui-tabs-anchor {
379 padding: .2em 20px;
380 }
381 ul.cf7-sg-tabs-list li {
382 position: relative;
383 }
384 .cf7-sg-tabs.ui-tabs ul.ui-tabs-nav li a:hover,
385 .cf7-sg-tabs.ui-tabs ul.ui-tabs-nav li .dashicons-no-alt:hover {
386 cursor: pointer;
387 }
388 .cf7-smart-grid .dashicons{
389 vertical-align: middle;
390 }
391 .ui-tabs .cf7sg-add-tab.ui-tabs-nav {
392 display: inline-block;
393 padding-left: 0;
394 }
395 ul.cf7-sg-tabs-list {
396 display: inline-block;
397 }
398 .cf7-smart-grid .cf7-sg-table-button {
399 text-align: right;
400 margin-top: 10px;
401 margin-bottom: 5px;
402 }
403 .cf7-smart-grid .row.cf7-sg-table-footer {
404 margin-top: 5px;
405 }
406 .cf7-smart-grid .row.cf7-sg-table {
407 margin-top: 3px;
408 }
409 .cf7-smart-grid .row.cf7-sg-table-footer+.cf7-sg-table-button {
410 margin-top: 0;
411 }
412 .row.cf7-sg-table-layout .columns input:not([type="submit"]){
413 width:100%;
414 }
415 .row.cf7-sg-table {
416 position:relative;
417 }
418 .row.cf7-sg-table .row-control .dashicons:hover {
419 cursor: pointer;
420 }
421 .row.cf7-sg-table .row-control {
422 position: absolute;
423 height: 100%;
424 top: 0;
425 right: 0;
426 margin-right: -15px;
427 width: 5px;
428 display:none;
429 }
430 .row.cf7-sg-table:nth-last-child(2) .row-control:not(.display-none) {
431 display: inline;
432 }
433 .row.cf7-sg-table .row-control .dashicons {
434 position: absolute;
435 top: 50%;
436 margin-top: -10px;
437 margin-left: -5px;
438 }
439 .cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
440 display: inherit;
441 position: absolute;
442 right: 0;
443 bottom: -16px;
444 padding: 3px 10px;
445 min-width: 195px;
446 line-height: 1.2em;
447 z-index: 7777;
448 }
449 .cf7-smart-grid.has-grid .field input:focus + span.wpcf7-not-valid-tip,
450 .cf7-smart-grid.has-grid .field select:focus + span.wpcf7-not-valid-tip,
451 .cf7-smart-grid.has-grid .field textarea:focus + span.wpcf7-not-valid-tip {
452 display: none;
453 }
454 span.cf7sg-validation-warning {
455 display: block;
456 position: absolute;
457 right: 50%;
458 top: 25px;
459 width: 140px;
460 height: auto;
461 margin-right: -70px;
462 z-index:999;
463 padding: 2px 3px;
464 }
465 .cf7sg-validation-warning .confirm-button {
466 position: absolute;
467 bottom: -13px;
468 right: -19px;
469 padding: 1px 5px;
470 cursor:pointer;
471 }
472 .cf7-smart-grid.has-grid input.select2-search__field{
473 background-image: url('search.png');
474 background-repeat: no-repeat;
475 background-position-x: calc(100% - 5px);
476 background-position-y: 50%;
477 }
478 .cf7sg-collapsible .row.ui-accordion-content {
479 min-height: 120px;
480 overflow: unset;
481 }
482 .cf7-smart-grid.has-grid .field {
483 width: 100%;
484 }
485 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img),
486 .cf7-smart-grid.has-grid .hybriddd-selected {
487 width: 100%;
488 }
489 .cf7-smart-grid.has-grid .wpcf7-form-control.cf7sg-imagegrid{
490 width:max-content;
491 display: block;
492 margin: 0 auto;
493 }
494 .cf7-smart-grid.has-grid .select2 {
495 width: 100% !important;
496 }
497 .cf7-smart-grid.has-grid .field .wpcf7-form-control-wrap{
498 display: inline-block;
499 width: 100%;
500 }
501 .cf7-smart-grid.has-grid .cf7-tags-2 .field .wpcf7-form-control-wrap {
502 max-width: 200px;
503 width: 50%;
504 }
505 .cf7sg-container .cf7-smart-grid.has-grid .row.cf7-sg-table > .columns > .container > .container,
506 .cf7sg-container .cf7-smart-grid.has-grid .columns .container {
507 padding: 0;
508 }
509 .cf7-smart-grid.has-grid .field .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
510 vertical-align: middle;
511 }
512 .cf7-smart-grid.has-grid .field > label {
513 display: block;
514 margin-bottom: 0;
515 }
516 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
517 min-height: 34px;
518 }
519 .cf7-smart-grid.has-grid .wpcf7-form-control.nice-select {
520 line-height: 32px;
521 height: 34px;
522 }
523 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection__arrow {
524 min-height: 34px;
525 }
526 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection--single .select2-selection__rendered {
527 line-height: 34px;
528 }
529 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection.select2-selection--single {
530 min-height: 34px;
531 }
532 .cf7-smart-grid.has-grid .wpcf7-form-control.wpcf7-radio,
533 .cf7-smart-grid.has-grid .wpcf7-form-control.wpcf7-checkbox {
534 display: inline-block;
535 }
536 .cf7sg-collapsible.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
537 right: .5em;
538 left: unset;
539 }
540 .cf7sg-collapsible .toggle {
541 display: inline-block;
542 vertical-align: middle;
543 float: right;
544 }
545 .cf7sg-collapsible .toggle .toggle-inner {
546 height: auto;
547 }
548
549 .cf7sg-collapsible .cf7sg-title+.toggle {
550 float: none;
551 position: absolute;
552 right: 6px;
553 top: 50%;
554 margin-top: -10px;
555 }
556 .cf7sg-collapsible .cf7sg-title + .toggle:dir(rtl) {
557 right: auto;
558 left: 6px;
559 }
560 .cf7sg-title.toggled {
561 max-width: calc(100% - 60px);
562 display: inline-block;
563 vertical-align: middle;
564 }
565 /*smomehow the icon accordion have a larger left padding*/
566 .ui-accordion .ui-accordion-icons {
567 padding-left: .7em;
568 }
569 .cf7sg-external-form {
570 margin-bottom: 5px;
571 }
572 .cf7sg-container .cf7-smart-grid.has-grid .container {
573 margin-bottom: 5px;
574 }
575 .cf7sg-container .cf7-smart-grid.has-grid .container:last-child {
576 margin-bottom: 0;
577 }
578 .cf7-smart-grid.has-grid .nice-select ul.list {
579 max-height: 300px;
580 overflow-y: auto;
581 }
582 a.cf7sg-button {
583 min-height: 34px;
584 padding: 5px 0px;
585 display: inline-block;
586 width: 100%;
587 text-align: center;
588 }
589 .cf7sg-popup-box{
590 position: relative;
591 }
592 .display-none{display: none;}
593 span.cf7sg-popup {
594 bottom: -1.2em;
595 max-height: 200px;
596 left: 0;
597 position: absolute;
598 transition: 500ms ease;
599 padding: .4em;
600 white-space: nowrap;
601 }
602 .wpcf7-form-control.wpcf7-submit:disabled:hover+span.cf7sg-popup {display: block;}
603 a.cf7sg-button {
604 background: #383838;
605 color: white;
606 border: solid 1px #383838;
607 border-radius: 3px;
608 font-weight: bold;
609 font-size: 110%;
610 }
611 @media (max-width: 480px) {
612 .cf7sg-container .cf7-smart-grid.has-grid .wpcf7[dir="rtl"] .row {
613 transform: rotate(180deg);
614 }
615 .cf7sg-container .cf7-smart-grid.has-grid .wpcf7[dir="rtl"] .columns {
616 transform: rotate(-180deg);
617 }
618 }
619