diff --git a/src/controls.js b/src/controls.js index b1b2f16..36eacc0 100644 --- a/src/controls.js +++ b/src/controls.js @@ -35,6 +35,10 @@ export default function Controls({ /> + +

Inner Images

+
+ { @@ -42,6 +46,7 @@ export default function Controls({ }} allowedTypes={["image"]} multiple={false} + className="img-selector" mediaPreview={ attributes.imgUrl !== "" ? (
@@ -52,9 +57,10 @@ export default function Controls({ }} isSmall={true} isDestructive={true} - > - Remove - + icon="dismiss" + label="Remove" + className="remove-img" + />
) : (

No image selected.

@@ -63,8 +69,6 @@ export default function Controls({ />
- - { @@ -72,6 +76,7 @@ export default function Controls({ }} allowedTypes={["image"]} multiple={false} + className="img-selector" mediaPreview={ attributes.imgUrlHover !== "" ? (
@@ -80,11 +85,12 @@ export default function Controls({ onClick={() => { setAttributes({ imgUrlHover: "" }); }} + icon="dismiss" + label="Remove" isSmall={true} isDestructive={true} - > - Remove - + className="remove-img" + />
) : (

No image selected.

diff --git a/src/editor.scss b/src/editor.scss index d4739c3..46f11e6 100644 --- a/src/editor.scss +++ b/src/editor.scss @@ -78,3 +78,45 @@ .block-list { margin-top: 0; } + +#red-orbital-controls { + .row-inner-imgs { + border-top: 1px solid #e0e0e0; + margin-top: 1.5em; + padding-top: 0.5em; + } + .img-selector { + box-shadow: inset 0 0 0 1px #e0e0e0; + + img { + margin: 0 0 6px 0; + border: 1px solid #e0e0e0; + padding: 2px; + } + + .remove-img { + position: absolute; + top: 15px; + left: 15px; + min-width: auto; + box-shadow: none; + background-color: transparent; + } + + .components-placeholder__label { + display: none; + } + + .components-placeholder__fieldset { + display: flex; + justify-content: flex-start; + flex-direction: row; + align-items: center; + + button, + input { + margin: 0 12px 0 0; + } + } + } +}