PluginProbe
Smart Grid-Layout Design for Contact Form 7 / 4.5
Smart Grid-Layout Design for Contact Form 7 v4.5
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
← All changes | admin/css/cf7-grid-layout-post.css +173 -26 3.3.84.5 View file →
@@ -1,4 +1,110 @@
1 +#editors, #contact-form-editor {position: relative;}
2 +#optional-editors {
3 + display: inline-block;
4 + position: absolute;
5 + margin-top: 8px;
6 + z-index:2;
7 +}
8 +*[dir="rtl"] #optional-editors {left: 0}
9 +.codemirror-theme label:hover {
10 + font-weight: bold;
11 +}
12 +.codemirror-theme label {
13 + z-index: 10;
14 + position: relative;
15 +}
16 +#contact-form-editor .loading-screen{position:absolute;z-index: 100; padding: 100px 5px 850px 5px; width: calc(100% - 10px); background-color: white; text-align: center}
17 +#contact-form-editor .loading-screen h2{font-size: 20px}
18 +#contact-form-editor .loading-screen .spinner{visibility: visible; float:none}
19 +#contact-form-editor .loading-screen .js-error p {text-align: left;font-size: 15px}
20 +#contact-form-editor .loading-screen .error {color: #b90101}
21 +#optional-editors a.button {font-weight: bold;}
22 +#js-tags > li.show-events:not(#last-item) {
23 + display: inline-block;
24 + vertical-align: top;
25 + border: solid 2px #007cba;
26 + background: white;
27 + padding: 5px 8px;
28 + border-radius: 3px;
29 +}
30 +#last-item {
31 + display: inline-block;
32 + margin-top: 5px;
33 + margin-left: 3px;
34 +}
35 +#js-tags > li:hover > span {
36 + transform: rotate(90deg);
37 + display: inline-block;
38 +}
39 +#js-tags > li > span {
40 + font-weight:bold;
41 + transition: 0.2s ease-out;
42 + padding: 0 5px;
43 +}
44 +#js-tags > li > ul {display: none;}
45 +#js-tags > li > ul>li {margin:0;}
46 +#js-tags > li:hover > ul {
47 + display: block;
48 + position: absolute;
49 + background: white;
50 + padding: 5px 8px;
51 + border: solid 1px;
52 + border-radius: 3px;
53 + z-index: 100;
54 +}
55 +#js-tags > li:hover > ul > li:hover{position: relative}
56 +#js-tags > li:hover > ul > li:hover > span > span{
57 + display:block;
58 + position: absolute;
59 + background: white;
60 + padding: 5px 8px;
61 + border: solid 1px;
62 + border-radius: 3px;
63 + z-index: 20;
64 + width: 225px;
65 + left: 4px;
66 + top: -3px;
67 + font-style: italic;
68 +}
69 +
70 +/* @since 4.4 .cf7sg-slider-section .cf7sg-collapsible .collapsible-row-label,
71 +.cf7sg-accordion-rows .cf7sg-collapsible .collapsible-row-label, */
72 +.columns.cf7sg-slider-section, .columns.cf7sg-accordion-rows {box-shadow: 0 0 6px #6a0080;}
73 +.columns:not(.full) + .row-controls .grid-controls .make-grid{display:inline-block;}
74 +.columns.full > .container:not(.cf7sg-collapsible) > .row:not(.cf7-sg-table) > .columns:not(.full) + .row-controls .grid-controls .make-grid,
75 +.button.make-grid.display-none,
76 +.display-none, #js-tags > li.display-none:not(.show-events) {display: none;}
77 +.enable-grouping.grid-column > .grid-controls .grouping-option {
78 + display: inline-block;
79 +}
80 +.codemirror-theme {
81 + position: absolute;
82 + top: -26px;
83 + padding: 2px 0 2px 5px;
84 + background: #eae9e9;
85 + width: calc( 100% - 313px);
86 +}
87 +.codemirror-theme span.file {
88 + margin-left: 10px;
89 + vertical-align: middle;
90 + background: #f7ecb1;
91 + padding: 4px 8px;
92 + color: black;
93 + max-width: calc( 100% - 216px );
94 + display: inline-block;
95 + overflow-x: hidden;
96 + height: 20px;
97 +}
98 +#cf7-codemirror,#cf7-js-codemirror,#cf7-css-codemirror {position: relative;}
99 +label.accordion-label:hover + span.popup{display: inline;
100 +position: absolute;
101 +background: white;
102 +margin-left: 6px;
103 +width: 200px;
104 +border: solid 1px gray;
105 +border-radius: 3px;
106 +padding: 1px 5px;}
1 107 #grid-form .js-help + .cf7sg-helper-list{margin-top:39px;}
2 108 span.js-icon.column-control{
3 109 background-image: url('./image/js-sprite.png');
4 110 width: 13px;
@@ -36,24 +142,34 @@
36 142 #full-screen-cf7 {
37 143 position: absolute;
38 144 top: -39px;
39 145 left: 160px;
146 + z-index: 100;
40 147 }
41 148 #full-screen-cf7.full-screen {
42 - position: absolute;
43 - top: auto;
44 - left: auto;
45 - right: 0;
46 - bottom: -58px;
149 + position: absolute;
150 + top: auto;
151 + left: auto;
152 + right: 0;
153 + bottom: -58px;
47 154 }
155 +*[dir="rtl"] #full-screen-cf7.full-screen {
156 + right: auto;
157 + left: 0;
158 +}
48 159 #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 - }
160 + top: 5px;
161 + z-index: 10;
162 + position: fixed;
163 + overflow: auto;
164 + height: 100%;
165 + margin-left: -15px;
166 + right:0;
167 + width: calc( 100% - 170px);
168 +}
169 +.folded #cf7sg-editor.full-screen{
170 + width: calc( 100% - 46px);
171 +}
56 172 #form-editor-tabs ul.ui-tabs-nav {
57 173 border-bottom: 1px solid #ddd;
58 174 padding: 7px 0px 0 3px;
59 175 margin: 0;
@@ -58,8 +174,10 @@
58 174 padding: 7px 0px 0 3px;
59 175 margin: 0;
60 176 min-width: 100%;
61 177 text-align: right;
178 + z-index: 1;
179 + position: relative;
62 180 }
63 181 #form-editor-tabs ul li.ui-state-disabled:first-child {
64 182 display: none;
65 183 }
@@ -71,9 +189,9 @@
71 189 margin: 0 0px -1px;
72 190 border-top-left-radius: 3px;
73 191 }
74 192 #form-editor-tabs ul.ui-tabs-nav > li.ui-tabs-active {
75 - background: transparent;
193 + background: #f5f5f5;
76 194 border-bottom: none;
77 195 }
78 196 .tagsdiv .tagchecklist > span {
79 197 display: block;
@@ -117,12 +235,26 @@
117 235 #grid-form .cf7sg-external-form-content,
118 236 #grid-form .table-row-button {
119 237 display: none;
120 238 }
239 +/* footer table special styling */
121 240 #grid-form .row.cf7-sg-table .row-controls label.table-row-button {
122 241 display: block;
123 242 text-align: center;
124 243 }
244 +#grid-form .cf7-sg-table-footer .row {
245 + min-height: 66px;
246 +}
247 +.cf7-sg-table-footer .cf7-field-label.cf7-field-inner,
248 +.cf7-sg-table-footer .cf7-field-type.cf7-field-inner,
249 +.cf7-sg-table-footer .dashicons-move.row-control,
250 +.cf7-sg-table-footer .button.make-grid.column-control,
251 +.cf7-sg-table-footer .button.external-form {
252 + display: none;
253 +}
254 +.cf7-sg-table-footer .cf7-field-tip.cf7-field-inner {
255 + height: 42px;
256 +}
125 257 #grid-form .form-select {
126 258 display: block;
127 259 margin: 0 auto;
128 260 }
@@ -151,13 +283,15 @@
151 283 #grid-form .container,
152 284 #grid-form .table-row-button input {
153 285 max-width: 100%;
154 286 }
155 -#cf7-codemirror .CodeMirror {
287 +#cf7-codemirror .CodeMirror,
288 +#cf7-js-codemirror .CodeMirror,
289 +#cf7-css-codemirror .CodeMirror {
156 290 height: calc( 100vh - 180px);
157 291 }
158 292 #grid-form .row.cf7-sg-table {
159 - box-shadow: 0px 0px 4px #0093ff;
293 + box-shadow: 0px 0px 4px #920a03;
160 294 }
161 295 #grid-form .grid-column {
162 296 background-color: #ddd;
163 297 }
@@ -316,14 +450,18 @@
316 450 #grid-form > .container:first-child >.row:first-child > .row-controls .dashicons-trash,
317 451 #grid-form > .cf7sg-external-form:first-child > .form-controls .dashicons-trash {
318 452 visibility:hidden;
319 453 }
320 -.CodeMirror-wrap .cm-shortcode {
321 - color: blue;
322 -}
323 -.CodeMirror-wrap.cm-s-paraiso-light span.cm-string {
324 - color: #fea218;
325 -}
454 +
455 +.CodeMirror-wrap.cm-s-material-ocean .cm-shortcode {color: #4496ff;}
456 +.CodeMirror-wrap.cm-s-paraiso-light .cm-shortcode {color: blue;}
457 +.CodeMirror-wrap.cm-s-paraiso-light span.cm-string {color: #937c01;}
458 +.CodeMirror-wrap.cm-s-paraiso-light span.cm-tag {color: #b70b0b;}
459 +.CodeMirror-wrap.cm-s-material-ocean .cm-cf7sg-attr {color: #d300ff;}
460 +.CodeMirror-wrap.cm-s-material-ocean .cm-cf7sg-attr + .cm-string {color: #00f900;}
461 +.CodeMirror-wrap.cm-s-paraiso-light .cm-cf7sg-attr {color: #228f85;}
462 +.CodeMirror-wrap.cm-s-paraiso-light .cm-cf7sg-attr + .cm-string {color: #f124ee;}
463 +
326 464 .disable-button{
327 465 text-decoration: none;
328 466 padding: 0 10px 1px;
329 467 color: #9b9b9b;
@@ -357,13 +495,21 @@
357 495 width: 100%;
358 496 text-align: center;
359 497 margin-top: 5px;
360 498 }
499 +#form-editor-tabs > ul li.ui-tabs-active > a {
500 + color:inherit;
501 + background-color: inherit;
502 +}
361 503 #form-editor-tabs > ul li > a {
362 - padding: 3px 8px;
363 - display: block;
364 - color: inherit;
365 - text-decoration: none;
504 + padding: 1px 8px;
505 + display: block;
506 + text-decoration: none;
507 + min-width: 75px;
508 + text-align: center;
509 + background-color: #818a99;
510 + color: white;
511 + min-height: 25px;
366 512 }
367 513 div#form-editor-tabs > ul.ui-tabs-nav li {
368 514 padding: 0;
369 515 }
@@ -463,9 +609,9 @@
463 609 #grid-form .cf7-field-type.dynamic-select .content::after {
464 610 content: '\25BC';
465 611 position: absolute;
466 612 right: 13px;
467 - font-size: 2em;
613 + font-size: 1.1em;
468 614 line-height: 1px;
469 615 top: 12px;
470 616 }
471 617 #grid-form .cf7-field-type.radio .content::after {
@@ -506,4 +652,5 @@
506 652 }
507 653 [data-search="li.cf7sg-tag-all,li.cf7sg-tag-dynamic_select,li.cf7sg-tag-dynamic_select-filter"] + .helper-popup {
508 654 min-width: 300px;
509 655 }
656 +body.disable-scroll{overflow:hidden;}