@innovastudio/contentbuilder 1.5.81 → 1.5.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.81",
+  "version": "1.5.82",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -208,11 +208,13 @@ button:focus-visible {
 
 .moveable-control {
   border: none !important;
-  width: 7px !important;
-  height: 7px !important;
-  margin-top: -3px !important;
-  margin-left: -3px !important;
-  background: #2196f3 !important;
+  width: 17px !important;
+  height: 17px !important;
+  margin-top: -8.5px !important;
+  margin-left: -8.5px !important;
+  background: #fff !important;
+  border: #dddddd 1px solid !important;
+  box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.22) !important;
 }
 .moveable-control.moveable-origin {
   display: none !important;
@@ -2947,10 +2949,9 @@ button:focus-visible {
   background-color: #ebebeb;
   position: absolute;
   width: 100%;
-  height: 100%;
-  top: 0px;
+  height: calc(100% - 80px);
+  top: 80px;
   left: 0px;
-  border-top: 80px solid transparent;
   box-sizing: border-box;
 }
 #_cbhtml .is-modal.buttoneditor #divMyButtonList,
@@ -2982,12 +2983,6 @@ button:focus-visible {
   padding: 0;
   overflow: hidden;
   overflow-y: auto;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  border-top: 80px transparent solid;
-  box-sizing: border-box;
 }
 #_cbhtml .is-modal.buttoneditor #divButtonTemplateList,
 .is-ui .is-modal.buttoneditor #divButtonTemplateList {
@@ -3522,9 +3517,10 @@ button:focus-visible {
 .is-ui .is-tool.is-video-tool,
 .is-ui .is-tool.is-audio-tool,
 .is-ui .is-tool.is-iframe-tool {
-  background: rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.97) !important;
   border: transparent 1px solid;
-  box-shadow: none;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
 }
 #_cbhtml .is-tool#divImageTool > div, #_cbhtml .is-tool#divImageTool > button, #_cbhtml .is-tool.is-video-tool > div, #_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > div, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > div, #_cbhtml .is-tool.is-iframe-tool > button,
 .is-ui .is-tool#divImageTool > div,
@@ -3535,6 +3531,8 @@ button:focus-visible {
 .is-ui .is-tool.is-audio-tool > button,
 .is-ui .is-tool.is-iframe-tool > div,
 .is-ui .is-tool.is-iframe-tool > button {
+  width: 35px;
+  height: 35px;
   background: transparent;
 }
 #_cbhtml .is-tool#divImageTool svg, #_cbhtml .is-tool.is-video-tool svg, #_cbhtml .is-tool.is-audio-tool svg, #_cbhtml .is-tool.is-iframe-tool svg,
@@ -3542,8 +3540,17 @@ button:focus-visible {
 .is-ui .is-tool.is-video-tool svg,
 .is-ui .is-tool.is-audio-tool svg,
 .is-ui .is-tool.is-iframe-tool svg {
-  fill: #fff;
-  color: #fff;
+  width: 17px;
+  height: 17px;
+  fill: #111 !important;
+  color: #111 !important;
+}
+#_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > button,
+.is-ui .is-tool.is-video-tool > button,
+.is-ui .is-tool.is-audio-tool > button,
+.is-ui .is-tool.is-iframe-tool > button {
+  width: 35px !important;
+  height: 35px !important;
 }
 #_cbhtml .is-tool#divImageResizer,
 .is-ui .is-tool#divImageResizer {
@@ -3567,22 +3574,27 @@ button:focus-visible {
 #_cbhtml .is-tool.is-spacer-tool,
 .is-ui .is-tool.is-spacer-tool {
   border: none;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
+  overflow: hidden;
 }
 #_cbhtml .is-tool.is-spacer-tool > button,
 .is-ui .is-tool.is-spacer-tool > button {
-  width: 30px;
-  height: 30px;
-  background: none;
+  width: 40px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.97) !important;
 }
 #_cbhtml .is-tool.is-spacer-tool > button svg,
 .is-ui .is-tool.is-spacer-tool > button svg {
-  fill: #121212;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool.is-table-tool,
 .is-ui .is-tool.is-table-tool {
   border: none;
   background: none;
-  box-shadow: none;
+  border-radius: 20px;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
 }
 #_cbhtml .is-tool.is-table-tool:hover,
 .is-ui .is-tool.is-table-tool:hover {
@@ -3590,13 +3602,16 @@ button:focus-visible {
 }
 #_cbhtml .is-tool.is-table-tool > button,
 .is-ui .is-tool.is-table-tool > button {
-  width: 30px;
-  height: 30px;
-  background: rgba(240, 240, 240, 0.9);
+  width: 35px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.97) !important;
 }
 #_cbhtml .is-tool.is-table-tool > button svg,
 .is-ui .is-tool.is-table-tool > button svg {
-  fill: #121212;
+  width: 17px !important;
+  height: 17px !important;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool.is-code-tool, #_cbhtml .is-tool.is-module-tool, #_cbhtml .is-tool.is-svg-tool,
 .is-ui .is-tool.is-code-tool,
@@ -3604,44 +3619,50 @@ button:focus-visible {
 .is-ui .is-tool.is-svg-tool {
   border: none;
   background: none;
-  border-radius: 3px;
+  border-radius: 20px;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
   overflow: hidden;
 }
 #_cbhtml .is-tool.is-code-tool > button, #_cbhtml .is-tool.is-module-tool > button, #_cbhtml .is-tool.is-svg-tool > button,
 .is-ui .is-tool.is-code-tool > button,
 .is-ui .is-tool.is-module-tool > button,
 .is-ui .is-tool.is-svg-tool > button {
-  width: 35px !important;
-  height: 35px !important;
-  background: rgba(240, 240, 240, 0.9);
+  width: 35px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.97) !important;
 }
 #_cbhtml .is-tool.is-code-tool > button svg, #_cbhtml .is-tool.is-module-tool > button svg, #_cbhtml .is-tool.is-svg-tool > button svg,
 .is-ui .is-tool.is-code-tool > button svg,
 .is-ui .is-tool.is-module-tool > button svg,
 .is-ui .is-tool.is-svg-tool > button svg {
-  width: 14px !important;
-  height: 14px !important;
-  fill: #121212;
+  width: 17px !important;
+  height: 17px !important;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool#divLinkTool, #_cbhtml .is-tool#divButtonTool,
 .is-ui .is-tool#divLinkTool,
 .is-ui .is-tool#divButtonTool {
-  background: rgba(243, 243, 243, 0.9);
+  background: rgba(255, 255, 255, 0.97) !important;
   box-shadow: none;
-  border-radius: 3px;
+  border-radius: 20px;
   overflow: hidden;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  margin-top: -10px;
+  margin-left: 7px;
 }
 #_cbhtml .is-tool#divLinkTool button, #_cbhtml .is-tool#divButtonTool button,
 .is-ui .is-tool#divLinkTool button,
 .is-ui .is-tool#divButtonTool button {
-  width: 30px;
-  height: 30px;
-  background: transparent;
+  width: 37px;
+  height: 37px;
+  background: transparent !important;
 }
 #_cbhtml .is-tool#divLinkTool button svg, #_cbhtml .is-tool#divButtonTool button svg,
 .is-ui .is-tool#divLinkTool button svg,
 .is-ui .is-tool#divButtonTool button svg {
-  fill: #121212;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .dot,
 .is-ui .dot {
@@ -5354,16 +5375,23 @@ button:focus-visible {
 #_cbhtml .is-tool.is-element-tool {
   border-radius: 3px;
   overflow: hidden;
+  margin-top: 10px;
+  margin-left: 0px;
+  border-radius: 100px;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  background-color: rgba(255, 255, 255, 0.9) !important;
 }
 #_cbhtml .is-tool.is-element-tool button {
-  width: 25px;
-  height: 25px;
+  width: 32px;
+  height: 31px;
   background: transparent;
+  color: #111;
 }
 #_cbhtml .is-tool.is-element-tool svg {
   width: 14px;
   height: 14px;
-  fill: #000;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool.is-element-tool .elm-more svg {
   width: 11px;
@@ -5399,14 +5427,15 @@ button:focus-visible {
   overflow: hidden;
 }
 .is-tool.is-row-tool button {
-  width: 25px;
-  height: 25px;
+  width: 28px;
+  height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .is-tool.is-row-tool svg {
-  fill: #fff;
+  fill: #fff !important;
+  color: #fff !important;
 }
 .is-tool.is-row-tool .row-handle {
   display: flex;
@@ -5452,10 +5481,11 @@ button:focus-visible {
   box-shadow: none;
   border-radius: 2px;
   overflow: hidden;
+  top: -3px !important;
 }
 .is-tool.is-col-tool button {
-  width: 25px;
-  height: 25px;
+  width: 28px;
+  height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -5470,10 +5500,9 @@ button:focus-visible {
   background: rgba(255, 85, 4, 0.9);
 }
 .is-tool.is-col-tool svg {
-  width: 23px;
-  height: 23px;
   fill: #fff !important;
   /* $ui-columntool-colored-button-svg-fill */
+  color: #fff !important;
 }
 .is-tool.is-col-tool .cell-more svg {
   width: 14px;