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

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