_blocks.scss
1 year ago
_field-group.scss
1 year ago
_fields.scss
1 year ago
acf-pro-field-group.scss
1 year ago
acf-pro-input.scss
1 year ago
_blocks.scss
236 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 |