PluginProbe
Smart Grid-Layout Design for Contact Form 7 / 4.11
Smart Grid-Layout Design for Contact Form 7 v4.11
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.11, at public/css/cf7-grid-layout-public.css

614 lines 15.7 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-next{float:right}
207 .cf7sg-slide-active{z-index: 100;}
208 .cf7sg-slider-section .slider-control:hover{cursor: pointer;}
209 .glider-slide > .cf7sg-collapsible-title {margin-bottom: 10px;}
210 .cf7sg-container .cf7-smart-grid.has-grid .columns .container.glider-slide{padding:0 25px 0 10px}
211 .cf7sg-container .slider-control {margin-top: 10px}
212 .cf7-smart-grid.has-grid .cf7sg-slider-section input.wpcf7-submit.slider-control {float: right;width: auto}
213 .glider-dot[data-cf7sg="error"] {background-color: #df8b8b}
214 .glider-dot[data-cf7sg="error"]:focus {background-color: #ffb3b3}
215 .glider-dot[data-cf7sg="error"].active {background-color: red}
216
217 .container.cf7sg-slider-controls .slider-control {
218 margin: 0;
219 display: inline-block;
220 vertical-align: top;
221 }
222 .container.cf7sg-slider-controls .slider-next{float:right;}
223 .cf7sg-slider-controls > .row {width:100%;float:right;}
224 .cf7-smart-grid.has-grid .ui-button {
225 border-radius: 3px;
226 border: 1px solid #aaa;
227 padding: 8px 12px;
228 }
229 .cf7-sg-table-button.disabled .ui-button {
230 color: gray;
231 cursor: not-allowed;
232 text-decoration-line: none;
233 }
234 ul.cf7-sg-tabs-list li .dashicons.dashicons-no-alt {
235 border-left: solid 1px grey;
236 border-bottom: solid 1px grey;
237 border-bottom-left-radius: 14px;
238 border-top-left-radius: 5px;
239 border-bottom-right-radius: 5px;
240 }
241 ul.cf7-sg-tabs-list li[data-cf7sg="error"] {border: #d90000 solid 2px;}
242 .row.cf7-sg-table .row-control {
243 border: solid 1px #b9b9b9;
244 border-left: none;
245 }
246 .cf7sg-collapsible[data-cf7sg="error"] {border-right: double 4px red;}
247 .container.cf7sg-collapsible + .container > .row:first-child > .columns.full > .container.cf7-sg-table {
248 margin-top: 10px;
249 }
250 .wpcf7 form .cf7sg-response-output {
251 margin: 2em 0.5em 1em;
252 padding: 0.2em 1em;
253 border: 2px solid #00a0d2; /* Blue */
254 }
255
256 .wpcf7 form.init .cf7sg-response-output,
257 .wpcf7 form.resetting .cf7sg-response-output,
258 .wpcf7 form.submitting .cf7sg-response-output {
259 display: none;
260 }
261
262 .wpcf7 form.sent .cf7sg-response-output {
263 border-color: #46b450; /* Green */
264 }
265
266 .wpcf7 form.failed .cf7sg-response-output,
267 .wpcf7 form.aborted .cf7sg-response-output {
268 border-color: #dc3232; /* Red */
269 }
270
271 .wpcf7 form.spam .cf7sg-response-output {
272 border-color: #f56e28; /* Orange */
273 }
274
275 .wpcf7 form.invalid .cf7sg-response-output,
276 .wpcf7 form.unaccepted .cf7sg-response-output {
277 border-color: #ffb900; /* Yellow */
278 }
279 .container.cf7sg-collapsible>.ui-accordion .ui-accordion-content{
280 padding: 0.5em 1em;
281 }
282 .row.cf7-sg-table .row-control .dashicons {
283 background-color: white;
284 border-radius: 50%;
285 border: solid 1px #b9b9b9;
286 color: #848484;
287 }
288 .cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
289 background: #e9e9e9;
290 border-radius: 3px;
291 }
292 span.cf7sg-validation-warning {
293 font-size: 80%;
294 color: #626262;
295 border-radius: 3px;
296 border: solid 1px #656565;
297 background: #f2f2f2;
298 }
299 .cf7sg-validation-warning .confirm-button {
300 background: white;
301 border: #989898 solid 2px;
302 border-radius: 5px;
303 color: #8f0000;
304 text-transform: uppercase;
305 font-size: 0.9em;
306 }
307 .cf7-smart-grid.has-grid .field > label em {
308 color: red;
309 }
310 .cf7-smart-grid.has-grid .info-tip {
311 font-size: 80%;
312 font-style: italic;
313 color: grey;
314 margin: 0 0 5px 0;
315 }
316 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
317 border-radius: 3px;
318 }
319 /* .cf7-smart-grid.has-grid .wpcf7-submit {
320 background: #383838;
321 border: solid 1px #383838;
322 border-radius: 3px;
323 font-size: 110%;
324 font-weight: bold;
325 color: white;
326 }
327 .cf7-smart-grid.has-grid .wpcf7-save {
328 background: transparent;
329 color: #383838;
330 } */
331 .cf7sg-collapsible .ui-state-default {
332 background: transparent;
333 }
334 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection--single .select2-selection__rendered {
335 font-size: 0.9em;
336 }
337 .cf7-smart-grid.has-grid .select2-results__option {
338 font-size: 0.8em;
339 }
340 .cf7sg-collapsible .toggle-light .toggle-on,
341 .cf7sg-collapsible .toggle-light .toggle-off {
342 font-size: 0.75em;
343 }
344 span.cf7sg-popup {
345 background: rgba(227, 227, 227, 0.81);
346 font-size: 1.2em;
347 border-radius: 3px;
348 }
349 /*------ layout rules ----*/
350 .sy-slide > .cf7sg-collapsible-title {
351 margin-bottom: 10px;
352 }
353 .cf7sg-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
354 padding: .2em 1em;
355 }
356 .cf7sg-slide-filler .ajax-loader {
357 float: right;
358 }
359 .cf7-smart-grid.has-grid input.select2-search__field {
360 min-width: 1.3em;
361 }
362 .cf7-sg-table-button .max-limit.wpcf7-not-valid-tip {
363 display: inline;
364 margin-right: 30px;
365 }
366 ul.cf7-sg-tabs-list li .dashicons.dashicons-no-alt {
367 position: absolute;
368 right: 0;
369 }
370 .cf7sg-add-tab.ui-tabs-nav .ui-tabs-anchor {
371 padding: .2em 1em;
372 }
373 .ui-tabs .cf7-sg-tabs-list.ui-tabs-nav .ui-tabs-anchor {
374 padding: .2em 20px;
375 }
376 ul.cf7-sg-tabs-list li {
377 position: relative;
378 }
379 .cf7-sg-tabs.ui-tabs ul.ui-tabs-nav li a:hover,
380 .cf7-sg-tabs.ui-tabs ul.ui-tabs-nav li .dashicons-no-alt:hover {
381 cursor: pointer;
382 }
383 .cf7-smart-grid .dashicons{
384 vertical-align: middle;
385 }
386 .ui-tabs .cf7sg-add-tab.ui-tabs-nav {
387 display: inline-block;
388 padding-left: 0;
389 }
390 ul.cf7-sg-tabs-list {
391 display: inline-block;
392 }
393 .cf7-smart-grid .cf7-sg-table-button {
394 text-align: right;
395 margin-top: 10px;
396 margin-bottom: 5px;
397 }
398 .cf7-smart-grid .row.cf7-sg-table-footer {
399 margin-top: 5px;
400 }
401 .cf7-smart-grid .row.cf7-sg-table {
402 margin-top: 3px;
403 }
404 .cf7-smart-grid .row.cf7-sg-table-footer+.cf7-sg-table-button {
405 margin-top: 0;
406 }
407 .row.cf7-sg-table-layout .columns input:not([type="submit"]){
408 width:100%;
409 }
410 .row.cf7-sg-table {
411 position:relative;
412 }
413 .row.cf7-sg-table .row-control .dashicons:hover {
414 cursor: pointer;
415 }
416 .row.cf7-sg-table .row-control {
417 position: absolute;
418 height: 100%;
419 top: 0;
420 right: 0;
421 margin-right: -15px;
422 width: 5px;
423 display:none;
424 }
425 .row.cf7-sg-table:nth-last-child(2) .row-control:not(.display-none) {
426 display: inline;
427 }
428 .row.cf7-sg-table .row-control .dashicons {
429 position: absolute;
430 top: 50%;
431 margin-top: -10px;
432 margin-left: -5px;
433 }
434 .cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
435 display: inherit;
436 position: absolute;
437 right: 0;
438 bottom: 0;
439 padding: 3px 10px;
440 min-width: 195px;
441 line-height: 1.2em;
442 z-index: 7777;
443 }
444 .cf7-smart-grid.has-grid .field input:focus + span.wpcf7-not-valid-tip,
445 .cf7-smart-grid.has-grid .field select:focus + span.wpcf7-not-valid-tip,
446 .cf7-smart-grid.has-grid .field textarea:focus + span.wpcf7-not-valid-tip {
447 display: none;
448 }
449 span.cf7sg-validation-warning {
450 display: block;
451 position: absolute;
452 right: 50%;
453 top: 25px;
454 width: 140px;
455 height: auto;
456 margin-right: -70px;
457 z-index:999;
458 padding: 2px 3px;
459 }
460 .cf7sg-validation-warning .confirm-button {
461 position: absolute;
462 bottom: -13px;
463 right: -19px;
464 padding: 1px 5px;
465 cursor:pointer;
466 }
467 .cf7-smart-grid.has-grid input.select2-search__field{
468 background-image: url('search.png');
469 background-repeat: no-repeat;
470 background-position-x: calc(100% - 5px);
471 background-position-y: 50%;
472 }
473 .cf7sg-collapsible .row.ui-accordion-content {
474 min-height: 120px;
475 overflow: unset;
476 }
477 .cf7-smart-grid.has-grid .field {
478 width: 100%;
479 }
480 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img),
481 .cf7-smart-grid.has-grid .hybriddd-selected {
482 width: 100%;
483 }
484 .cf7-smart-grid.has-grid .wpcf7-form-control.cf7sg-imagegrid{
485 width:max-content;
486 display: block;
487 margin: 0 auto;
488 }
489 .cf7-smart-grid.has-grid .select2 {
490 width: 100% !important;
491 }
492 .cf7-smart-grid.has-grid .field .wpcf7-form-control-wrap{
493 display: inline-block;
494 width: 100%;
495 }
496 .cf7-smart-grid.has-grid .cf7-tags-2 .field .wpcf7-form-control-wrap {
497 max-width: 200px;
498 width: 50%;
499 }
500 .cf7sg-container .cf7-smart-grid.has-grid .row.cf7-sg-table > .columns > .container > .container,
501 .cf7sg-container .cf7-smart-grid.has-grid .columns .container {
502 padding: 0;
503 }
504 .cf7-smart-grid.has-grid .field .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
505 vertical-align: middle;
506 }
507 .cf7-smart-grid.has-grid .field > label {
508 display: block;
509 margin-bottom: 0;
510 }
511 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
512 min-height: 34px;
513 }
514 .cf7-smart-grid.has-grid .wpcf7-form-control.nice-select {
515 line-height: 32px;
516 height: 34px;
517 }
518 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection__arrow {
519 min-height: 34px;
520 }
521 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection--single .select2-selection__rendered {
522 line-height: 34px;
523 }
524 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection.select2-selection--single {
525 min-height: 34px;
526 }
527 .cf7-smart-grid.has-grid .wpcf7-form-control.wpcf7-radio,
528 .cf7-smart-grid.has-grid .wpcf7-form-control.wpcf7-checkbox {
529 display: inline-block;
530 }
531 .cf7sg-collapsible.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
532 right: .5em;
533 left: unset;
534 }
535 .cf7sg-collapsible .toggle {
536 display: inline-block;
537 vertical-align: middle;
538 float: right;
539 }
540 .cf7sg-collapsible .toggle .toggle-inner {
541 height: auto;
542 }
543
544 .cf7sg-collapsible .cf7sg-title+.toggle {
545 float: none;
546 position: absolute;
547 right: 6px;
548 top: 50%;
549 margin-top: -10px;
550 }
551 .cf7sg-collapsible .cf7sg-title + .toggle:dir(rtl) {
552 right: auto;
553 left: 6px;
554 }
555 .cf7sg-title.toggled {
556 max-width: calc(100% - 60px);
557 display: inline-block;
558 vertical-align: middle;
559 }
560 /*smomehow the icon accordion have a larger left padding*/
561 .ui-accordion .ui-accordion-icons {
562 padding-left: .7em;
563 }
564 .cf7sg-external-form {
565 margin-bottom: 5px;
566 }
567 .cf7sg-container .cf7-smart-grid.has-grid .container {
568 margin-bottom: 5px;
569 }
570 .cf7sg-container .cf7-smart-grid.has-grid .container:last-child {
571 margin-bottom: 0;
572 }
573 .cf7-smart-grid.has-grid .nice-select ul.list {
574 max-height: 300px;
575 overflow-y: auto;
576 }
577 a.cf7sg-button {
578 min-height: 34px;
579 padding: 5px 0px;
580 display: inline-block;
581 width: 100%;
582 text-align: center;
583 }
584 .cf7sg-popup-box{
585 position: relative;
586 }
587 .display-none{display: none;}
588 span.cf7sg-popup {
589 bottom: -1.2em;
590 max-height: 200px;
591 left: 0;
592 position: absolute;
593 transition: 500ms ease;
594 padding: .4em;
595 white-space: nowrap;
596 }
597 .wpcf7-form-control.wpcf7-submit:disabled:hover+span.cf7sg-popup {display: block;}
598 a.cf7sg-button {
599 background: #383838;
600 color: white;
601 border: solid 1px #383838;
602 border-radius: 3px;
603 font-weight: bold;
604 font-size: 110%;
605 }
606 @media (max-width: 480px) {
607 .cf7sg-container .cf7-smart-grid.has-grid .wpcf7[dir="rtl"] .row {
608 transform: rotate(180deg);
609 }
610 .cf7sg-container .cf7-smart-grid.has-grid .wpcf7[dir="rtl"] .columns {
611 transform: rotate(-180deg);
612 }
613 }
614