PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / trunk
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More vtrunk
6.35 6.34 6.33.1 6.33 6.32.1 6.32 6.31 6.25 6.25.1 6.26 6.26.1 6.27 6.28 6.29 6.3 6.3.1 6.3.2 6.30 6.4 6.4.1 6.4.2 6.5 6.5.1 6.5.2 6.5.3 All 141 releases
← All changes | css/frm_grids.css +104 -99 6.4.2 → trunk View file →
@@ -1,8 +1,6 @@
1 1 .frm_screen_reader {
2 2 border: 0;
3 - clip: rect(1px, 1px, 1px, 1px);
4 - -webkit-clip-path: inset(50%);
5 3 clip-path: inset(50%);
6 4 height: 1px;
7 5 margin: -1px;
8 6 overflow: hidden;
@@ -10,38 +8,34 @@
10 8 position: absolute;
11 9 width: 1px;
12 10 word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
13 11 }
14 -.frm_screen_reader.frm_hidden{
15 - display:initial;
16 -}
17 12
18 -.frm_verify{
19 - position:absolute;
20 - left:-3000px;
13 +.frm_screen_reader.frm_hidden {
14 + display: initial;
21 15 }
22 16
23 -.frm_clear_none{
24 - clear:none;
17 +.frm_clear_none {
18 + clear: none;
25 19 }
26 20
27 -.frm_clear{
28 - clear:both;
21 +.frm_clear {
22 + clear: both;
29 23 }
30 24
31 -.frm_form_field.frm_alignright{
32 - float:right !important;
25 +.frm_form_field.frm_alignright {
26 + float: right !important;
33 27 }
34 28
35 -.with_frm_style .frm_form_field{
36 - clear:both;
29 +.with_frm_style .frm_form_field {
30 + clear: both;
37 31 }
38 32
39 33 .frm_combo_inputs_container,
40 34 .frm_grid_container,
41 35 .frm_form_fields .frm_section_heading,
42 -.frm_form_fields .frm_fields_container{
43 - display:grid;
36 +.frm_form_fields .frm_fields_container {
37 + display: grid;
44 38 grid-template-columns: repeat(12, 1fr);
45 39 grid-auto-rows: max-content;
46 40 grid-gap: 0 2%;
47 41 }
@@ -49,9 +43,9 @@
49 43 .frm_combo_inputs_container > *,
50 44 .frm_grid_container > *,
51 45 .frm_section_heading > *,
52 46 .frm_fields_container .frm_form_field,
53 -.frm_fields_container > *{
47 +.frm_fields_container > * {
54 48 grid-column: span 12 / span 12;
55 49 }
56 50
57 51 .frm_inline,
@@ -59,10 +53,10 @@
59 53 .frm_form_field.frm_first_inline,
60 54 .frm_form_field.frm_inline,
61 55 .frm_submit.frm_inline,
62 56 .frm_form_field.frm_right_inline,
63 -.frm_form_field.frm_last_inline{
64 - width:auto;
57 +.frm_form_field.frm_last_inline {
58 + width: auto;
65 59 grid-column: span 2 / span 2;
66 60 }
67 61
68 62 .frm6,
@@ -74,10 +68,10 @@
74 68 .frm_form_field.frm_right_half,
75 69 .frm_form_field.frm_first_half,
76 70 .frm_form_field.frm_last_half,
77 71 .frm_form_field.frm_half,
78 -.frm_submit.frm_half{
79 - grid-column:span 6 / span 6;
72 +.frm_submit.frm_half {
73 + grid-column: span 6 / span 6;
80 74 }
81 75
82 76 .frm4,
83 77 .frm_third,
@@ -88,10 +82,10 @@
88 82 .frm_form_field.frm_third,
89 83 .frm_submit.frm_third,
90 84 .frm_form_field.frm_right_third,
91 85 .frm_form_field.frm_first_third,
92 -.frm_form_field.frm_last_third{
93 - grid-column:span 4 / span 4;
86 +.frm_form_field.frm_last_third {
87 + grid-column: span 4 / span 4;
94 88 }
95 89
96 90 .frm8,
97 91 .frm_two_thirds,
@@ -100,10 +94,10 @@
100 94 .frm_form_field.frm_left_two_thirds,
101 95 .frm_form_field.frm_right_two_thirds,
102 96 .frm_form_field.frm_first_two_thirds,
103 97 .frm_form_field.frm_last_two_thirds,
104 -.frm_form_field.frm_two_thirds{
105 - grid-column: span 8/span 8;
98 +.frm_form_field.frm_two_thirds {
99 + grid-column: span 8/span 8;
106 100 }
107 101
108 102 .frm3,
109 103 .frm_fourth,
@@ -113,10 +107,10 @@
113 107 .frm_form_field.frm_fourth,
114 108 .frm_submit.frm_fourth,
115 109 .frm_form_field.frm_right_fourth,
116 110 .frm_form_field.frm_first_fourth,
117 -.frm_form_field.frm_last_fourth{
118 - grid-column: span 3/span 3;
111 +.frm_form_field.frm_last_fourth {
112 + grid-column: span 3/span 3;
119 113 }
120 114
121 115 .frm9,
122 116 .frm_three_fourths,
@@ -122,9 +116,9 @@
122 116 .frm_three_fourths,
123 117 .frm_form_field.frm_four_fifths, /* 5ths deprecated */
124 118 .frm_form_field.frm9,
125 119 .frm_submit.frm9,
126 -.frm_form_field.frm_three_fourths{
120 +.frm_form_field.frm_three_fourths {
127 121 grid-column: span 9/span 9;
128 122 }
129 123
130 124 /* fifths are deprecated */
@@ -132,10 +126,10 @@
132 126 .frm_form_field.frm_fifth,
133 127 .frm_submit.frm_fifth,
134 128 .frm_form_field.frm_right_fifth,
135 129 .frm_form_field.frm_first_fifth,
136 -.frm_form_field.frm_last_fifth{
137 - grid-column: span 2/span 2;
130 +.frm_form_field.frm_last_fifth {
131 + grid-column: span 2/span 2;
138 132 }
139 133
140 134 .frm2,
141 135 .frm_sixth,
@@ -143,15 +137,15 @@
143 137 .frm_submit.frm2,
144 138 .frm_form_field.frm_sixth,
145 139 .frm_submit.frm_sixth,
146 140 .frm_form_field.frm_first_sixth,
147 -.frm_form_field.frm_last_sixth{
148 - grid-column: span 2/span 2;
141 +.frm_form_field.frm_last_sixth {
142 + grid-column: span 2/span 2;
149 143 }
150 144
151 145 .frm10,
152 146 .frm_form_field.frm10,
153 -.frm_submit.frm10{
147 +.frm_submit.frm10 {
154 148 grid-column: span 10/span 10;
155 149 }
156 150
157 151 .frm1,
@@ -164,27 +158,27 @@
164 158 .frm_form_field.frm_last_seventh
165 159 .frm_form_field.frm_eighth,
166 160 .frm_submit.frm_eighth,
167 161 .frm_form_field.frm_first_eighth,
168 -.frm_form_field.frm_last_eighth{
169 - grid-column: span 1/span 1;
162 +.frm_form_field.frm_last_eighth {
163 + grid-column: span 1/span 1;
170 164 }
171 165
172 166 .frm5,
173 167 .frm_form_field.frm5,
174 -.frm_submit.frm5{
168 +.frm_submit.frm5 {
175 169 grid-column: span 5/span 5;
176 170 }
177 171
178 172 .frm7,
179 173 .frm_form_field.frm7,
180 -.frm_submit.frm7{
174 +.frm_submit.frm7 {
181 175 grid-column: span 7/span 7;
182 176 }
183 177
184 178 .frm11,
185 179 .frm_form_field.frm11,
186 -.frm_submit.frm11{
180 +.frm_submit.frm11 {
187 181 grid-column: span 11/span 11;
188 182 }
189 183
190 184 .frm12,
@@ -189,18 +183,18 @@
189 183
190 184 .frm12,
191 185 .frm_full,
192 186 .frm_full .wp-editor-wrap,
193 -.frm_full > input:not([type='checkbox']):not([type='radio']):not([type='button']),
187 +.frm_full > input:not([type="checkbox"]):not([type="radio"]):not([type="button"]),
194 188 .frm_full select,
195 -.frm_full textarea{
196 - width:100% !important;
189 +.frm_full textarea {
190 + width: 100% !important;
197 191 grid-column: span 12/span 12;
198 192 box-sizing: border-box;
199 193 }
200 194
201 -.frm_full .wp-editor-wrap input{
202 - width:auto !important;
195 +.frm_full .wp-editor-wrap input {
196 + width: auto !important;
203 197 }
204 198
205 199 .frm_first,
206 200 .frm_form_field.frm_left_half,
@@ -217,23 +211,23 @@
217 211 .frm_form_field.frm_first_sixth,
218 212 .frm_form_field.frm_first_seventh,
219 213 .frm_form_field.frm_first_eighth,
220 214 .frm_form_field.frm_first_inline,
221 -.frm_form_field.frm_first{
222 - grid-column-start:1;
215 +.frm_form_field.frm_first {
216 + grid-column-start: 1;
223 217 }
224 218
225 219 .frm_last,
226 220 .frm_form_field.frm_last,
227 -.frm_form_field.frm_alignright{
228 - grid-column-end:-1;
221 +.frm_form_field.frm_alignright {
222 + grid-column-end: -1;
229 223 justify-content: end;
230 224 }
231 225
232 226 /* RTL Grids */
233 227
234 -.with_frm_style.frm_rtl .frm_form_fields .star-rating{
235 - float:right;
228 +.with_frm_style.frm_rtl .frm_form_fields .star-rating {
229 + float: right;
236 230 }
237 231
238 232 .with_frm_style.frm_rtl .frm_grid .frm_primary_label,
239 233 .with_frm_style.frm_rtl .frm_grid_first .frm_primary_label,
@@ -242,11 +236,11 @@
242 236 .with_frm_style.frm_rtl .frm_grid_first .frm_radio,
243 237 .with_frm_style.frm_rtl .frm_grid_odd .frm_radio,
244 238 .with_frm_style.frm_rtl .frm_grid .frm_checkbox,
245 239 .with_frm_style.frm_rtl .frm_grid_first .frm_checkbox,
246 -.with_frm_style.frm_rtl .frm_grid_odd .frm_checkbox{
247 - float:right !important;
248 - margin-right:0 !important;
240 +.with_frm_style.frm_rtl .frm_grid_odd .frm_checkbox {
241 + float: right !important;
242 + margin-right: 0 !important;
249 243 }
250 244
251 245 .with_frm_style.frm_rtl .frm_grid_first .frm_radio label input,
252 246 .with_frm_style.frm_rtl .frm_grid .frm_radio label input,
@@ -252,21 +246,21 @@
252 246 .with_frm_style.frm_rtl .frm_grid .frm_radio label input,
253 247 .with_frm_style.frm_rtl .frm_grid_odd .frm_radio label input,
254 248 .with_frm_style.frm_rtl .frm_grid_first .frm_checkbox label input,
255 249 .with_frm_style.frm_rtl .frm_grid .frm_checkbox label input,
256 -.with_frm_style.frm_rtl .frm_grid_odd .frm_checkbox label input{
257 - float:left;
250 +.with_frm_style.frm_rtl .frm_grid_odd .frm_checkbox label input {
251 + float: left;
258 252 }
259 253
260 254 .with_frm_style.frm_rtl .frm_catlevel_2,
261 255 .with_frm_style.frm_rtl .frm_catlevel_3,
262 256 .with_frm_style.frm_rtl .frm_catlevel_4,
263 -.with_frm_style.frm_rtl .frm_catlevel_5{
264 - margin-right:18px;
257 +.with_frm_style.frm_rtl .frm_catlevel_5 {
258 + margin-right: 18px;
265 259 }
266 260
267 -.with_frm_style.frm_rtl div > .frm_time_select{
268 - margin-right:5px;
261 +.with_frm_style.frm_rtl div > .frm_time_select {
262 + margin-right: 5px;
269 263 }
270 264
271 265 /* Left and right label styling for non-Formidable styling */
272 266
@@ -271,92 +265,103 @@
271 265 /* Left and right label styling for non-Formidable styling */
272 266
273 267 .frm_form_field.frm_inline_container,
274 268 .frm_form_field.frm_right_container,
275 -.frm_form_field.frm_left_container{
276 - display: grid;
277 - grid-template-columns: 25% auto;
278 - width:100%;
269 +.frm_form_field.frm_left_container {
270 + display: grid;
271 + grid-template-columns: 25% auto;
272 + width: 100%;
279 273 grid-auto-rows: min-content;
280 274 }
281 275
282 -.frm_form_field.frm_right_container{
283 - grid-template-columns: auto 25%;
276 +.frm_form_field.frm_right_container {
277 + grid-template-columns: auto 25%;
284 278 }
285 279
286 -.frm_form_field.frm_inline_container{
287 - grid-template-columns: repeat(2, minmax(auto, max-content) );
280 +.frm_form_field.frm_inline_container {
281 + grid-template-columns: repeat(2, minmax(auto, max-content));
288 282 }
289 283
290 284 .frm_form_field.frm_inline_container .frm_primary_label,
291 285 .frm_form_field.frm_right_container .frm_primary_label,
292 -.frm_form_field.frm_left_container .frm_primary_label{
293 - margin-right:10px;
294 - grid-row:span 2/span 2;
295 - padding-top:4px;
286 +.frm_form_field.frm_left_container .frm_primary_label {
287 + margin-right: 10px;
288 + grid-row: span 2/span 2;
289 + padding-top: 4px;
296 290 }
297 291
298 -.frm_form_field.frm_left_container .frm_primary_label{
299 - grid-column:1;
300 - grid-row:span 2/span 2; /* cover a row for the description */
292 +.frm_form_field.frm_left_container .frm_primary_label {
293 + grid-column: 1;
294 + grid-row: span 2/span 2; /* cover a row for the description */
301 295 }
302 296
303 -.frm_form_field.frm_right_container .frm_primary_label{
304 - grid-column:2;
305 - grid-row:1;
306 - margin-right:0;
307 - margin-left:10px;
297 +.frm_form_field.frm_right_container .frm_primary_label {
298 + grid-column: 2;
299 + grid-row: 1;
300 + margin-right: 0;
301 + margin-left: 10px;
308 302 }
309 303
310 304 .frm_form_field.frm_inline_container .frm_description,
311 -.frm_form_field.frm_left_container .frm_description{
312 - grid-column:2;
305 +.frm_form_field.frm_left_container .frm_description {
306 + grid-column: 2;
313 307 }
314 308
315 -.frm_form_field.frm_right_container .frm_description{
316 - grid-column:1;
309 +.frm_form_field.frm_right_container .frm_description {
310 + grid-column: 1;
317 311 }
318 312
319 -.frm_conf_field.frm_left_container{
313 +.frm_conf_field.frm_left_container {
320 314 grid-template-columns: 67%;
321 315 }
322 316
323 -.frm_conf_field.frm_left_container .frm_description{
324 - grid-column:1;
317 +.frm_conf_field.frm_left_container .frm_description {
318 + grid-column: 1;
325 319 }
326 320
327 321 /* End RTL Grids */
328 322
329 323 .frm-fade-in {
330 - -webkit-animation-name: fadeIn;
331 324 animation-name: fadeIn;
332 - -webkit-animation-duration: 1s;
333 325 animation-duration: 1s;
334 - -webkit-animation-fill-mode: both;
335 326 animation-fill-mode: both;
336 327 }
337 328
338 329 @keyframes spin {
339 - 0% { transform: rotate(0deg); }
340 - 100% { transform: rotate(360deg); }
330 +
331 + 0% {
332 + transform: rotate(0deg);
333 + }
334 +
335 + 100% {
336 + transform: rotate(360deg);
337 + }
341 338 }
342 339
343 340 @keyframes fadeIn {
344 - 0% {opacity: 0;}
345 - 100% {opacity: 1;}
341 +
342 + 0% {
343 + opacity: 0;
344 + }
345 +
346 + 100% {
347 + opacity: 1;
348 + }
346 349 }
347 350
348 351 @media only screen and (max-width: 750px) {
349 - .frm_grid_container.frm_no_grid_750 > div{
352 +
353 + .frm_grid_container.frm_no_grid_750 > div {
350 354 grid-column: span 12/span 12;
351 355 }
352 356 }
353 357
354 358 @media only screen and (max-width: 600px) {
359 +
355 360 .frm_section_heading > .frm_form_field,
356 361 .frm_fields_container > .frm_submit,
357 362 .frm_grid_container > .frm_form_field,
358 - .frm_fields_container > .frm_form_field{
363 + .frm_fields_container > .frm_form_field {
359 364 grid-column: 1 / span 12 !important;
360 365 }
361 366
362 367 .frm_grid_container.frm_no_grid_600,
@@ -361,8 +366,8 @@
361 366
362 367 .frm_grid_container.frm_no_grid_600,
363 368 .frm_form_field.frm_inline_container,
364 369 .frm_form_field.frm_right_container,
365 - .frm_form_field.frm_left_container{
366 - display:block;
370 + .frm_form_field.frm_left_container {
371 + display: block;
367 372 }
368 -}
373 +}