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

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