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

533 lines 15.1 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 .frm-slider-component.frm-disabled.frm-empty .frm-slider-value input[type="text"] {
378 width: 56px;
379 }
380 .frm-slider-component.frm-disabled.frm-empty .frm-slider-value select {
381 width: 28px;
382 }
383
384 .frm-tabs-wrapper {
385 position: relative;
386 overflow: hidden;
387 }
388
389 .frm-tabs-wrapper .frm-tabs-navigator {
390 margin: 0px;
391 padding: 0px;
392 display: flex;
393 gap: var(--gap-xs);
394 justify-content: space-between;
395 align-items: center;
396 background: rgba( 242, 244, 247, 1 );
397 border-radius: var(--small-radius);
398 box-sizing: border-box;
399 height: 44px;
400 position: relative;
401 z-index: 2;
402 }
403 .frm-tabs-wrapper .frm-tabs-navigator .frm-tab-item {
404 flex: 1;
405 text-align: center;
406 cursor: pointer;
407 }
408 .frm-tabs-wrapper .frm-tabs-navigator .frm-active-background {
409 display: block;
410 height: 100%;
411 background: white;
412 position: absolute;
413 top: 0;
414 left: 0;
415 z-index: 1;
416 }
417 .frm-style-tabs-wrapper .frm-tabs-navs {
418 padding: 0px;
419 }
420
421 .frm-style-tabs-wrapper .frm-tabs-navs ul {
422 margin: 0;
423 height: var(--h-md);
424 position: relative;
425 justify-content: space-between;
426 }
427
428 .frm-style-tabs-wrapper .frm-tabs-navs ul li {
429 flex: 1;
430 color: var( --grey-500 );
431 font-weight: 500;
432 font-size: var(--text-sm);
433 cursor: pointer;
434 margin-bottom: 0px;
435 text-align: center;
436 height: 28px;
437 line-height: 28px;
438 margin-top: 7px;
439 }
440 .frm-style-tabs-wrapper .frm-tabs-navs ul li:first-child {
441 margin-left: var(--gap-2xs);
442 }
443 .frm-style-tabs-wrapper .frm-tabs-navs ul li:last-child {
444 margin-right: var(--gap-2xs);
445 }
446
447 .frm-style-tabs-wrapper .frm-tabs-navs ul li.frm-active {
448 color: var(--grey-900);
449 }
450 .frm-style-tabs-wrapper {
451 position: relative;
452 }
453 .frm-style-tabs-wrapper .frm-tabs-delimiter {
454 position: absolute;
455 top: 0;
456 left: 0;
457 width: 100%;
458 background: rgba(242, 244, 247, 1);
459 height: 44px;
460 margin: 0;
461 border-radius: var(--small-radius);
462 }
463
464 .frm-style-tabs-wrapper .frm-tabs-delimiter .frm-tabs-active-underline {
465 height: 28px;
466 background: white;
467 position: absolute;
468 left: 0px; bottom: 8px;
469 width: 45px;
470 transition: 0.4s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
471 border-radius: var(--small-radius);
472 box-shadow: var(--button-shadow);
473 }
474
475 .frm-style-tabs-wrapper .frm-tabs-delimiter .frm-tabs-active-underline.frm-first {
476 left: var(--gap-2xs);
477 }
478 .frm-style-tabs-wrapper .frm-tabs-delimiter .frm-tabs-active-underline.frm-last {
479 left: calc( -1 * var(--gap-2xs) );
480 }
481
482 .frm-tabs-container {
483 position: relative;
484 overflow: hidden;
485 margin-top: var(--gap-md);
486 height: 100%;
487 }
488 .frm-style-tabs-wrapper .frm-tabs-container .frm-tabs-slide-track {
489 transition: 0.32s transform cubic-bezier(0.25, 0.46, 0.45, 0.94);
490 }
491 .frm-style-tabs-wrapper .frm-tabs-slide-track > div {
492 flex: 0 0 100%;
493 opacity: 0.0;
494 transition: 0.25s opacity linear;
495 position: relative;
496 height: auto;
497 max-height: unset;
498 overflow: hidden;
499 box-sizing: border-box;
500 }
501
502 .frm-style-tabs-wrapper .frm-tabs-slide-track > div > div {
503 overflow: auto;
504 position: relative;
505 width:100%;
506 padding: 0px;
507 box-sizing: border-box;
508 }
509
510 .frm-tabs-slide-track > div > div:first-child {
511 height: 100%;
512 }
513
514 .frm-tabs-slide-track > div.frm-active {
515 opacity: 1.0;
516 transition: 0.35s opacity linear;
517 }
518 .frm-style-component .frm_toggle_slider {
519 background: rgba( 242, 244, 247, 1 );
520 }
521 .frm-style-component label.frm-copy-text {
522 line-height: 32px;
523 cursor: pointer;
524 white-space: nowrap;
525 }
526 .frm-style-component .wp-picker-holder {
527 right: 0;
528 }
529 .formidable_page_formidable-styles .accordion-section-content .frm-style-item-heading {
530 font-weight: 500;
531 font-size: var( --text-md );
532 color: var( --grey-900 );
533 }