PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 6.22.2
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v6.22.2
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
formidable / css / admin / style-components.css

style-components.css in Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More 6.22.2, at css/admin/style-components.css

535 lines 15.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .formidable_page_formidable-styles.js .control-section .accordion-section-title:focus {
2 background: none;
3 }
4 .formidable_page_formidable-styles .frm-right-panel .accordion-section-title svg.frmsvg:nth-child(1) {
5 width: 24px;
6 height: 24px;
7 }
8 .formidable_page_formidable-styles .frm-right-panel h3.accordion-section-title:hover > svg:last-child,
9 .formidable_page_formidable-styles .frm-right-panel .open h3.accordion-section-title > svg:first-child,
10 .formidable_page_formidable-styles .frm-right-panel .open h3.accordion-section-title > svg:last-child {
11 color: var( --grey-900 );
12 }
13 .formidable_page_formidable-styles .frm-right-panel .frm-style-component {
14 align-self: center;
15 }
16 .formidable_page_formidable-styles .frm-right-panel .frm-style-component .wp-picker-container button {
17 position: relative;
18 height: 36px !important;
19 background-image: none !important;
20 overflow: hidden;
21 }
22 .formidable_page_formidable-styles .frm-right-panel .frm-style-editor-form.frm-pro .frm-style-component .wp-picker-container button {
23 background-color: white !important;
24 }
25 .formidable_page_formidable-styles .frm-right-panel .frm-style-component .wp-picker-container:after {
26 content: '';
27 width: 20px;
28 height: 20px;
29 display: block;
30 position: absolute;
31 top: 0;
32 right: 8px;
33 bottom: 0;
34 margin: auto;
35 background: url('../../images/style/small-arrow.svg') no-repeat;
36 background-position: center;
37 z-index: 10;
38 }
39 .formidable_page_formidable-styles .frm-right-panel .frm-style-component .wp-color-result-text {
40 line-height: 36px !important;
41 padding: 0px 12px;
42 border: 0px;
43 }
44 .formidable_page_formidable-styles .frm-right-panel .frm-style-component .color-alpha {
45 width: 20px !important;
46 height: 20px !important;
47 border-radius: 50% !important;
48 border: 1px solid rgba(208, 213, 221, 1);
49 top: 0;
50 left:0;
51 bottom: 0;
52 margin: auto;
53 margin-left: 12px;
54 }
55 .formidable_page_formidable-styles .frm-right-panel .frm-style-component .wp-picker-input-wrap input {
56 width: calc( 100% - 10px ) !important;
57 margin: 1px 5px;
58 height: 32px;
59 line-height: 32px;
60 }
61 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component > div {
62 max-width: 216px;
63 }
64 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .wp-picker-container {
65 max-width: calc( 100% - 44px );
66 position: relative;
67 }
68
69 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component button.frm_choose_image_box {
70 width: 36px;
71 height: 36px;
72 padding: 0px;
73 background: white;
74 overflow: hidden;
75 text-indent: -999px;
76 flex-wrap: wrap;
77 border: none;
78 }
79
80 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_styling_frame {
81 margin-left: 0px;
82 }
83 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_preview_wrapper {
84 position: relative;
85 width: 36px;
86 height: 36px;
87 margin: 0px;
88 border: 1px solid var(--grey-300);
89 border-radius: var(--small-radius);
90 overflow: hidden;
91 box-sizing: border-box;
92 }
93 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_preview_wrapper .frm_image_preview_frame {
94 max-width: 120%;
95 height: 120%;
96 margin: -10%;
97 position: relative;
98 }
99 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_data {
100 position: absolute;
101 left: 0;
102 top: 0;
103 width: 100%;
104 height: 100%;
105 overflow: hidden;
106 margin: 0px;
107 border-radius: var(--small-radius);
108 }
109 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_remove_image_option {
110 width: 100%;
111 height: 100%;
112 border: 1px solid red;
113 text-indent: -9999px;
114 position: absolute;
115 top: 0;
116 left: 0;
117 }
118 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_remove_image_option:before {
119 opacity: 0.0;
120 content: '';
121 display: block;
122 position: absolute;
123 width: 100%;
124 height: 100%;
125 z-index: 1;
126 top: 0;
127 left: 0;
128 background: rgba( 255, 255, 255, 0.8 );
129 }
130 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_remove_image_option:after {
131 opacity: 0.0;
132 content: '';
133 display: block;
134 position: absolute;
135 width: 100%;
136 height: 100%;
137 z-index: 1;
138 top: 0;
139 left: 0;
140 background: url( '../../images/style/close.svg' ) no-repeat;
141 background-position: center;
142 }
143 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_remove_image_option:hover:before,
144 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_remove_image_option:hover:after {
145 opacity: 1.0;
146 }
147
148 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_preview_wrapper .frm_image_preview_frame .frm_image_styling_frame,
149 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_preview_wrapper .frm_image_preview_frame .frm_image_styling_frame img {
150 width: 100%;
151 height: 100%;
152 }
153
154 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_preview_wrapper + *,
155 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_image_preview_wrapper .frm_image_preview_title,
156 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_bg_image_additional_settings,
157 .formidable_page_formidable-styles .frm-right-panel .frm-style-component.frm-background-image-component .frm_remove_image_option * {
158 display: none;
159 }
160
161 .frm-style-component .frm-radio-container {
162 max-width: 216px;
163 height: 36px;
164 background: rgba( 242, 244, 247, 1 );
165 gap: var(--small-gap);
166 padding: var(--gap-2xs);
167 box-sizing: border-box;
168 border-radius: var(--small-radius);
169 position: relative;
170 }
171 .frm-style-component.frm-field-shape .frm-radio-container {
172 max-width: unset;
173 }
174 .frm-style-component.frm-direction-component .frm-radio-container {
175 gap: var(--gap-xs);
176 }
177 .frm-style-component .frm-radio-container svg {
178 width: 16px;
179 }
180 .frm-style-component .frm-radio-container .frm-radio-active-tracker {
181 display: block;
182 width: 28%;
183 height: calc( 100% - 8px );
184 background: white;
185 border-radius: var(--small-radius);
186 box-shadow: var(--button-shadow);
187 position: absolute;
188 top: var(--gap-2xs);
189 bottom: 0;
190 left: var(--gap-2xs);
191 z-index: 1;
192 transition: 0.35s transform cubic-bezier(0.075, 0.82, 0.165, 1);
193 }
194 .frm-style-component.frm-field-shape .frm-radio-container .frm-radio-active-tracker {
195 width: 23%;
196 }
197 .frm-style-component.frm-align-component.frm-2-options .frm-radio-container .frm-radio-active-tracker,
198 .frm-style-component.frm-direction-component .frm-radio-container .frm-radio-active-tracker {
199 width: calc( 50% - var(--gap-xs) );
200 }
201 .frm-style-component .frm-radio-container > label {
202 width: 30%;
203 height: 100%;
204 margin: 0px;
205 cursor: pointer;
206 position: relative;
207 display: flex;
208 z-index: 2;
209 }
210 .frm-style-component.frm-field-shape .frm-radio-container > label {
211 width: 23%;
212 }
213 .frm-style-component.frm-align-component.frm-2-options .frm-radio-container > label,
214 .frm-style-component.frm-direction-component .frm-radio-container > label {
215 width: 50%;
216 }
217 .frm-style-tabs-wrapper .frm-tabs-navs ul > li:not(.frm-active):hover,
218 .frm-style-component .frm-radio-container input:not(:checked) + label:hover {
219 background: rgba( 234, 236, 240, 1 );
220 border-radius: var(--small-radius);
221 box-shadow: var(--button-shadow);
222 }
223 .frm-style-component .frm-radio-container input {
224 display: none;
225 }
226
227 .frm-style-component .frm-slider-container {
228 width: calc( 100% - 91px );
229 display: flex;
230 align-items: center;
231 color: rgba(29, 41, 57, 1);
232 }
233 .frm-style-component .frm-slider-container svg.frmsvg {
234 color: currentColor;
235 margin-right: 8px;
236 margin-left: -5px;
237 position: relative;
238 z-index: 15;
239 }
240 .frm-style-component .frm-group-sliders .frm-slider-container svg.frmsvg:hover {
241 color: rgba(65, 153, 253, 1);
242 cursor: pointer;
243 }
244 .frm-style-component .frm-slider-container .frm-slider-active-track {
245 display: block;
246 height: 100%;
247 width: 0;
248 position: relative;
249 border-radius: 200px;
250 }
251 .frm-style-component .frm-slider-container .frm-slider-active-track,
252 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet {
253 background: rgba(65, 153, 253, 1);
254 box-shadow: 0px 1.88px 4px -1px rgba(16, 24, 40, 0.03), 0 6px 8px -2px rgba( 16, 24, 40, 0.08 );
255 }
256 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet {
257 position: absolute;
258 display: block;
259 width: 16px;
260 height: 16px;
261 border-radius: 50%;
262 transform: translatex( 15px );
263 cursor: grab;
264 right: 0;
265 top: 0;
266 bottom: 0;
267 margin: auto;
268 }
269 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet .frm-slider-value-label {
270 position: absolute;
271 display: block;
272 width: 48px;
273 height: 36px;
274 background: rgba(16, 24, 40, 1);
275 color: white;
276 font-weight: 400;
277 font-size: var(--text-sm);
278 line-height: 36px;
279 border-radius: var(--small-radius);
280 transform: translate( -18px, -42px ) scale3d( 0.7, 1, 1 );
281 opacity: 0.0;
282 z-index: -2;
283 pointer-events: none;
284 text-align: center;
285 user-select: none;
286 }
287 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet.frm-dragging .frm-slider-value-label {
288 z-index: 12;
289 transform: translate( -18px, -42px ) scale3d( 1, 1, 1 );
290 opacity: 1.0;
291 transition: 0.3s opacity, 0.35s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
292 }
293 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet:before{
294 content: '';
295 display: block;
296 position: absolute;
297 width: 18px;
298 height: 18px;
299 border-radius: 50%;
300 left: 0;
301 top: 0;
302 transform: translate( -5px, -5px ) scale3d( 0.7, 0.7, 1 );
303 border: 4px solid rgba(65, 153, 253, 1);
304 opacity: 0.0;
305 transition: 0.3s opacity, 0.35s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
306 }
307 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet.frm-dragging:before{
308 opacity: 0.5;
309 transform: translate( -5px, -5px ) scale3d( 1, 1, 1 );
310 transition: 0.3s opacity, 0.35s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
311 }
312 .frm-style-component .frm-slider-container .frm-slider-active-track .frm-slider-bullet:after {
313 content: '';
314 position: absolute;
315 display: block;
316 width: 180%;
317 height: 200%;
318 border-radius: 50%;
319 left: 0;
320 top: 0;
321 transform: translate(-24%, -24%);
322 }
323 .frm-style-component .frm-slider-value {
324 width: 86px;
325 height: 36px;
326 display: flex;
327 justify-content: center;
328 box-sizing: border-box;
329 background: white;
330 border-radius: var(--small-radius);
331 border: 1px solid var(--grey-300);
332 }
333 .frm-style-component .frm-slider-value > * {
334 border: none;
335 }
336 .frm-style-component .frm-slider-value input {
337 width: 40px;
338 height: 100%;
339 padding: 0px;
340 font-size: var(--text-sm);
341 color: rgba(16, 24, 40, 1);
342 padding-left: 12px;
343 box-sizing: border-box;
344 }
345 .frm-style-component .frm-slider-value select {
346 text-align: right;
347 padding: 0px;
348 font-size: var(--text-sm);
349 color: rgba(102, 112, 133, 1);
350 width: 44px;
351 background: url('../../images/style/small-arrow.svg') no-repeat;
352 background-position: center right 12px;
353 padding-right: 24px!important;
354 }
355 .frm-style-component .frm-slider {
356 display: block;
357 width: calc( 100% - 5px );
358 height: 4px;
359 background: rgba(234, 236, 240, 1);
360 border-radius: 200px;
361 cursor: pointer;
362 }
363 .frm-slider-component .frm-independent-slider-field {
364 margin-top: 10px;
365 }
366 .frm-style-component .frm-slider-component.frm-has-multiple-values {
367 margin-bottom: 10px;
368 }
369 .frm-slider-component.frm-disabled .frm-slider-container {
370 pointer-events: none;
371 opacity: 0.5;
372 }
373 .frm-slider-component.frm-disabled .frm-slider-value input[type="text"] {
374 width: 28px;
375 }
376 .frm-slider-component.frm-disabled .frm-slider-value select {
377 width: 56px;
378 }
379 .frm-slider-component.frm-disabled.frm-empty .frm-slider-value input[type="text"] {
380 width: 56px;
381 }
382 .frm-slider-component.frm-disabled.frm-empty .frm-slider-value select {
383 width: 28px;
384 }
385
386 .frm-tabs-wrapper {
387 position: relative;
388 overflow: hidden;
389 }
390
391 .frm-tabs-wrapper .frm-tabs-navigator {
392 margin: 0px;
393 padding: 0px;
394 display: flex;
395 gap: var(--gap-xs);
396 justify-content: space-between;
397 align-items: center;
398 background: rgba( 242, 244, 247, 1 );
399 border-radius: var(--small-radius);
400 box-sizing: border-box;
401 height: 44px;
402 position: relative;
403 z-index: 2;
404 }
405 .frm-tabs-wrapper .frm-tabs-navigator .frm-tab-item {
406 flex: 1;
407 text-align: center;
408 cursor: pointer;
409 }
410 .frm-tabs-wrapper .frm-tabs-navigator .frm-active-background {
411 display: block;
412 height: 100%;
413 background: white;
414 position: absolute;
415 top: 0;
416 left: 0;
417 z-index: 1;
418 }
419 .frm-style-tabs-wrapper .frm-tabs-navs {
420 padding: 0px;
421 }
422
423 .frm-style-tabs-wrapper .frm-tabs-navs ul {
424 margin: 0;
425 height: var(--h-md);
426 position: relative;
427 justify-content: space-between;
428 }
429
430 .frm-style-tabs-wrapper .frm-tabs-navs ul li {
431 flex: 1;
432 color: var( --grey-500 );
433 font-weight: 500;
434 font-size: var(--text-sm);
435 cursor: pointer;
436 margin-bottom: 0px;
437 text-align: center;
438 height: 28px;
439 line-height: 28px;
440 margin-top: 7px;
441 }
442 .frm-style-tabs-wrapper .frm-tabs-navs ul li:first-child {
443 margin-left: var(--gap-2xs);
444 }
445 .frm-style-tabs-wrapper .frm-tabs-navs ul li:last-child {
446 margin-right: var(--gap-2xs);
447 }
448
449 .frm-style-tabs-wrapper .frm-tabs-navs ul li.frm-active {
450 color: var(--grey-900);
451 }
452 .frm-style-tabs-wrapper {
453 position: relative;
454 }
455 .frm-style-tabs-wrapper .frm-tabs-delimiter {
456 position: absolute;
457 top: 0;
458 left: 0;
459 width: 100%;
460 background: rgba(242, 244, 247, 1);
461 height: 44px;
462 margin: 0;
463 border-radius: var(--small-radius);
464 }
465
466 .frm-style-tabs-wrapper .frm-tabs-delimiter .frm-tabs-active-underline {
467 height: 28px;
468 background: white;
469 position: absolute;
470 left: 0px; bottom: 8px;
471 width: 45px;
472 transition: 0.4s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
473 border-radius: var(--small-radius);
474 box-shadow: var(--button-shadow);
475 }
476
477 .frm-style-tabs-wrapper .frm-tabs-delimiter .frm-tabs-active-underline.frm-first {
478 left: var(--gap-2xs);
479 }
480 .frm-style-tabs-wrapper .frm-tabs-delimiter .frm-tabs-active-underline.frm-last {
481 left: calc( -1 * var(--gap-2xs) );
482 }
483
484 .frm-tabs-container {
485 position: relative;
486 overflow: hidden;
487 margin-top: var(--gap-md);
488 height: 100%;
489 }
490 .frm-style-tabs-wrapper .frm-tabs-container .frm-tabs-slide-track {
491 transition: 0.32s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
492 }
493 .frm-style-tabs-wrapper .frm-tabs-slide-track > div {
494 flex: 0 0 100%;
495 opacity: 0.0;
496 transition: 0.25s opacity linear;
497 position: relative;
498 height: auto;
499 max-height: unset;
500 overflow: hidden;
501 box-sizing: border-box;
502 }
503
504 .frm-style-tabs-wrapper .frm-tabs-slide-track > div > div {
505 overflow: auto;
506 position: relative;
507 width:100%;
508 padding: 0px;
509 box-sizing: border-box;
510 }
511
512 .frm-tabs-slide-track > div > div:first-child {
513 height: 100%;
514 }
515
516 .frm-tabs-slide-track > div.frm-active {
517 opacity: 1.0;
518 transition: 0.35s opacity linear;
519 }
520 .frm-style-component .frm_toggle_slider {
521 background: rgba( 242, 244, 247, 1 );
522 }
523 .frm-style-component label.frm-copy-text {
524 line-height: 32px;
525 cursor: pointer;
526 white-space: nowrap;
527 }
528 .frm-style-component .wp-picker-holder {
529 right: 0;
530 }
531 .formidable_page_formidable-styles .accordion-section-content .frm-style-item-heading {
532 font-weight: 500;
533 font-size: var( --text-md );
534 color: var( --grey-900 );
535 }