PluginProbe
Smart Grid-Layout Design for Contact Form 7 / 3.3.8
Smart Grid-Layout Design for Contact Form 7 v3.3.8
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 / admin / css / cf7-grid-layout-post.css

cf7-grid-layout-post.css in Smart Grid-Layout Design for Contact Form 7 3.3.8, at admin/css/cf7-grid-layout-post.css

510 lines 11.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #grid-form .js-help + .cf7sg-helper-list{margin-top:39px;}
2 span.js-icon.column-control{
3 background-image: url('./image/js-sprite.png');
4 width: 13px;
5 display: inline-block;
6 height: 10px;
7 background-size: 200%;
8 margin-top: 4px;}
9 .js-icon.column-control:hover {background-position-x: 13px;}
10 span.php-icon.column-control{
11 background-image: url('./image/php-sprite.png');
12 width: 26px;
13 display: inline-block;
14 height: 13px;
15 background-size: 200%;
16 margin-top: 2px;}
17 .php-icon.column-control:hover {background-position-x: 26px;}
18 a.helper {text-decoration: none;cursor: pointer;}
19 a.helper + span.helper {
20 display: none;
21 position: absolute;
22 background: white;
23 border: solid 1px;
24 padding: 2px;
25 margin-top: -25px;
26 color: black;
27 }
28 .helper .tag-colour { font-weight: bold;}
29 a.helper:hover + span.helper {display: inline;}
30 .wp-pointer-buttons a.close {
31 margin: 5px 0 0 20px;
32 }
33 #ajax-response.error-msg{
34 color:red;
35 }
36 #full-screen-cf7 {
37 position: absolute;
38 top: -39px;
39 left: 160px;
40 }
41 #full-screen-cf7.full-screen {
42 position: absolute;
43 top: auto;
44 left: auto;
45 right: 0;
46 bottom: -58px;
47 }
48 #cf7sg-editor.full-screen {
49 top: 5px;
50 z-index: 10;
51 position: fixed;
52 overflow: auto;
53 height: 100%;
54 margin-left: -15px;
55 }
56 #form-editor-tabs ul.ui-tabs-nav {
57 border-bottom: 1px solid #ddd;
58 padding: 7px 0px 0 3px;
59 margin: 0;
60 min-width: 100%;
61 text-align: right;
62 }
63 #form-editor-tabs ul li.ui-state-disabled:first-child {
64 display: none;
65 }
66 #form-editor-tabs ul.ui-tabs-nav > li {
67 display: inline-block;
68 border: solid 1px #ddd;
69 padding: 3px 7px;
70 background-color: #d1d1d1;
71 margin: 0 0px -1px;
72 border-top-left-radius: 3px;
73 }
74 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active {
75 background: transparent;
76 border-bottom: none;
77 }
78 .tagsdiv .tagchecklist > span {
79 display: block;
80 margin: 0;
81 clear: both;
82 line-height: 15px;
83 }
84 .tagsdiv .tagchecklist button.ntdelbutton{
85 display:none;
86 }
87 .cf7sg-dynamic-list p.the-tagcloud a {
88 display: block;
89 line-height: 15px;
90 font-size: 13px !important;
91 text-decoration: none;
92 color: #669;
93 cursor:default;
94 }
95 #poststuff .cf7sg-dynamic-list p.the-tagcloud {
96 border: none;
97 padding: 0;
98 margin-left: 14px;
99 margin-top:0;
100 }
101 .cf7sg-dynamic-list button.tagcloud-link {
102 display: none;
103 }
104 .cf7sg-dynamic-list .hide-if-no-js {
105 margin-top: 0;
106 }
107 /*
108 grid layout
109 */
110 #html-script, #grid-col, #grid-helper,#grid-js-helper,
111 #grid-form .grid-controls,
112 #grid-form .row-controls .dashicons-no-alt,
113 #grid-form .grid-column > .dashicons-no-alt,
114 #grid-row, #grid-collapsible, #grid-tabs, .cf7-sg-hidden,
115 #grid-collapsible-with-toggle,
116 #grid-cf7-forms,
117 #grid-form .cf7sg-external-form-content,
118 #grid-form .table-row-button {
119 display: none;
120 }
121 #grid-form .row.cf7-sg-table .row-controls label.table-row-button {
122 display: block;
123 text-align: center;
124 }
125 #grid-form .form-select {
126 display: block;
127 margin: 0 auto;
128 }
129 #grid-form .form-controls {
130 position: relative;
131 padding: 22px;
132 }
133 #grid-form .cf7sg-external-form {
134 border: solid 1px #777;
135 background-color: #ddd;
136 margin: 3px 0;
137 border-radius: 3px;
138 }
139 textarea.grid-input {
140 width: 100%;
141 min-height: 65px;
142 }
143 #grid-form .grid-controls {
144 position: absolute;
145 background: #f1f1f1;
146 padding: 5px;
147 border: solid 1px grey;
148 width: 137px;
149 z-index:1008;
150 }
151 #grid-form .container,
152 #grid-form .table-row-button input {
153 max-width: 100%;
154 }
155 #cf7-codemirror .CodeMirror {
156 height: calc( 100vh - 180px);
157 }
158 #grid-form .row.cf7-sg-table {
159 box-shadow: 0px 0px 4px #0093ff;
160 }
161 #grid-form .grid-column {
162 background-color: #ddd;
163 }
164 #grid-form .dashicons:hover{
165 cursor:pointer;
166 color: blue;
167 }
168 #grid-form .dashicons{
169 clear:both;
170 }
171 #grid-form .columns {
172 border-top: solid 2px #ddd;
173 border-bottom: solid 2px #ddd;
174 }
175 #grid-form .columns.column-selected {
176 border-bottom-color: #0055d4;
177 border-top-color: #0055d4;
178 }
179 #grid-form .container {
180 padding: 0;
181 border: solid 1px #d7d7d7;
182 margin-top: 5px;
183 border-radius: 3px;
184 }
185 #grid-form .row {
186 padding: 4px 20px 4px 4px;
187 position: relative;
188 min-height: 90px;
189 }
190 #grid-form .row-controls{
191 position: absolute;
192 top:0;
193 right: 0;
194 width: 20px;
195 display: inline-block;
196 height: 100%;
197 background: #606060;
198 border-top-right-radius: 3px;
199 border-bottom-right-radius: 3px;
200 }
201 #grid-form .row-controls .grid-controls {
202 position: absolute;
203 top: 20px;
204 right: 0px;
205 text-align: right;
206 }
207 #grid-form .cf7sg-tag-dynamic_select:last-child {
208 margin: 0;
209 }
210 #grid-form .cf7sg-helper-list {
211 margin: 0;
212 margin-top: 22px;
213 padding: 2px 5px 8px 5px;
214 background: white;
215 }
216 #grid-form .php-icon {
217 position: relative;
218 }
219 #grid-form .php-icon + div.helper-popup,
220 #grid-form .js-icon + div.helper-popup {
221 position: absolute;
222 z-index: 9;
223 background: #d8d8d8;
224 border: solid 1px #787878;
225 width: 300px;
226 }
227 #grid-form .helper-popup p {
228 margin: 0;
229 position: absolute;
230 top: 0;
231 left: 0;
232 text-align: center;
233 width: 100%;
234 }
235 #grid-form .helper-popup .dashicons.dashicons-no-alt {
236 position: absolute;
237 right: -9px;
238 top: -8px;
239 background: white;
240 border-radius: 50%;
241 z-index: 9;
242 }
243 #grid-form .helper-popup .helper{
244 position: relative;
245 }
246 #grid-form .helper-popup .copy-helper {
247 display: none;
248 position: absolute;
249 top: -22px;
250 left: 20px;
251 background: #323232;
252 color: white;
253 padding: 2px 5px;
254 border-radius: 3px;
255 font-weight: bold;
256 min-width: 78px;
257 }
258 #grid-form .helper-popup .helper:hover .copy-helper {
259 display: inline-block;
260 }
261 #grid-form .helper-popup .no-post-my-form{
262 display: none;
263 }
264 #grid-form .cf7sg-collapsible-title label {
265 padding-left: 4px;
266 }
267 #grid-form .row-selected .row-controls{
268 background-color: #0055d4;
269 }
270 #grid-form .row-controls .dashicons{
271 color: #ddd;
272 }
273 .dashicons.dashicons-plus.row-control::before, .dashicons.dashicons-plus.form-control::before {
274 position: relative;
275 top: 1px;
276 }
277 #grid-form .grid-column .dashicons-move {
278 margin-left: calc(50% - 65px);
279 }
280 #grid-form .columns.one .grid-column .dashicons-move {
281 margin-left: 0;
282 }
283 #grid-form .grid-column .icon-code.column-control {
284 float: right;
285 margin-right: 5px;
286 }
287 .icon-code{
288 background: url('image/code-sprite.png') 0px 0px;
289 width: 20px;
290 height: 15px;
291 background-repeat: no-repeat;
292 background-size: auto 20px;
293 display:inline-block;
294 }
295 #grid-form .grid-column .icon-code.column-control:hover {
296 background-position: -20px 0px;
297 cursor: pointer;
298 }
299 /*limit inner tables/tabs within tables/tabs */
300 #grid-form .container.cf7-sg-table .container .row-controls span.dashicons-edit,
301 #grid-form .container.cf7-sg-tabs-panel .row .row label.tabs-row-label {
302 display: none !important;
303 }
304 #grid-form .row-controls .dashicons {
305 margin-top: 3px;
306 }
307 #grid-form .row > div:nth-last-child(2) > .grid-column .dashicons-trash.column-control {
308 display: none;
309 }
310 #grid-form .row .columns + .columns > .grid-column .dashicons-trash.column-control {
311 display: inline-block;
312 }
313 #grid-form > .container > .row:first-child > .columns:first-child .dashicons-move.column-control {
314 margin-left: calc(50% - 45px);
315 }
316 #grid-form > .container:first-child >.row:first-child > .row-controls .dashicons-trash,
317 #grid-form > .cf7sg-external-form:first-child > .form-controls .dashicons-trash {
318 visibility:hidden;
319 }
320 .CodeMirror-wrap .cm-shortcode {
321 color: blue;
322 }
323 .CodeMirror-wrap.cm-s-paraiso-light span.cm-string {
324 color: #fea218;
325 }
326 .disable-button{
327 text-decoration: none;
328 padding: 0 10px 1px;
329 color: #9b9b9b;
330 border: solid 1px #ccc;
331 background-color: #ccc;
332 height: 28px;
333 line-height: 26px;
334 vertical-align: top;
335 display: inline-block;
336 border-radius: 3px;
337 font-size: 13px;
338 margin: 0;
339 box-sizing: border-box;
340 white-space: nowrap;
341 }
342 .disable-button:hover {
343 color: #939393;
344 cursor: unset;
345 }
346 .disable-button.button:hover {
347 cursor: pointer;
348 color:inherit;
349 }
350 #top-grid-controls {
351 padding-top: 2px;
352 }
353 #grid-form > .container {
354 max-width: 100%;
355 }
356 .button.make-grid, .button.external-form {
357 width: 100%;
358 text-align: center;
359 margin-top: 5px;
360 }
361 #form-editor-tabs > ul li > a {
362 padding: 3px 8px;
363 display: block;
364 color: inherit;
365 text-decoration: none;
366 }
367 div#form-editor-tabs > ul.ui-tabs-nav li {
368 padding: 0;
369 }
370 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active a:hover {
371 cursor: default;
372 }
373 .columns .row-controls .table-row-label,
374 .columns .row-controls .tabs-row-label,
375 .container.cf7-sg-table + .container > .row .row-controls .footer-row-label{
376 display: inline-block;
377 }
378 #grid-form ul.cf7-sg-tabs-list{
379 margin: 0;
380 }
381 #grid-form ul.cf7-sg-tabs-list li{
382 display: inline-block;
383 background-color: #d7d7d7;
384 padding: 2px 2px 0 5px;
385 margin-bottom: -5px;
386 border-top-right-radius: 3px;
387 margin-top: 2px;
388 border-bottom-right-radius: 0px;
389 }
390 #grid-form input:disabled:hover, #grid-form .grid-controls label:hover {
391 cursor: default;
392 }
393 #grid-form .container.cf7-sg-tabs-panel, #grid-form .container.cf7sg-collapsible {
394 border: solid 2px #009cff;
395 }
396 #grid-form ul.cf7-sg-tabs-list li {
397 border-top: solid 2px #009cff;
398 border-left: solid 2px #009cff;
399 border-right: solid 2px #009cff;
400 }
401 #grid-form .two .grid-column .dashicons-move {
402 margin-left: -2px;
403 }
404 #grid-form .cf7-field-inner input,
405 #grid-form .cf7-field-inner textarea,
406 #grid-form .cf7-field-inner span.dashicons {
407 display: none;
408 }
409 #grid-form .cf7-field-inner span.dashicons {
410 position:absolute;
411 margin-top: 2px;
412 background: #a5a5a5;
413 padding: 3px 0 0px 0;
414 top: 0;
415 right: 0;
416 }
417 #grid-form .cf7-field-inner {
418 padding: 0px 10px;
419 background: #ededed;
420 margin: 0;
421 position: relative;
422 }
423 #grid-form .cf7-field-tip .content {
424 font-size: 90%;
425 color: #727272;
426 font-style: italic;
427 text-overflow: ellipsis;
428 overflow: hidden;
429 white-space: nowrap;
430 }
431 #grid-form .cf7-field-type .content {
432 border: solid 1px;
433 width: 100%;
434 display: block;
435 padding: 3px 0px 3px 3px;
436 border-radius: 2px;
437 text-align: center;
438 color: #999;
439 text-overflow: ellipsis;
440 overflow: hidden;
441 white-space: nowrap;
442 }
443 #grid-form p.content:hover {
444 cursor: pointer;
445 color: blue;
446 }
447 #grid-form .cf7-field-inner input,
448 #grid-form .cf7-field-inner textarea {
449 width: calc(100% - 10px);
450 }
451 #grid-form .cf7-field-type.textarea p.content {
452 padding: 35px 0;
453 }
454 #grid-form .cf7-field-inner p {
455 margin: 0;
456 min-height: 20px;
457 }
458 #grid-form .grid-column.submit-field .cf7-field-label,
459 #grid-form .grid-column.submit-field .cf7-field-tip {
460 display: none;
461 }
462 #grid-form .cf7-field-type.select .content::after,
463 #grid-form .cf7-field-type.dynamic-select .content::after {
464 content: '\25BC';
465 position: absolute;
466 right: 13px;
467 font-size: 2em;
468 line-height: 1px;
469 top: 12px;
470 }
471 #grid-form .cf7-field-type.radio .content::after {
472 content: '\25c9';
473 position: absolute;
474 left: 23px;
475 font-size: 1.3em;
476 line-height: 1px;
477 top: 12px;
478 }
479 #grid-form .cf7-field-type.checkbox .content::after {
480 content: '\25a1';
481 position: absolute;
482 left: 23px;
483 font-size: 1.3em;
484 line-height: 1px;
485 top: 12px;
486 }
487 .row-controls .dashicons-move.row-control, .row-controls .dashicons-move.form-control{
488 visibility: hidden;
489 }
490 .container + .container > .row > .row-controls .dashicons-move,
491 .container + .cf7sg-external-form > .form-controls .dashicons-move,
492 .cf7sg-external-form + .container > .row > .row-controls .dashicons-move {
493 visibility: visible;
494 }
495 .cf7sg-warning {
496 position: absolute;
497 display: block;
498 top: 0;
499 right: 50px;
500 background: white;
501 padding: 10px 20px;
502 border: 2px solid grey;
503 border-radius: 3px;
504 font-size: 1.2em;
505 margin-top: 50px;
506 }
507 [data-search="li.cf7sg-tag-all,li.cf7sg-tag-dynamic_select,li.cf7sg-tag-dynamic_select-filter"] + .helper-popup {
508 min-width: 300px;
509 }
510