| 1 |
/** |
| 2 |
* MLSImport block editor — inspector styling. |
| 3 |
* |
| 4 |
* Re-skins the @wordpress/components controls in MLSImport block inspector panels |
| 5 |
* to the shared wp-admin "2025" design system (the field_options tab / the |
| 6 |
* standalone settings page), so block settings match the rest of the plugin's admin. |
| 7 |
* |
| 8 |
* Scope: `.mlsimport-block-inspector` is added to every MLSImport PanelBody (the |
| 9 |
* `.components-panel__body`) by the PanelBody wrapper in the block editor scripts — |
| 10 |
* so these rules touch ONLY MLSImport block panels, never core/other-plugin |
| 11 |
* inspectors. Mirrors the override block in mlsimport-standalone-settings.css |
| 12 |
* (same tokens; see that file and the design-system memory). The class scope |
| 13 |
* (specificity 0,2,0) beats wp-components' single-class base rules; `!important` |
| 14 |
* is used only where WP's emotion styling forces a value (select box-shadow, |
| 15 |
* the InputControl backdrop border, and the label transform/size). |
| 16 |
*/ |
| 17 |
|
| 18 |
/* Text / number / email / textarea / select — bordered, rounded, soft shadow. */ |
| 19 |
.mlsimport-block-inspector .components-text-control__input, |
| 20 |
.mlsimport-block-inspector .components-textarea-control__input, |
| 21 |
.mlsimport-block-inspector .components-select-control__input { |
| 22 |
padding: 6px 12px; |
| 23 |
min-height: 36px; |
| 24 |
box-sizing: border-box; |
| 25 |
background: #ffffff; |
| 26 |
color: #1c1917; |
| 27 |
border: 1px solid rgba( 28, 25, 23, 0.12 ); |
| 28 |
border-radius: 10px; |
| 29 |
box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.06 ); |
| 30 |
} |
| 31 |
|
| 32 |
.mlsimport-block-inspector .components-textarea-control__input { |
| 33 |
min-height: 0; |
| 34 |
} |
| 35 |
|
| 36 |
/* SelectControl draws its visible border on the .components-input-control__backdrop |
| 37 |
overlay (default 1px #949494), covering the border set on the inner <select>. |
| 38 |
Recolor the backdrop to the 2025 token so the select matches the text inputs. */ |
| 39 |
.mlsimport-block-inspector .components-input-control__backdrop { |
| 40 |
border-color: rgba( 28, 25, 23, 0.12 ) !important; |
| 41 |
border-radius: 10px !important; |
| 42 |
} |
| 43 |
|
| 44 |
/* WP forces box-shadow:none on the native <select> via an emotion class — re-assert |
| 45 |
the soft shadow so the select isn't flat next to the inputs. */ |
| 46 |
.mlsimport-block-inspector .components-select-control__input { |
| 47 |
box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.06 ) !important; |
| 48 |
} |
| 49 |
|
| 50 |
/* Focus: Sunny Bento orange accent ring, consistent across every field. */ |
| 51 |
.mlsimport-block-inspector .components-text-control__input:focus, |
| 52 |
.mlsimport-block-inspector .components-textarea-control__input:focus, |
| 53 |
.mlsimport-block-inspector .components-select-control__input:focus { |
| 54 |
border-color: #e85d3c; |
| 55 |
box-shadow: 0 0 0 1px #e85d3c; |
| 56 |
outline: none; |
| 57 |
} |
| 58 |
|
| 59 |
/* Field labels — block, 14px, medium weight, dark, sentence-case. Covers BOTH label |
| 60 |
classes: TextControl/TextareaControl use .components-base-control__label, while |
| 61 |
SelectControl renders its label as an InputControl label |
| 62 |
(.components-input-control__label). WP renders both small + uppercase via emotion, |
| 63 |
so transform + size are forced with !important. */ |
| 64 |
.mlsimport-block-inspector .components-base-control__label, |
| 65 |
.mlsimport-block-inspector .components-input-control__label { |
| 66 |
display: block; |
| 67 |
margin-bottom: 4px; |
| 68 |
font-size: 14px !important; |
| 69 |
font-weight: 500; |
| 70 |
color: #1c1917; |
| 71 |
text-transform: none !important; |
| 72 |
letter-spacing: normal; |
| 73 |
} |
| 74 |
|
| 75 |
/* Help / explanation text under a field — muted. */ |
| 76 |
.mlsimport-block-inspector .components-base-control__help { |
| 77 |
color: #9a9285; |
| 78 |
font-size: 12px; |
| 79 |
} |
| 80 |
|
| 81 |
/* Buttons, if a panel uses them — primary: solid near-black pill, secondary: |
| 82 |
white bordered pill — matching .button.mlsimport_button (Sunny Bento). */ |
| 83 |
.mlsimport-block-inspector .components-button.is-primary { |
| 84 |
color: #ffffff; |
| 85 |
background: #1c1917; |
| 86 |
border: 1px solid #1c1917; |
| 87 |
border-radius: 999px; |
| 88 |
box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.08 ); |
| 89 |
} |
| 90 |
|
| 91 |
.mlsimport-block-inspector .components-button.is-primary:hover { |
| 92 |
background: #33302b; |
| 93 |
border-color: #33302b; |
| 94 |
box-shadow: 0 10px 24px -10px rgba( 0, 0, 0, 0.45 ); |
| 95 |
} |
| 96 |
|
| 97 |
.mlsimport-block-inspector .components-button.is-secondary { |
| 98 |
background: #ffffff; |
| 99 |
color: #1c1917; |
| 100 |
border: 1px solid rgba( 28, 25, 23, 0.12 ); |
| 101 |
border-radius: 999px; |
| 102 |
box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.06 ); |
| 103 |
} |
| 104 |
|
| 105 |
.mlsimport-block-inspector .components-button.is-secondary:hover { |
| 106 |
background: #f3efe7; |
| 107 |
} |
| 108 |
|
