| @@ -24,8 +24,9 @@ | ||
| 24 | 24 | } |
| 25 | 25 | |
| 26 | 26 | #frm_active_style_form:not(.frm_hidden), |
| 27 | 27 | #frm_sample_form { |
| 28 | + | |
| 28 | 29 | /* Without this a small form with a max-width of 480px for example doesn't get centered in the preview space. */ |
| 29 | 30 | display: flex; |
| 30 | 31 | } |
| 31 | 32 | |
| @@ -30,8 +31,9 @@ | ||
| 30 | 31 | } |
| 31 | 32 | |
| 32 | 33 | #frm_active_style_form > .frm_forms, |
| 33 | 34 | #frm_sample_form > .frm_forms { |
| 35 | + | |
| 34 | 36 | /* This gives small form containers more space. */ |
| 35 | 37 | flex: 1; |
| 36 | 38 | padding: 0 10px; /* Match the extra padding around fields on builder */ |
| 37 | 39 | } |
| @@ -43,9 +45,8 @@ | ||
| 43 | 45 | border-radius: 6px; |
| 44 | 46 | cursor: pointer; |
| 45 | 47 | box-sizing: border-box; |
| 46 | 48 | border: 1px solid transparent; /* Add a transparent border so an active style card doesn't cause the box to resize. */ |
| 47 | - background-color: #fff; | |
| 48 | 49 | margin-bottom: 15px; |
| 49 | 50 | width: 100%; |
| 50 | 51 | padding: 14px; |
| 51 | 52 | box-shadow: var(--box-shadow-sm); |
| @@ -58,8 +59,9 @@ | ||
| 58 | 59 | color: var(--grey-500); |
| 59 | 60 | } |
| 60 | 61 | |
| 61 | 62 | .frm-style-card.frm-currently-set-style-card .frm-style-card-title-wrapper svg { |
| 63 | + | |
| 62 | 64 | /* The checkmark circle should be blue. */ |
| 63 | 65 | color: var(--primary-500); |
| 64 | 66 | } |
| 65 | 67 | |
| @@ -111,8 +113,9 @@ | ||
| 111 | 113 | gap: var(--gap-sm); |
| 112 | 114 | } |
| 113 | 115 | |
| 114 | 116 | .frm-style-card-preview + div .dropdown { |
| 117 | + | |
| 115 | 118 | /* Give it a z-index boost to avoid the border from the bottom of the card from overlapping the dropdown */ |
| 116 | 119 | z-index: 1; |
| 117 | 120 | } |
| 118 | 121 | |
| @@ -121,9 +124,9 @@ | ||
| 121 | 124 | font-size: 14px; |
| 122 | 125 | } |
| 123 | 126 | |
| 124 | 127 | .frm-style-card-title { |
| 125 | - max-width: calc( 100% - 20px ); | |
| 128 | + max-width: calc(100% - 20px); | |
| 126 | 129 | text-overflow: ellipsis; |
| 127 | 130 | overflow: hidden; |
| 128 | 131 | display: inline-block; |
| 129 | 132 | white-space: nowrap; |
| @@ -178,8 +181,9 @@ | ||
| 178 | 181 | } |
| 179 | 182 | |
| 180 | 183 | .frm_pro_form .frm_form_field.frm_lite_style, |
| 181 | 184 | .frm_pro_form .frm_lite_style { |
| 185 | + | |
| 182 | 186 | /* |
| 183 | 187 | Hide textarea, radio buttons, and checkboxes in the sample form in Pro. |
| 184 | 188 | Instead these elements are rendered again in Pro inside of a repeater. |
| 185 | 189 | */ |
| @@ -219,13 +223,15 @@ | ||
| 219 | 223 | } |
| 220 | 224 | |
| 221 | 225 | /* Style the hamburger menu (used in Style cards, and on the Style "Edit" page beside the Style name. */ |
| 222 | 226 | .frm-style-options-menu { |
| 227 | + | |
| 223 | 228 | /* The long "Reset to defaults" option name requires extra space. There's normally a 160px min-width. */ |
| 224 | 229 | min-width: 200px; |
| 225 | 230 | } |
| 226 | 231 | |
| 227 | 232 | #frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select:not(.flatpickr-monthDropdown-months) { |
| 233 | + | |
| 228 | 234 | /* Prevent back end styles from shrinking dropdowns. But leave datepicker dropdowns alone. */ |
| 229 | 235 | width: var(--auto-width); |
| 230 | 236 | max-width: 100%; |
| 231 | 237 | } |
| @@ -234,8 +240,9 @@ | ||
| 234 | 240 | appearance: none; /* Hide the default icon */ |
| 235 | 241 | } |
| 236 | 242 | |
| 237 | 243 | #frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.frm-ranking-position) { |
| 244 | + | |
| 238 | 245 | /* |
| 239 | 246 | The styler preview doesn't use .wp-core-ui which results in a funny looking dropdown arrow. |
| 240 | 247 | Restore the WordPress background image defined in /wp-admin/css/forms.css for preview selects so they appear nicer and more consistent with other dropdowns. |
| 241 | 248 | The SVG is arrow-down-alt2 from Dashicons. |
| @@ -240,9 +247,9 @@ | ||
| 240 | 247 | Restore the WordPress background image defined in /wp-admin/css/forms.css for preview selects so they appear nicer and more consistent with other dropdowns. |
| 241 | 248 | The SVG is arrow-down-alt2 from Dashicons. |
| 242 | 249 | This needs to be important because of a background-image: none !important rule that gets applied in front end CSS. |
| 243 | 250 | */ |
| 244 | - background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') !important; | |
| 251 | + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") !important; | |
| 245 | 252 | background-repeat: no-repeat !important; |
| 246 | 253 | background-position: right 5px top 55% !important; |
| 247 | 254 | |
| 248 | 255 | padding-right: 24px; /* Add enough padding for the icon. */ |
| @@ -252,9 +259,9 @@ | ||
| 252 | 259 | #frm_style_preview input[type="checkbox"]:checked { |
| 253 | 260 | background-color: unset; |
| 254 | 261 | } |
| 255 | 262 | |
| 256 | -#frm_style_preview input[type="checkbox"]:checked:before { | |
| 263 | +#frm_style_preview input[type="checkbox"]:checked::before { | |
| 257 | 264 | content: ""; |
| 258 | 265 | position: relative; |
| 259 | 266 | left: 1px; |
| 260 | 267 | } |
| @@ -263,9 +270,9 @@ | ||
| 263 | 270 | Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css |
| 264 | 271 | The label in the preview should use the label color setting. |
| 265 | 272 | */ |
| 266 | 273 | #frm_style_preview .frm_form_field > label:first-child { |
| 267 | - color: var(--label-color); | |
| 274 | + color: var(--label-color); | |
| 268 | 275 | font-size: var(--font-size); |
| 269 | 276 | } |
| 270 | 277 | |
| 271 | 278 | .frm-color-blocks { |
| @@ -270,9 +277,9 @@ | ||
| 270 | 277 | |
| 271 | 278 | .frm-color-blocks { |
| 272 | 279 | display: grid; |
| 273 | 280 | justify-content: center; |
| 274 | - grid-template-columns: repeat(auto-fit, minmax(20px, max-content)); | |
| 281 | + grid-template-columns: repeat(auto-fit, minmax(20px, max-content)); | |
| 275 | 282 | max-width: 60px; |
| 276 | 283 | } |
| 277 | 284 | |
| 278 | 285 | .frm-color-blocks > div { |
| @@ -294,8 +301,9 @@ | ||
| 294 | 301 | #frm_styling_form p > a svg { |
| 295 | 302 | position: relative; |
| 296 | 303 | bottom: 2px; |
| 297 | 304 | } |
| 305 | + | |
| 298 | 306 | .frm-style-card-separator { |
| 299 | 307 | background-color: var(--grey-300); |
| 300 | 308 | width: 2px; |
| 301 | 309 | height: 20px; |
| @@ -342,9 +350,9 @@ | ||
| 342 | 350 | } |
| 343 | 351 | |
| 344 | 352 | .frm-input-style-example > div { |
| 345 | 353 | max-width: 46px; |
| 346 | - width: calc( 100% - 8px ); | |
| 354 | + width: calc(100% - 8px); | |
| 347 | 355 | height: 2px; |
| 348 | 356 | background-color: var(--text-color); |
| 349 | 357 | } |
| 350 | 358 | |
| @@ -349,10 +357,9 @@ | ||
| 349 | 357 | } |
| 350 | 358 | |
| 351 | 359 | #frm_loading_style_placeholder, |
| 352 | 360 | #frm_style_preview.frm-loading-style-template .frm_forms, |
| 353 | -.frm-currently-set-style-card .dropdown-item.frm-apply-style | |
| 354 | -{ | |
| 361 | +.frm-currently-set-style-card .dropdown-item.frm-apply-style { | |
| 355 | 362 | display: none; |
| 356 | 363 | } |
| 357 | 364 | |
| 358 | 365 | #frm_style_preview.frm-loading-style-template #frm_loading_style_placeholder { |
| @@ -358,9 +365,9 @@ | ||
| 358 | 365 | #frm_style_preview.frm-loading-style-template #frm_loading_style_placeholder { |
| 359 | 366 | display: block; |
| 360 | 367 | text-align: center; |
| 361 | 368 | position: absolute; |
| 362 | - top: calc( 50% - 35px ); | |
| 369 | + top: calc(50% - 35px); | |
| 363 | 370 | left: 50%; |
| 364 | 371 | transform: translateX(-50%) translateY(-50%); |
| 365 | 372 | } |
| 366 | 373 | |
| @@ -372,9 +379,9 @@ | ||
| 372 | 379 | display: flex; |
| 373 | 380 | } |
| 374 | 381 | |
| 375 | 382 | #frm_style_template_modal .frm_warning_style span { |
| 376 | - flex: 1; | |
| 383 | + flex: 1; | |
| 377 | 384 | } |
| 378 | 385 | |
| 379 | 386 | #frm_style_template_modal .frm_warning_style a:focus { |
| 380 | 387 | box-shadow: none; |
| @@ -399,8 +406,9 @@ | ||
| 399 | 406 | |
| 400 | 407 | body.rtl .frm-style-card-separator { |
| 401 | 408 | margin: 0 6px 0 0; |
| 402 | 409 | } |
| 410 | + | |
| 403 | 411 | /* End RTL Styling */ |
| 404 | 412 | |
| 405 | 413 | .frm-styles-globally-disabled #frm_new_style_trigger, |
| 406 | 414 | .frm-styles-globally-disabled .frm_toggle, |
| @@ -409,15 +417,17 @@ | ||
| 409 | 417 | pointer-events: none; |
| 410 | 418 | opacity: 0.5; |
| 411 | 419 | } |
| 412 | 420 | |
| 413 | -.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:before, | |
| 414 | -.formidable_page_formidable-styles .frm-right-panel .accordion-section-title:after { | |
| 415 | - content: '' !important; | |
| 421 | +.formidable_page_formidable-styles .frm-right-panel .accordion-section-title::before, | |
| 422 | +.formidable_page_formidable-styles .frm-right-panel .accordion-section-title::after { | |
| 423 | + content: "" !important; | |
| 416 | 424 | } |
| 425 | + | |
| 417 | 426 | .formidable_page_formidable-styles .frm-right-panel .open .accordion-section-title > .frmsvg:last-child { |
| 418 | 427 | transform: rotate(180deg); |
| 419 | 428 | } |
| 429 | + | |
| 420 | 430 | .formidable_page_formidable-styles .frm-right-panel .accordion-section-title > .frmsvg:last-child { |
| 421 | 431 | position: absolute; |
| 422 | 432 | top: 0; |
| 423 | 433 | bottom: 0; |
| @@ -424,16 +434,18 @@ | ||
| 424 | 434 | right: 0; |
| 425 | 435 | margin: auto; |
| 426 | 436 | color: var(--grey); |
| 427 | 437 | } |
| 438 | + | |
| 428 | 439 | .control-section:hover .accordion-section-title { |
| 429 | 440 | background: transparent !important; |
| 430 | 441 | border-bottom-color: transparent; |
| 431 | 442 | } |
| 443 | + | |
| 432 | 444 | .frm-style-settings-hover { |
| 433 | 445 | width: 100%; |
| 434 | 446 | position: absolute; |
| 435 | - top:0; | |
| 447 | + top: 0; | |
| 436 | 448 | left: 0; |
| 437 | 449 | height: 58px; |
| 438 | 450 | background: white; |
| 439 | 451 | border-radius: var(--small-radius); |
| @@ -440,11 +452,13 @@ | ||
| 440 | 452 | box-shadow: var(--button-shadow); |
| 441 | 453 | z-index: 0; |
| 442 | 454 | transition: 0.25s opacity ease, 0.3s transform cubic-bezier(0.165, 0.84, 0.44, 1); |
| 443 | 455 | } |
| 456 | + | |
| 444 | 457 | .frm-style-settings-hover.frm-animating { |
| 445 | 458 | opacity: 0.45; |
| 446 | 459 | } |
| 460 | + | |
| 447 | 461 | .frm-right-panel .accordion-section-content { |
| 448 | 462 | background: transparent; |
| 449 | 463 | padding: 0; |
| 450 | 464 | overflow: initial; |
| @@ -452,12 +466,14 @@ | ||
| 452 | 466 | |
| 453 | 467 | .frm-right-panel .accordion-section-content > .inside { |
| 454 | 468 | padding: 15px; |
| 455 | 469 | } |
| 470 | + | |
| 456 | 471 | .frm-quick-settings .frm_form_field .frm-style-item-heading, |
| 457 | 472 | .frm-right-panel .accordion-section-content > .inside .frm-style-item-heading { |
| 458 | 473 | line-height: 36px; |
| 459 | 474 | } |
| 475 | + | |
| 460 | 476 | .frm-right-panel .accordion-section-content > .inside .frm-style-item-heading .frm_help { |
| 461 | 477 | display: inline-block; |
| 462 | 478 | line-height: 13px; |
| 463 | 479 | } |
| @@ -464,8 +480,9 @@ | ||
| 464 | 480 | |
| 465 | 481 | .frm-right-panel .accordion-section-content .inside a { |
| 466 | 482 | font-size: inherit; |
| 467 | 483 | } |
| 484 | + | |
| 468 | 485 | .frm-right-panel .control-section.open h3 { |
| 469 | 486 | border-bottom: none; |
| 470 | 487 | } |
| 471 | 488 | |
| @@ -472,8 +489,9 @@ | ||
| 472 | 489 | .js .frm-right-panel .control-section .accordion-section-title:focus, |
| 473 | 490 | .js .frm-right-panel .control-section .accordion-section-title:hover { |
| 474 | 491 | color: var(--grey-900); |
| 475 | 492 | } |
| 493 | + | |
| 476 | 494 | .js .frm-right-panel .control-section.open h3.accordion-section-title { |
| 477 | 495 | box-shadow: var(--button-shadow); |
| 478 | 496 | background: white !important; |
| 479 | 497 | border-radius: var(--small-radius); |
| @@ -478,32 +496,39 @@ | ||
| 478 | 496 | background: white !important; |
| 479 | 497 | border-radius: var(--small-radius); |
| 480 | 498 | } |
| 481 | 499 | |
| 482 | -.js .frm-right-panel .control-section .accordion-section-title:hover:before { | |
| 500 | +.js .frm-right-panel .control-section .accordion-section-title:hover::before { | |
| 483 | 501 | color: var(--grey-700); |
| 484 | 502 | } |
| 503 | + | |
| 485 | 504 | .frm-right-panel .accordion-section { |
| 486 | 505 | border: none; |
| 487 | 506 | position: relative; |
| 488 | 507 | padding-bottom: 2px; |
| 489 | 508 | } |
| 509 | + | |
| 490 | 510 | .frm-right-panel .accordion-section-title > .frmsvg:first-child { |
| 491 | 511 | margin: 0 10px 0 0; |
| 492 | 512 | color: var(--grey); |
| 493 | 513 | } |
| 514 | + | |
| 494 | 515 | .frm-right-panel .accordion-section-title:hover > .frmsvg:first-child { |
| 495 | 516 | color: var(--grey-900); |
| 496 | 517 | } |
| 518 | + | |
| 497 | 519 | .frm-right-panel .accordion-section-title > .frmsvg:last-child { |
| 498 | 520 | margin-right: 15px !important; |
| 499 | 521 | } |
| 522 | + | |
| 500 | 523 | .frm-right-panel .open .accordion-section-title > .frmsvg:last-child { |
| 501 | 524 | transform: rotate(180deg); |
| 502 | 525 | } |
| 526 | + | |
| 503 | 527 | .frm-right-panel .open.accordion-section { |
| 504 | 528 | border-bottom: 1px solid var(--grey-300); |
| 505 | 529 | } |
| 530 | + | |
| 506 | 531 | .frm-right-panel h3.accordion-section-title { |
| 507 | 532 | padding: 17px 15px !important; |
| 508 | 533 | background: transparent; |
| 509 | 534 | line-height: var(--leading); |
| @@ -510,22 +535,27 @@ | ||
| 510 | 535 | color: var(--grey-500); |
| 511 | 536 | font-size: var(--text-md); |
| 512 | 537 | font-weight: 400; |
| 513 | 538 | } |
| 539 | + | |
| 514 | 540 | .styling_settings .accordion-container { |
| 515 | 541 | position: relative; |
| 516 | 542 | } |
| 543 | + | |
| 517 | 544 | .styling_settings .accordion-container .outer-border { |
| 518 | 545 | position: relative; |
| 519 | 546 | z-index: 1; |
| 520 | 547 | } |
| 548 | + | |
| 521 | 549 | .styling_settings .accordion-section-title button { |
| 522 | 550 | border: none; |
| 523 | 551 | background: none; |
| 524 | 552 | float: right; |
| 525 | 553 | } |
| 554 | + | |
| 526 | 555 | @media only screen and (max-width: 782px) { |
| 527 | - #frm_style_preview .with_frm_style .frm_radio input[type=radio], | |
| 528 | - #frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] { | |
| 556 | + | |
| 557 | + #frm_style_preview .with_frm_style .frm_radio input[type="radio"], | |
| 558 | + #frm_style_preview .with_frm_style .frm_checkbox input[type="checkbox"] { | |
| 529 | 559 | width: 18px !important; |
| 530 | 560 | } |
| 531 | 561 | } |
