_blocks.scss
8 months ago
_field-group.scss
1 year ago
_fields.scss
1 year ago
acf-pro-field-group.scss
1 year ago
acf-pro-input.scss
9 months ago
acf-styles-in-iframe-for-blocks.scss
8 months ago
_blocks.scss
396 lines
| 1 | /*----------------------------------------------------------------------------- |
| 2 | * |
| 3 | * ACF Blocks |
| 4 | * |
| 5 | *----------------------------------------------------------------------------*/ |
| 6 | |
| 7 | // All block components. |
| 8 | .acf-block-component { |
| 9 | |
| 10 | .components-placeholder { |
| 11 | margin: 0; |
| 12 | } |
| 13 | } |
| 14 | |
| 15 | .block-editor .acf-field.acf-error { |
| 16 | background-color: rgba(255, 0, 0, 0.05); |
| 17 | } |
| 18 | |
| 19 | // Block fields |
| 20 | .acf-block-component .acf-block-fields { |
| 21 | // Ensure white background behind fields. |
| 22 | background: #fff; |
| 23 | |
| 24 | // Generic body styles |
| 25 | text-align: left; |
| 26 | font-size: 13px; |
| 27 | line-height: 1.4em; |
| 28 | color: #444; |
| 29 | font-family: |
| 30 | -apple-system, |
| 31 | BlinkMacSystemFont, |
| 32 | "Segoe UI", |
| 33 | Roboto, |
| 34 | Oxygen-Sans, |
| 35 | Ubuntu, |
| 36 | Cantarell, |
| 37 | "Helvetica Neue", |
| 38 | sans-serif; |
| 39 | |
| 40 | &.acf-empty-block-fields { |
| 41 | border: 1px solid #1e1e1e; |
| 42 | padding: 12px; |
| 43 | |
| 44 | .components-panel & { |
| 45 | border: none; |
| 46 | border-top: 1px solid #ddd; |
| 47 | border-bottom: 1px solid #ddd; |
| 48 | } |
| 49 | } |
| 50 | |
| 51 | html[dir="rtl"]="rtl""] & { |
| 52 | text-align: right; |
| 53 | } |
| 54 | |
| 55 | p { |
| 56 | font-size: 13px; |
| 57 | line-height: 1.5; |
| 58 | } |
| 59 | } |
| 60 | |
| 61 | // Block body. |
| 62 | .acf-block-body, |
| 63 | .acf-block-fields:has(> .acf-error-message) { |
| 64 | |
| 65 | .acf-block-fields:has(> .acf-error-message) { |
| 66 | border: none !important; |
| 67 | } |
| 68 | |
| 69 | |
| 70 | .acf-error-message { |
| 71 | margin-top: 0; |
| 72 | border: none; |
| 73 | |
| 74 | .acf-notice-dismiss { |
| 75 | display: flex; |
| 76 | align-items: center; |
| 77 | justify-content: center; |
| 78 | overflow: hidden; |
| 79 | |
| 80 | // Prevent Core outline styles from impacting the close button's focus state. Without unsetting the outline, we get a black glow around the button. |
| 81 | outline: unset; |
| 82 | } |
| 83 | |
| 84 | .acf-icon.-cancel::before { |
| 85 | margin: 0 !important; |
| 86 | } |
| 87 | |
| 88 | } |
| 89 | |
| 90 | &.acf-block-has-validation-error { |
| 91 | border: 2px solid #d94f4f; |
| 92 | } |
| 93 | |
| 94 | .acf-error .acf-input .acf-notice { |
| 95 | background: none !important; |
| 96 | border: none !important; |
| 97 | display: flex !important; |
| 98 | align-items: center !important; |
| 99 | padding-left: 0; |
| 100 | |
| 101 | p { |
| 102 | margin: 0.5em 0 !important; |
| 103 | } |
| 104 | } |
| 105 | |
| 106 | |
| 107 | .acf-error .acf-input .acf-notice::before { |
| 108 | content: ""; |
| 109 | position: relative; |
| 110 | top: 0; |
| 111 | left: 0; |
| 112 | font-size: 20px; |
| 113 | background-image: url(../../../images/icons/icon-info-red.svg); |
| 114 | background-repeat: no-repeat; |
| 115 | background-position: center; |
| 116 | background-size: 69%; |
| 117 | height: 26px !important; |
| 118 | width: 26px !important; |
| 119 | box-sizing: border-box; |
| 120 | } |
| 121 | |
| 122 | .acf-error .acf-label label { |
| 123 | color: #d94f4f; |
| 124 | } |
| 125 | |
| 126 | .acf-error .acf-input input { |
| 127 | border-color: #d94f4f; |
| 128 | } |
| 129 | |
| 130 | &.acf-block-has-validation-error::before { |
| 131 | content: ""; |
| 132 | position: absolute; |
| 133 | top: -2px; |
| 134 | left: -32px; |
| 135 | font-size: 20px; |
| 136 | background-color: #d94f4f; |
| 137 | background-image: url(../../../images/icons/icon-info-white.svg); |
| 138 | background-repeat: no-repeat; |
| 139 | background-position-x: center; |
| 140 | // Offset the icon down slighly to match the notice text basline that is being impacted by the outer stroke |
| 141 | background-position-y: 52%; |
| 142 | background-size: 55%; |
| 143 | height: 40px; |
| 144 | width: 32px; |
| 145 | box-sizing: border-box; |
| 146 | } |
| 147 | |
| 148 | .acf-block-validation-error { |
| 149 | color: #d94f4f; |
| 150 | display: flex; |
| 151 | align-items: center; |
| 152 | } |
| 153 | |
| 154 | // Fields wrapper. |
| 155 | .acf-block-fields { |
| 156 | border: #adb2ad solid 1px; |
| 157 | |
| 158 | // Tab |
| 159 | .acf-tab-wrap { |
| 160 | |
| 161 | .acf-tab-group { |
| 162 | margin-left: 0; |
| 163 | padding: 16px 20px 0; |
| 164 | } |
| 165 | } |
| 166 | } |
| 167 | |
| 168 | // Block fields (div). |
| 169 | .acf-fields > .acf-field { |
| 170 | padding: 16px 20px; |
| 171 | |
| 172 | // Accordions. |
| 173 | &.acf-accordion { |
| 174 | border-color: #adb2ad; |
| 175 | |
| 176 | .acf-accordion-title { |
| 177 | padding: 16px 20px; |
| 178 | } |
| 179 | } |
| 180 | } |
| 181 | |
| 182 | // Ensure ACF buttons aren't changed by theme colors in the block editor. |
| 183 | .acf-button, |
| 184 | .acf-link a.button, |
| 185 | .acf-add-checkbox { |
| 186 | color: #2271b1 !important; |
| 187 | border-color: #2271b1 !important; |
| 188 | background: #f6f7f7 !important; |
| 189 | vertical-align: top; |
| 190 | |
| 191 | &.button-primary:hover { |
| 192 | color: white !important; |
| 193 | background: #2271b1 !important; |
| 194 | } |
| 195 | |
| 196 | &:focus { |
| 197 | outline: none !important; |
| 198 | background: #f6f7f7 !important; |
| 199 | } |
| 200 | |
| 201 | &:hover { |
| 202 | color: #0a4b78 !important; |
| 203 | } |
| 204 | } |
| 205 | |
| 206 | // Preview. |
| 207 | .acf-block-preview { |
| 208 | min-height: 10px; |
| 209 | } |
| 210 | } |
| 211 | |
| 212 | // Block panel. |
| 213 | .acf-block-panel { |
| 214 | // Fields wrapper. |
| 215 | .acf-block-fields { |
| 216 | border-top: #ddd solid 1px; |
| 217 | border-bottom: #ddd solid 1px; |
| 218 | min-height: 1px; |
| 219 | |
| 220 | &:empty { |
| 221 | border-top: none; |
| 222 | } |
| 223 | |
| 224 | // Tab |
| 225 | .acf-tab-wrap { |
| 226 | background: transparent; |
| 227 | } |
| 228 | } |
| 229 | } |
| 230 | |
| 231 | // Add compatibility for WP 5.3 and older. |
| 232 | // - Sidebar area is wrapped in a PanelBody element. |
| 233 | .components-panel__body .acf-block-panel { |
| 234 | margin: 16px -16px -16px; |
| 235 | } |
| 236 | |
| 237 | .acf-block-form-modal .components-modal__content { |
| 238 | padding: 4px 8px 8px !important; |
| 239 | } |
| 240 | |
| 241 | .acf-block-form-modal .components-modal__content .acf-block-panel .acf-block-fields { |
| 242 | border: none !important; |
| 243 | } |
| 244 | |
| 245 | .acf-block-form-modal .components-modal__content .acf-fields>.acf-field { |
| 246 | border: none !important; |
| 247 | } |
| 248 | |
| 249 | .acf-block-form-modal .components-modal__header { |
| 250 | padding: 24px; |
| 251 | border-bottom: #ddd solid 1px !important; |
| 252 | max-height: 64px !important; |
| 253 | } |
| 254 | |
| 255 | .acf-block-form-modal .components-modal__header h1 { |
| 256 | font-weight: 500; |
| 257 | font-size: 15px !important; |
| 258 | } |
| 259 | |
| 260 | html[dir=rtl]=rtl] .acf-block-form-modal .components-modal__header .components-button { |
| 261 | left: 0; |
| 262 | right: auto; |
| 263 | } |
| 264 | |
| 265 | |
| 266 | @media(min-width: 600px)and (min-width: 782px) { |
| 267 | .acf-block-form-modal { |
| 268 | height: 100% !important; |
| 269 | width: 50% !important; |
| 270 | border-radius: 0; |
| 271 | position: absolute; |
| 272 | right: 0; |
| 273 | } |
| 274 | |
| 275 | html[dir=rtl]=rtl] .acf-block-form-modal { |
| 276 | right: auto; |
| 277 | left: 0 |
| 278 | } |
| 279 | |
| 280 | @keyframes components-modal__appear-animation { |
| 281 | 0% { |
| 282 | right: -20px; |
| 283 | opacity: 0; |
| 284 | transform: scale(1); |
| 285 | } |
| 286 | |
| 287 | to { |
| 288 | right: 0; |
| 289 | opacity: 1; |
| 290 | transform: scale(1); |
| 291 | } |
| 292 | } |
| 293 | |
| 294 | @keyframes components-modal__disappear-animation { |
| 295 | 0% { |
| 296 | right: 0; |
| 297 | opacity: 1; |
| 298 | transform: scale(1); |
| 299 | } |
| 300 | |
| 301 | to { |
| 302 | right: -20px; |
| 303 | opacity: 0; |
| 304 | transform: scale(1); |
| 305 | } |
| 306 | } |
| 307 | |
| 308 | @keyframes components-modal__appear-animation-rtl { |
| 309 | 0% { |
| 310 | left: -20px; |
| 311 | opacity: 0; |
| 312 | transform: scale(1) |
| 313 | } |
| 314 | |
| 315 | to { |
| 316 | left: 0; |
| 317 | opacity: 1; |
| 318 | transform: scale(1) |
| 319 | } |
| 320 | } |
| 321 | |
| 322 | @keyframes components-modal__disappear-animation-rtl { |
| 323 | 0% { |
| 324 | left: 0; |
| 325 | opacity: 1; |
| 326 | transform: scale(1) |
| 327 | } |
| 328 | |
| 329 | to { |
| 330 | left: -20px; |
| 331 | opacity: 0; |
| 332 | transform: scale(1) |
| 333 | } |
| 334 | } |
| 335 | |
| 336 | html[dir=rtl]=rtl] .acf-block-form-modal.components-modal__frame { |
| 337 | animation-name: components-modal__appear-animation-rtl !important |
| 338 | } |
| 339 | |
| 340 | html[dir=rtl]=rtl] .acf-block-form-modal.is-closing { |
| 341 | animation-name: components-modal__disappear-animation-rtl !important |
| 342 | } |
| 343 | } |
| 344 | |
| 345 | .acf-blocks-open-expanded-editor-btn.has-text.has-icon { |
| 346 | width: 100%; |
| 347 | justify-content: center |
| 348 | } |
| 349 | |
| 350 | .acf-blocks-toolbar-icon { |
| 351 | display: flex; |
| 352 | align-items: center; |
| 353 | gap: .3rem; |
| 354 | padding-right: .6rem; |
| 355 | } |
| 356 | |
| 357 | .acf-blocks-toolbar-icon i { |
| 358 | display: flex; |
| 359 | } |
| 360 | |
| 361 | .acf-inline-fields-popover { |
| 362 | z-index: 59899; |
| 363 | min-width: 300px; |
| 364 | } |
| 365 | |
| 366 | .acf-inline-fields-popover-inner>.acf-block-panel>.acf-block-fields>.acf-field { |
| 367 | display: none; |
| 368 | border-top-style: none !important; |
| 369 | } |
| 370 | |
| 371 | .acf-inline-fields-popover-inner .acf-tab-wrap { |
| 372 | display: none; |
| 373 | } |
| 374 | |
| 375 | .acf-inline-fields-popover-inner .acf-block-fields>.acf-error-message { |
| 376 | display: none; |
| 377 | } |
| 378 | |
| 379 | .acf-inline-editing-toolbar .acf-inline-fields-popover-inner .acf-tab-group { |
| 380 | display: flex; |
| 381 | white-space: nowrap; |
| 382 | } |
| 383 | |
| 384 | .block-editor-block-toolbar .field-type-icon { |
| 385 | top: 0; |
| 386 | background-color: initial; |
| 387 | border: 0; |
| 388 | } |
| 389 | |
| 390 | .block-editor-block-toolbar .field-type-icon:before { |
| 391 | background-color: #000; |
| 392 | } |
| 393 | |
| 394 | .block-editor-block-toolbar .is-pressed .field-type-icon:before { |
| 395 | background-color: #fff; |
| 396 | } |