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
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.5, at public/css/cf7-grid-layout-public.css

384 lines 10.3 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 /*------ style rules -----*/
6 /* .cf7sg-container .ui-widget-content .ui-state-default{
7 background: rgb(252,252,252);
8 background: -moz-linear-gradient(top, rgba(252, 252, 252, 0.33) 0%,rgba(219, 219, 219, 0.61) 50%,rgba(209, 209, 209, 0.61) 51%,rgba(254, 254, 254, 0.33) 100%);
9 background: -webkit-linear-gradient(top, rgba(252, 252, 252, 0.33) 0%,rgba(219, 219, 219, 0.61) 50%,rgba(209, 209, 209, 0.61) 51%,rgba(254, 254, 254, 0.33) 100%);
10 background: linear-gradient(to bottom, rgba(252, 252, 252, 0.33) 0%,rgba(219, 219, 219, 0.61) 50%,rgba(209, 209, 209, 0.61) 51%,rgba(254, 254, 254, 0.33) 100%);
11 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fefefe',GradientType=0 );
12 }*/
13 .cf7sg-container .ui-widget-content,
14 .cf7sg-container .ui-widget-content .ui-state-active,
15 .cf7sg-container .toggle-light .toggle-off,
16 .cf7sg-container .ui-widget-content .ui-state-default,
17 .cf7sg-container .ui-tabs-active .ui-tabs-anchor,
18 .cf7sg-container .ui-widget-header {
19 background: transparent;
20 }
21 .cf7sg-container { line-height: 1.2;}
22 .cf7sg-container a.ui-button {
23 color: inherit;
24 }
25 .cf7sg-container .cf7sg-add-tab .ui-state-default {
26 border: solid 1px #aaa;
27 }
28 .cf7sg-container .ui-tabs-anchor{ background: #aaa5}
29 .cf7sg-slider-section .glider{overflow-x: hidden;padding-bottom:10px}
30 .cf7sg-container .ui-widget{ font: inherit; font-size:inherit}
31 .cf7sg-slider-section .slider-control.slider-prev{float:left}
32 .cf7sg-slider-section .slider-control.slider-next{float:right}
33 .cf7sg-slide-active{z-index: 100;}
34 .cf7sg-slider-section .slider-control:hover{cursor: pointer;}
35 .glider-slide > .cf7sg-collapsible-title {margin-bottom: 10px;}
36 .cf7sg-container .cf7-smart-grid.has-grid .columns .container.glider-slide{padding:0 25px 0 10px}
37 .cf7sg-container .slider-control {margin-top: 10px}
38 .cf7-smart-grid.has-grid .cf7sg-slider-section > input.wpcf7-submit {float: right;width: auto}
39
40 .cf7-smart-grid.has-grid .ui-button {
41 border-radius: 3px;
42 border: 1px solid #aaa;
43 padding: 8px 12px;
44 }
45 .cf7-sg-table-button.disabled .ui-button {
46 color: gray;
47 cursor: not-allowed;
48 text-decoration-line: none;
49 }
50 ul.cf7-sg-tabs-list li .dashicons.dashicons-no-alt {
51 border-left: solid 1px grey;
52 border-bottom: solid 1px grey;
53 border-bottom-left-radius: 14px;
54 border-top-left-radius: 5px;
55 border-bottom-right-radius: 5px;
56 }
57 .row.cf7-sg-table .row-control {
58 border: solid 1px #b9b9b9;
59 border-left: none;
60 }
61 .container.cf7sg-collapsible + .container > .row:first-child > .columns.full > .container.cf7-sg-table {
62 margin-top: 10px;
63 }
64 .container.cf7sg-collapsible>.ui-accordion .ui-accordion-content{
65 padding: 0.5em 1em;
66 }
67 .row.cf7-sg-table .row-control .dashicons {
68 background-color: white;
69 border-radius: 50%;
70 border: solid 1px #b9b9b9;
71 color: #848484;
72 }
73 .cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
74 background: #e9e9e9;
75 border-radius: 3px;
76 }
77 span.cf7sg-validation-warning {
78 font-size: 80%;
79 color: #626262;
80 border-radius: 3px;
81 border: solid 1px #656565;
82 background: #f2f2f2;
83 }
84 .cf7sg-validation-warning .confirm-button {
85 background: white;
86 border: #989898 solid 2px;
87 border-radius: 5px;
88 color: #8f0000;
89 text-transform: uppercase;
90 font-size: 0.9em;
91 }
92 .cf7-smart-grid.has-grid .field > label em {
93 color: red;
94 }
95 .cf7-smart-grid.has-grid .info-tip {
96 font-size: 80%;
97 font-style: italic;
98 color: grey;
99 margin: 0 0 5px 0;
100 }
101 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
102 border-radius: 3px;
103 }
104 .cf7-smart-grid.has-grid .wpcf7-submit {
105 background: #383838;
106 border: solid 1px #383838;
107 border-radius: 3px;
108 font-size: 110%;
109 font-weight: bold;
110 color: white;
111 }
112 .cf7sg-collapsible .ui-state-default {
113 background: transparent;
114 }
115 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection--single .select2-selection__rendered {
116 font-size: 0.9em;
117 }
118 .cf7-smart-grid.has-grid .select2-results__option {
119 font-size: 0.8em;
120 }
121 .cf7-smart-grid.has-grid .wpcf7-save {
122 background: transparent;
123 color: #383838;
124 }
125 .cf7sg-collapsible .toggle-light .toggle-on,
126 .cf7sg-collapsible .toggle-light .toggle-off {
127 font-size: 0.75em;
128 }
129 span.cf7sg-popup {
130 background: rgba(227, 227, 227, 0.81);
131 font-size: 1.2em;
132 border-radius: 3px;
133 }
134 /*------ layout rules ----*/
135 .sy-slide > .cf7sg-collapsible-title {
136 margin-bottom: 10px;
137 }
138 .cf7sg-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
139 padding: .2em 1em;
140 }
141 .cf7sg-slide-filler .ajax-loader {
142 float: right;
143 }
144 .cf7-smart-grid.has-grid input.select2-search__field {
145 min-width: 1.3em;
146 }
147 .cf7-sg-table-button .max-limit.wpcf7-not-valid-tip {
148 display: inline;
149 margin-right: 30px;
150 }
151 ul.cf7-sg-tabs-list li .dashicons.dashicons-no-alt {
152 position: absolute;
153 right: 0;
154 }
155 .cf7sg-add-tab.ui-tabs-nav .ui-tabs-anchor {
156 padding: .2em 1em;
157 }
158 .ui-tabs .cf7-sg-tabs-list.ui-tabs-nav .ui-tabs-anchor {
159 padding: .2em 20px;
160 }
161 ul.cf7-sg-tabs-list li {
162 position: relative;
163 }
164 .cf7-sg-tabs.ui-tabs ul.ui-tabs-nav li a:hover,
165 .cf7-sg-tabs.ui-tabs ul.ui-tabs-nav li .dashicons-no-alt:hover {
166 cursor: pointer;
167 }
168 .cf7-smart-grid .dashicons{
169 vertical-align: middle;
170 }
171 .ui-tabs .cf7sg-add-tab.ui-tabs-nav {
172 display: inline-block;
173 padding-left: 0;
174 }
175 ul.cf7-sg-tabs-list {
176 display: inline-block;
177 }
178 .cf7-smart-grid .cf7-sg-table-button {
179 text-align: right;
180 margin-top: 10px;
181 margin-bottom: 5px;
182 }
183 .cf7-smart-grid .row.cf7-sg-table-footer {
184 margin-top: 5px;
185 }
186 .cf7-smart-grid .row.cf7-sg-table {
187 margin-top: 3px;
188 }
189 .cf7-smart-grid .row.cf7-sg-table-footer+.cf7-sg-table-button {
190 margin-top: 0;
191 }
192 .row.cf7-sg-table-layout .columns input:not([type="submit"]){
193 width:100%;
194 }
195 .row.cf7-sg-table {
196 position:relative;
197 }
198 .row.cf7-sg-table .row-control .dashicons:hover {
199 cursor: pointer;
200 }
201 .row.cf7-sg-table .row-control {
202 position: absolute;
203 height: 100%;
204 top: 0;
205 right: 0;
206 margin-right: -15px;
207 width: 5px;
208 display:none;
209 }
210 .row.cf7-sg-table:nth-last-child(2) .row-control:not(.display-none) {
211 display: inline;
212 }
213 .row.cf7-sg-table .row-control .dashicons {
214 position: absolute;
215 top: 50%;
216 margin-top: -10px;
217 margin-left: -5px;
218 }
219 .cf7-smart-grid.has-grid div.field span.wpcf7-not-valid-tip {
220 display: inherit;
221 position: absolute;
222 left: 0;
223 top: 115%;
224 padding: 3px 10px;
225 min-width: 195px;
226 line-height: 1.2em;
227 z-index: 7777;
228 }
229 span.cf7sg-validation-warning {
230 display: block;
231 position: absolute;
232 right: 50%;
233 top: 25px;
234 width: 140px;
235 height: auto;
236 margin-right: -70px;
237 z-index:999;
238 padding: 2px 3px;
239 }
240 .cf7sg-validation-warning .confirm-button {
241 position: absolute;
242 bottom: -13px;
243 right: -19px;
244 padding: 1px 5px;
245 cursor:pointer;
246 }
247 .cf7-smart-grid.has-grid input.select2-search__field{
248 background-image: url('search.png');
249 background-repeat: no-repeat;
250 background-position-x: calc(100% - 5px);
251 background-position-y: 50%;
252 }
253 .cf7sg-collapsible .row.ui-accordion-content {
254 min-height: 120px;
255 overflow: unset;
256 }
257 .cf7-smart-grid.has-grid .field {
258 width: 100%;
259 }
260 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
261 width: 100%;
262 }
263 .cf7-smart-grid.has-grid .select2 {
264 width: 100% !important;
265 }
266 .cf7-smart-grid.has-grid .field .wpcf7-form-control-wrap{
267 display: inline-block;
268 width: 100%;
269 }
270 .cf7-smart-grid.has-grid .cf7-tags-2 .field .wpcf7-form-control-wrap {
271 max-width: 200px;
272 width: 50%;
273 }
274 .cf7sg-container .cf7-smart-grid.has-grid .row.cf7-sg-table > .columns > .container > .container,
275 .cf7sg-container .cf7-smart-grid.has-grid .columns .container {
276 padding: 0;
277 }
278 .cf7-smart-grid.has-grid .field .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
279 vertical-align: middle;
280 }
281 .cf7-smart-grid.has-grid .field > label {
282 display: block;
283 margin-bottom: 0;
284 }
285 .cf7-smart-grid.has-grid .wpcf7-form-control:not(img) {
286 min-height: 34px;
287 }
288 .cf7-smart-grid.has-grid .wpcf7-form-control.nice-select {
289 line-height: 32px;
290 height: 34px;
291 }
292 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection__arrow {
293 min-height: 34px;
294 }
295 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection--single .select2-selection__rendered {
296 line-height: 34px;
297 }
298 .cf7-smart-grid.has-grid .wpcf7-form-control-wrap .select2-selection.select2-selection--single {
299 min-height: 34px;
300 }
301 .cf7-smart-grid.has-grid .wpcf7-form-control.wpcf7-radio,
302 .cf7-smart-grid.has-grid .wpcf7-form-control.wpcf7-checkbox {
303 display: inline-block;
304 }
305 .cf7sg-collapsible.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
306 right: .5em;
307 left: unset;
308 }
309 .cf7sg-collapsible .toggle {
310 display: inline-block;
311 vertical-align: middle;
312 float: right;
313 }
314 .cf7sg-collapsible .toggle .toggle-inner {
315 height: auto;
316 }
317
318 .cf7sg-collapsible .cf7sg-title+.toggle {
319 float: none;
320 position: absolute;
321 right: 6px;
322 top: 50%;
323 margin-top: -10px;
324 }
325 .cf7sg-title.toggled {
326 max-width: calc(100% - 60px);
327 display: inline-block;
328 vertical-align: middle;
329 }
330 /*smomehow the icon accordion have a larger left padding*/
331 .ui-accordion .ui-accordion-icons {
332 padding-left: .7em;
333 }
334 .cf7sg-external-form {
335 margin-bottom: 5px;
336 }
337 .cf7sg-container .cf7-smart-grid.has-grid .container {
338 margin-bottom: 5px;
339 }
340 .cf7sg-container .cf7-smart-grid.has-grid .container:last-child {
341 margin-bottom: 0;
342 }
343 .cf7-smart-grid.has-grid .nice-select ul.list {
344 max-height: 300px;
345 overflow-y: auto;
346 }
347 a.cf7sg-button {
348 min-height: 34px;
349 padding: 5px 0px;
350 display: inline-block;
351 width: 100%;
352 text-align: center;
353 }
354 .cf7sg-popup{
355 position: relative;
356 }
357 .display-none{display: none;}
358 span.cf7sg-popup {
359 bottom: -1.2em;
360 max-height: 200px;
361 left: 0;
362 position: absolute;
363 transition: 500ms ease;
364 padding: .4em;
365 white-space: nowrap;
366 }
367 .wpcf7-form-control.wpcf7-submit:disabled:hover+span.cf7sg-popup {display: block;}
368 a.cf7sg-button {
369 background: #383838;
370 color: white;
371 border: solid 1px #383838;
372 border-radius: 3px;
373 font-weight: bold;
374 font-size: 110%;
375 }
376 @media (max-width: 480px) {
377 .cf7sg-container .cf7-smart-grid.has-grid .wpcf7[dir="rtl"] .row {
378 transform: rotate(180deg);
379 }
380 .cf7sg-container .cf7-smart-grid.has-grid .wpcf7[dir="rtl"] .columns {
381 transform: rotate(-180deg);
382 }
383 }
384