| @@ -6,8 +6,21 @@ | ||
| 6 | 6 | display: flex; |
| 7 | 7 | flex-direction: row; |
| 8 | 8 | } |
| 9 | 9 | |
| 10 | +#frm_style_sidebar, | |
| 11 | +#frm_style_preview { | |
| 12 | + height: calc( 100vh - 95px ); | |
| 13 | + box-sizing: border-box; | |
| 14 | + position: relative; | |
| 15 | +} | |
| 16 | + | |
| 17 | +#frm_style_sidebar { | |
| 18 | + vertical-align: top; | |
| 19 | + box-sizing: border-box; | |
| 20 | + overflow-y: auto; | |
| 21 | +} | |
| 22 | + | |
| 10 | 23 | #frm_style_sidebar .frm-inner-content { |
| 11 | 24 | padding-left: 0; |
| 12 | 25 | padding-right: 0; |
| 13 | 26 | padding-bottom: 0; |
| @@ -12,13 +25,25 @@ | ||
| 12 | 25 | padding-right: 0; |
| 13 | 26 | padding-bottom: 0; |
| 14 | 27 | } |
| 15 | 28 | |
| 29 | +#frm_style_sidebar .control-section:hover .accordion-section-title { | |
| 30 | + /* Normally an accordion has a white background but this doesn't look great with the padding on the accordion. */ | |
| 31 | + background-color: transparent !important; | |
| 32 | +} | |
| 33 | + | |
| 16 | 34 | #frm_style_sidebar .accordion-section-title::after { |
| 17 | 35 | right: 0; |
| 18 | 36 | color: var(--grey-400); |
| 19 | 37 | } |
| 20 | 38 | |
| 39 | +#frm_style_preview { | |
| 40 | + overflow-y: auto; | |
| 41 | + overflow-x: hidden; | |
| 42 | + flex: 2; | |
| 43 | + border-left: 1px solid var(--sidebar-hover); | |
| 44 | +} | |
| 45 | + | |
| 21 | 46 | #frm_active_style_form:not(.frm_hidden) ~ #frm_sample_form, |
| 22 | 47 | .frm-style-card-info { |
| 23 | 48 | display: none; |
| 24 | 49 | } |
| @@ -24,9 +49,8 @@ | ||
| 24 | 49 | } |
| 25 | 50 | |
| 26 | 51 | #frm_active_style_form:not(.frm_hidden), |
| 27 | 52 | #frm_sample_form { |
| 28 | - | |
| 29 | 53 | /* Without this a small form with a max-width of 480px for example doesn't get centered in the preview space. */ |
| 30 | 54 | display: flex; |
| 31 | 55 | } |
| 32 | 56 | |
| @@ -31,9 +55,8 @@ | ||
| 31 | 55 | } |
| 32 | 56 | |
| 33 | 57 | #frm_active_style_form > .frm_forms, |
| 34 | 58 | #frm_sample_form > .frm_forms { |
| 35 | - | |
| 36 | 59 | /* This gives small form containers more space. */ |
| 37 | 60 | flex: 1; |
| 38 | 61 | padding: 0 10px; /* Match the extra padding around fields on builder */ |
| 39 | 62 | } |
| @@ -45,8 +68,9 @@ | ||
| 45 | 68 | border-radius: 6px; |
| 46 | 69 | cursor: pointer; |
| 47 | 70 | box-sizing: border-box; |
| 48 | 71 | border: 1px solid transparent; /* Add a transparent border so an active style card doesn't cause the box to resize. */ |
| 72 | + background-color: #fff; | |
| 49 | 73 | margin-bottom: 15px; |
| 50 | 74 | width: 100%; |
| 51 | 75 | padding: 14px; |
| 52 | 76 | box-shadow: var(--box-shadow-sm); |
| @@ -59,9 +83,8 @@ | ||
| 59 | 83 | color: var(--grey-500); |
| 60 | 84 | } |
| 61 | 85 | |
| 62 | 86 | .frm-style-card.frm-currently-set-style-card .frm-style-card-title-wrapper svg { |
| 63 | - | |
| 64 | 87 | /* The checkmark circle should be blue. */ |
| 65 | 88 | color: var(--primary-500); |
| 66 | 89 | } |
| 67 | 90 | |
| @@ -113,9 +136,8 @@ | ||
| 113 | 136 | gap: var(--gap-sm); |
| 114 | 137 | } |
| 115 | 138 | |
| 116 | 139 | .frm-style-card-preview + div .dropdown { |
| 117 | - | |
| 118 | 140 | /* Give it a z-index boost to avoid the border from the bottom of the card from overlapping the dropdown */ |
| 119 | 141 | z-index: 1; |
| 120 | 142 | } |
| 121 | 143 | |
| @@ -124,9 +146,9 @@ | ||
| 124 | 146 | font-size: 14px; |
| 125 | 147 | } |
| 126 | 148 | |
| 127 | 149 | .frm-style-card-title { |
| 128 | - max-width: calc(100% - 20px); | |
| 150 | + max-width: calc( 100% - 20px ); | |
| 129 | 151 | text-overflow: ellipsis; |
| 130 | 152 | overflow: hidden; |
| 131 | 153 | display: inline-block; |
| 132 | 154 | white-space: nowrap; |
| @@ -160,13 +182,12 @@ | ||
| 160 | 182 | cursor: pointer; |
| 161 | 183 | font-weight: 400; |
| 162 | 184 | |
| 163 | 185 | /* |
| 164 | - When a background image is set the children in the fieldset have a z-index of 1. | |
| 165 | - The Ranking Field contains elements with a higher z-index of 2. | |
| 166 | - Set to 3 so the floating buttons get priority when clicking if they overlap a form element. | |
| 186 | + When a background image is set the children in the fieldset have a z-index of 1.\ | |
| 187 | + Set to 2 so the floating buttons get priority when clicking if they overlap a form element. | |
| 167 | 188 | */ |
| 168 | - z-index: 3; | |
| 189 | + z-index: 2; | |
| 169 | 190 | } |
| 170 | 191 | |
| 171 | 192 | #frm_style_preview .frm_floating_style_button.frm_hidden { |
| 172 | 193 | display: none; |
| @@ -181,9 +202,8 @@ | ||
| 181 | 202 | } |
| 182 | 203 | |
| 183 | 204 | .frm_pro_form .frm_form_field.frm_lite_style, |
| 184 | 205 | .frm_pro_form .frm_lite_style { |
| 185 | - | |
| 186 | 206 | /* |
| 187 | 207 | Hide textarea, radio buttons, and checkboxes in the sample form in Pro. |
| 188 | 208 | Instead these elements are rendered again in Pro inside of a repeater. |
| 189 | 209 | */ |
| @@ -202,8 +222,86 @@ | ||
| 202 | 222 | .styling_settings .frm_image_preview_wrapper .frm_choose_image_box { |
| 203 | 223 | margin-left: 0; |
| 204 | 224 | } |
| 205 | 225 | |
| 226 | +/* Color picker CSS */ | |
| 227 | +#frm_style_sidebar .wp-picker-open + .wp-picker-input-wrap { | |
| 228 | + position: absolute; | |
| 229 | + margin-left: calc( ( 100% - 35px ) * -1 ); | |
| 230 | + margin-top: 1px; | |
| 231 | + width: calc( 100% - 36px ); | |
| 232 | +} | |
| 233 | + | |
| 234 | +#frm_style_sidebar .wp-picker-container input[type="text"].wp-color-picker { | |
| 235 | + border: none; | |
| 236 | + padding: 5px 8px; | |
| 237 | + font-family: inherit; | |
| 238 | + color: var(--grey-700); | |
| 239 | + font-size: var(--text-md); | |
| 240 | + width: 100%; | |
| 241 | + line-height: var(--leading); | |
| 242 | +} | |
| 243 | + | |
| 244 | +#frm_style_sidebar .wp-picker-input-wrap .wp-picker-clear { | |
| 245 | + display: none !important; | |
| 246 | +} | |
| 247 | + | |
| 248 | +#frm_style_sidebar .wp-picker-holder { | |
| 249 | + position: absolute; | |
| 250 | + z-index: 999; | |
| 251 | +} | |
| 252 | + | |
| 253 | +#frm_style_sidebar .wp-picker-input-wrap label { | |
| 254 | + margin-bottom: 0; | |
| 255 | +} | |
| 256 | + | |
| 257 | +#frm_style_sidebar .wp-picker-container .wp-color-result.button { | |
| 258 | + width: 100%; | |
| 259 | + overflow: hidden; | |
| 260 | + margin: 0 !important; | |
| 261 | + height: var(--h-md) !important; | |
| 262 | + padding: 0 0 0 var(--gap-lg) !important; | |
| 263 | + border-radius: var(--small-radius); | |
| 264 | + border-color: var(--grey-300); | |
| 265 | +} | |
| 266 | + | |
| 267 | +#frm_style_sidebar .wp-color-result-text { | |
| 268 | + line-height: var(--leading) !important; | |
| 269 | + font-size: var(--text-md); | |
| 270 | + background: #fff !important; | |
| 271 | + color: var(--grey-900); | |
| 272 | + padding: 5px 8px; | |
| 273 | + border-color: var(--grey-300); | |
| 274 | + text-align: left; | |
| 275 | +} | |
| 276 | + | |
| 277 | +#frm_style_sidebar .color-alpha { | |
| 278 | + width: var(--gap-lg) !important; | |
| 279 | +} | |
| 280 | + | |
| 281 | +.frm_grid_container .wp-picker-container { | |
| 282 | + width: 100%; | |
| 283 | + position: relative; | |
| 284 | +} | |
| 285 | + | |
| 286 | +.wp-picker-container button.wp-color-result { | |
| 287 | + border: 1px solid var(--grey-300) !important; | |
| 288 | +} | |
| 289 | + | |
| 290 | +.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker { | |
| 291 | + max-width: 100%; | |
| 292 | + position: relative; | |
| 293 | +} | |
| 294 | + | |
| 295 | +.frm_end .wp-picker-holder { | |
| 296 | + margin-left: -145px; | |
| 297 | +} | |
| 298 | + | |
| 299 | +.frm_end.frm6 .wp-picker-holder { | |
| 300 | + margin-left: -86px; | |
| 301 | +} | |
| 302 | +/* End of color picker CSS */ | |
| 303 | + | |
| 206 | 304 | .ui-datepicker-inline.ui-datepicker { |
| 207 | 305 | max-width: 19em; |
| 208 | 306 | } |
| 209 | 307 | |
| @@ -223,15 +321,22 @@ | ||
| 223 | 321 | } |
| 224 | 322 | |
| 225 | 323 | /* Style the hamburger menu (used in Style cards, and on the Style "Edit" page beside the Style name. */ |
| 226 | 324 | .frm-style-options-menu { |
| 227 | - | |
| 228 | 325 | /* The long "Reset to defaults" option name requires extra space. There's normally a 160px min-width. */ |
| 229 | 326 | min-width: 200px; |
| 230 | 327 | } |
| 231 | 328 | |
| 232 | -#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select:not(.flatpickr-monthDropdown-months) { | |
| 329 | +/* | |
| 330 | +Do not set this for frm_inside_container as it requires a custom line height value. | |
| 331 | +Target .frm_primary_label so we avoid other labels like star rating stars. | |
| 332 | +Time fields use a div instead of a label, so don't target by the primary label by tag type. | |
| 333 | +*/ | |
| 334 | +#frm_style_preview .frm_form_field:not(.frm_inside_container) > .frm_primary_label { | |
| 335 | + line-height: var(--line-height); | |
| 336 | +} | |
| 233 | 337 | |
| 338 | +#frm_style_preview .with_frm_style :not(.ui-datepicker-title) > select { | |
| 234 | 339 | /* Prevent back end styles from shrinking dropdowns. But leave datepicker dropdowns alone. */ |
| 235 | 340 | width: var(--auto-width); |
| 236 | 341 | max-width: 100%; |
| 237 | 342 | } |
| @@ -239,10 +344,9 @@ | ||
| 239 | 344 | #frm_style_preview select { |
| 240 | 345 | appearance: none; /* Hide the default icon */ |
| 241 | 346 | } |
| 242 | 347 | |
| 243 | -#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year):not(.frm-ranking-position) { | |
| 244 | - | |
| 348 | +#frm_style_preview select:not(.ui-datepicker-month):not(.ui-datepicker-year) { | |
| 245 | 349 | /* |
| 246 | 350 | The styler preview doesn't use .wp-core-ui which results in a funny looking dropdown arrow. |
| 247 | 351 | 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. |
| 248 | 352 | The SVG is arrow-down-alt2 from Dashicons. |
| @@ -247,11 +351,9 @@ | ||
| 247 | 351 | 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. |
| 248 | 352 | The SVG is arrow-down-alt2 from Dashicons. |
| 249 | 353 | This needs to be important because of a background-image: none !important rule that gets applied in front end CSS. |
| 250 | 354 | */ |
| 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; | |
| 252 | - background-repeat: no-repeat !important; | |
| 253 | - background-position: right 5px top 55% !important; | |
| 355 | + background: 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') no-repeat right 5px top 55% !important; | |
| 254 | 356 | |
| 255 | 357 | padding-right: 24px; /* Add enough padding for the icon. */ |
| 256 | 358 | } |
| 257 | 359 | |
| @@ -259,9 +361,9 @@ | ||
| 259 | 361 | #frm_style_preview input[type="checkbox"]:checked { |
| 260 | 362 | background-color: unset; |
| 261 | 363 | } |
| 262 | 364 | |
| 263 | -#frm_style_preview input[type="checkbox"]:checked::before { | |
| 365 | +#frm_style_preview input[type="checkbox"]:checked:before { | |
| 264 | 366 | content: ""; |
| 265 | 367 | position: relative; |
| 266 | 368 | left: 1px; |
| 267 | 369 | } |
| @@ -270,9 +372,9 @@ | ||
| 270 | 372 | Avoid a conflict with the .frm_form_field > label:first-child rule in frm_admin.css |
| 271 | 373 | The label in the preview should use the label color setting. |
| 272 | 374 | */ |
| 273 | 375 | #frm_style_preview .frm_form_field > label:first-child { |
| 274 | - color: var(--label-color); | |
| 376 | + color: var(--label-color); | |
| 275 | 377 | font-size: var(--font-size); |
| 276 | 378 | } |
| 277 | 379 | |
| 278 | 380 | .frm-color-blocks { |
| @@ -277,9 +379,9 @@ | ||
| 277 | 379 | |
| 278 | 380 | .frm-color-blocks { |
| 279 | 381 | display: grid; |
| 280 | 382 | justify-content: center; |
| 281 | - grid-template-columns: repeat(auto-fit, minmax(20px, max-content)); | |
| 383 | + grid-template-columns: repeat(auto-fit, minmax(20px, max-content)); | |
| 282 | 384 | max-width: 60px; |
| 283 | 385 | } |
| 284 | 386 | |
| 285 | 387 | .frm-color-blocks > div { |
| @@ -337,9 +439,8 @@ | ||
| 337 | 439 | .frm-input-style-example { |
| 338 | 440 | border-width: var(--field-border-width); |
| 339 | 441 | border-style: var(--field-border-style); |
| 340 | 442 | border-color: var(--border-color); |
| 341 | - border-radius: var(--border-radius); | |
| 342 | 443 | background-color: var(--bg-color); |
| 343 | 444 | max-width: 138px; |
| 344 | 445 | width: 100%; |
| 345 | 446 | height: 16px; |
| @@ -350,9 +451,9 @@ | ||
| 350 | 451 | } |
| 351 | 452 | |
| 352 | 453 | .frm-input-style-example > div { |
| 353 | 454 | max-width: 46px; |
| 354 | - width: calc(100% - 8px); | |
| 455 | + width: calc( 100% - 8px ); | |
| 355 | 456 | height: 2px; |
| 356 | 457 | background-color: var(--text-color); |
| 357 | 458 | } |
| 358 | 459 | |
| @@ -357,9 +458,11 @@ | ||
| 357 | 458 | } |
| 358 | 459 | |
| 359 | 460 | #frm_loading_style_placeholder, |
| 360 | 461 | #frm_style_preview.frm-loading-style-template .frm_forms, |
| 361 | -.frm-currently-set-style-card .dropdown-item.frm-apply-style { | |
| 462 | +#frm_default_style_cards_wrapper .dropdown-item.frm-apply-style, | |
| 463 | +.frm-currently-set-style-card .dropdown-item.frm-apply-style | |
| 464 | +{ | |
| 362 | 465 | display: none; |
| 363 | 466 | } |
| 364 | 467 | |
| 365 | 468 | #frm_style_preview.frm-loading-style-template #frm_loading_style_placeholder { |
| @@ -365,9 +468,9 @@ | ||
| 365 | 468 | #frm_style_preview.frm-loading-style-template #frm_loading_style_placeholder { |
| 366 | 469 | display: block; |
| 367 | 470 | text-align: center; |
| 368 | 471 | position: absolute; |
| 369 | - top: calc(50% - 35px); | |
| 472 | + top: calc( 50% - 35px ); | |
| 370 | 473 | left: 50%; |
| 371 | 474 | transform: translateX(-50%) translateY(-50%); |
| 372 | 475 | } |
| 373 | 476 | |
| @@ -379,9 +482,9 @@ | ||
| 379 | 482 | display: flex; |
| 380 | 483 | } |
| 381 | 484 | |
| 382 | 485 | #frm_style_template_modal .frm_warning_style span { |
| 383 | - flex: 1; | |
| 486 | + flex: 1; | |
| 384 | 487 | } |
| 385 | 488 | |
| 386 | 489 | #frm_style_template_modal .frm_warning_style a:focus { |
| 387 | 490 | box-shadow: none; |
| @@ -386,12 +489,11 @@ | ||
| 386 | 489 | #frm_style_template_modal .frm_warning_style a:focus { |
| 387 | 490 | box-shadow: none; |
| 388 | 491 | } |
| 389 | 492 | |
| 390 | -/* Break the new style trigger into a separate line on small screens to avoid overlapping with the Enable Formidable styling toggle. */ | |
| 391 | -#frm_style_sidebar > .frm-flex-justify { | |
| 392 | - gap: var(--gap-sm); | |
| 393 | - flex-wrap: wrap; | |
| 493 | +#frm_new_style_trigger_wrapper { | |
| 494 | + position: absolute; | |
| 495 | + right: 15px; | |
| 394 | 496 | } |
| 395 | 497 | |
| 396 | 498 | /* RTL Styling */ |
| 397 | 499 | body.rtl #frm_toggle_sample_form { |
| @@ -398,8 +500,13 @@ | ||
| 398 | 500 | right: unset; |
| 399 | 501 | left: 40px; |
| 400 | 502 | } |
| 401 | 503 | |
| 504 | +body.rtl #frm_new_style_trigger_wrapper { | |
| 505 | + right: unset; | |
| 506 | + left: 15px; | |
| 507 | +} | |
| 508 | + | |
| 402 | 509 | body.rtl .frm-input-style-example { |
| 403 | 510 | padding-left: 0; |
| 404 | 511 | padding-right: 10px; |
| 405 | 512 | } |
| @@ -406,9 +513,8 @@ | ||
| 406 | 513 | |
| 407 | 514 | body.rtl .frm-style-card-separator { |
| 408 | 515 | margin: 0 6px 0 0; |
| 409 | 516 | } |
| 410 | - | |
| 411 | 517 | /* End RTL Styling */ |
| 412 | 518 | |
| 413 | 519 | .frm-styles-globally-disabled #frm_new_style_trigger, |
| 414 | 520 | .frm-styles-globally-disabled .frm_toggle, |
| @@ -417,145 +523,28 @@ | ||
| 417 | 523 | pointer-events: none; |
| 418 | 524 | opacity: 0.5; |
| 419 | 525 | } |
| 420 | 526 | |
| 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; | |
| 527 | +@media only screen and (max-width: 1200px) { | |
| 528 | + /* Adjust the height to account for the taller header when the tabs drop to a second line. */ | |
| 529 | + #frm_style_sidebar, | |
| 530 | + #frm_style_preview { | |
| 531 | + height: calc( 100vh - 135px ); | |
| 532 | + } | |
| 424 | 533 | } |
| 425 | 534 | |
| 426 | -.formidable_page_formidable-styles .frm-right-panel .open .accordion-section-title > .frmsvg:last-child { | |
| 427 | - transform: rotate(180deg); | |
| 535 | +@media only screen and (max-width: 900px) { | |
| 536 | + /* Break the new style trigger into a separate line to avoid overlapping with the Enable Formidable styling toggle. */ | |
| 537 | + #frm_new_style_trigger_wrapper { | |
| 538 | + position: static; | |
| 539 | + display: flex; | |
| 540 | + justify-content: flex-end; | |
| 541 | + margin-bottom: 10px; | |
| 542 | + } | |
| 428 | 543 | } |
| 429 | 544 | |
| 430 | -.formidable_page_formidable-styles .frm-right-panel .accordion-section-title > .frmsvg:last-child { | |
| 431 | - position: absolute; | |
| 432 | - top: 0; | |
| 433 | - bottom: 0; | |
| 434 | - right: 0; | |
| 435 | - margin: auto; | |
| 436 | - color: var(--grey); | |
| 437 | -} | |
| 438 | - | |
| 439 | -.control-section:hover .accordion-section-title { | |
| 440 | - background: transparent !important; | |
| 441 | - border-bottom-color: transparent; | |
| 442 | -} | |
| 443 | - | |
| 444 | -.frm-style-settings-hover { | |
| 445 | - width: 100%; | |
| 446 | - position: absolute; | |
| 447 | - top: 0; | |
| 448 | - left: 0; | |
| 449 | - height: 58px; | |
| 450 | - background: white; | |
| 451 | - border-radius: var(--small-radius); | |
| 452 | - box-shadow: var(--button-shadow); | |
| 453 | - z-index: 0; | |
| 454 | - transition: 0.25s opacity ease, 0.3s transform cubic-bezier(0.165, 0.84, 0.44, 1); | |
| 455 | -} | |
| 456 | - | |
| 457 | -.frm-style-settings-hover.frm-animating { | |
| 458 | - opacity: 0.45; | |
| 459 | -} | |
| 460 | - | |
| 461 | -.frm-right-panel .accordion-section-content { | |
| 462 | - background: transparent; | |
| 463 | - padding: 0; | |
| 464 | - overflow: initial; | |
| 465 | -} | |
| 466 | - | |
| 467 | -.frm-right-panel .accordion-section-content > .inside { | |
| 468 | - padding: 15px; | |
| 469 | -} | |
| 470 | - | |
| 471 | -.frm-quick-settings .frm_form_field .frm-style-item-heading, | |
| 472 | -.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading { | |
| 473 | - line-height: 36px; | |
| 474 | -} | |
| 475 | - | |
| 476 | -.frm-right-panel .accordion-section-content > .inside .frm-style-item-heading .frm_help { | |
| 477 | - display: inline-block; | |
| 478 | - line-height: 13px; | |
| 479 | -} | |
| 480 | - | |
| 481 | -.frm-right-panel .accordion-section-content .inside a { | |
| 482 | - font-size: inherit; | |
| 483 | -} | |
| 484 | - | |
| 485 | -.frm-right-panel .control-section.open h3 { | |
| 486 | - border-bottom: none; | |
| 487 | -} | |
| 488 | - | |
| 489 | -.js .frm-right-panel .control-section .accordion-section-title:focus, | |
| 490 | -.js .frm-right-panel .control-section .accordion-section-title:hover { | |
| 491 | - color: var(--grey-900); | |
| 492 | -} | |
| 493 | - | |
| 494 | -.js .frm-right-panel .control-section.open h3.accordion-section-title { | |
| 495 | - box-shadow: var(--button-shadow); | |
| 496 | - background: white !important; | |
| 497 | - border-radius: var(--small-radius); | |
| 498 | -} | |
| 499 | - | |
| 500 | -.js .frm-right-panel .control-section .accordion-section-title:hover::before { | |
| 501 | - color: var(--grey-700); | |
| 502 | -} | |
| 503 | - | |
| 504 | -.frm-right-panel .accordion-section { | |
| 505 | - border: none; | |
| 506 | - position: relative; | |
| 507 | - padding-bottom: 2px; | |
| 508 | -} | |
| 509 | - | |
| 510 | -.frm-right-panel .accordion-section-title > .frmsvg:first-child { | |
| 511 | - margin: 0 10px 0 0; | |
| 512 | - color: var(--grey); | |
| 513 | -} | |
| 514 | - | |
| 515 | -.frm-right-panel .accordion-section-title:hover > .frmsvg:first-child { | |
| 516 | - color: var(--grey-900); | |
| 517 | -} | |
| 518 | - | |
| 519 | -.frm-right-panel .accordion-section-title > .frmsvg:last-child { | |
| 520 | - margin-right: 15px !important; | |
| 521 | -} | |
| 522 | - | |
| 523 | -.frm-right-panel .open .accordion-section-title > .frmsvg:last-child { | |
| 524 | - transform: rotate(180deg); | |
| 525 | -} | |
| 526 | - | |
| 527 | -.frm-right-panel .open.accordion-section { | |
| 528 | - border-bottom: 1px solid var(--grey-300); | |
| 529 | -} | |
| 530 | - | |
| 531 | -.frm-right-panel h3.accordion-section-title { | |
| 532 | - padding: 17px 15px !important; | |
| 533 | - background: transparent; | |
| 534 | - line-height: var(--leading); | |
| 535 | - color: var(--grey-500); | |
| 536 | - font-size: var(--text-md); | |
| 537 | - font-weight: 400; | |
| 538 | -} | |
| 539 | - | |
| 540 | -.styling_settings .accordion-container { | |
| 541 | - position: relative; | |
| 542 | -} | |
| 543 | - | |
| 544 | -.styling_settings .accordion-container .outer-border { | |
| 545 | - position: relative; | |
| 546 | - z-index: 1; | |
| 547 | -} | |
| 548 | - | |
| 549 | -.styling_settings .accordion-section-title button { | |
| 550 | - border: none; | |
| 551 | - background: none; | |
| 552 | - float: right; | |
| 553 | -} | |
| 554 | - | |
| 555 | 545 | @media only screen and (max-width: 782px) { |
| 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"] { | |
| 546 | + #frm_style_preview .with_frm_style .frm_radio input[type=radio], | |
| 547 | + #frm_style_preview .with_frm_style .frm_checkbox input[type=checkbox] { | |
| 559 | 548 | width: 18px !important; |
| 560 | 549 | } |
| 561 | 550 | } |
