diff --git a/packages/webiny-app-cms/src/editor/components/Element.js b/packages/webiny-app-cms/src/editor/components/Element.js index 504301fb184..8b86821ae22 100644 --- a/packages/webiny-app-cms/src/editor/components/Element.js +++ b/packages/webiny-app-cms/src/editor/components/Element.js @@ -75,6 +75,8 @@ const Element = pure( {plugin.render({ element })} +
+
+
+
)} diff --git a/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js b/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js index 2e41a349286..07a17497e06 100644 --- a/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js +++ b/packages/webiny-app-cms/src/editor/components/Element/ElementStyled.js @@ -111,6 +111,31 @@ export const ElementContainer = pure( backgroundColor: color } } + }, + ">.add-element": { + position: "absolute", + left: "50%", + backgroundColor: color, + color: "white", + width: "22px", + height: "22px", + borderRadius: "50%", + display: active || highlight ? "flex" : "none", + justifyContent: "center", + alignItems: "center", + transform: "scale(0.5)", + cursor: "pointer", + zIndex: 15, + transition: "transform 0.2s", + "&--above": { + top: -12 + }, + "&--below": { + bottom: -10 + }, + "&:hover": { + transform: "scale(1)" + } } }; })