@innovastudio/contentbox 1.3.27 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.3.27",
+  "version": "1.4.0",
   "type": "module",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.2.23",
+    "@innovastudio/contentbuilder": "^1.3.1",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -1,11 +1,12 @@
-#divBoxTool {
+.is-box-tool {
   display: none;
-  z-index: 10;
+  z-index: 1;
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: auto;
+  bottom: 0;
+  left: calc(50% - 80px);
+  right: auto;
   box-sizing: border-box;
-  width: 60px;
   line-height: 30px;
   outline: none;
   text-align: center;
@@ -13,17 +14,18 @@
   border-radius: 0px;
   overflow: hidden;
 }
-#divBoxTool button {
+.is-box-tool button {
   width: 40px !important;
   height: 40px !important;
+  cursor: pointer;
 }
-#divBoxTool button svg {
+.is-box-tool button svg {
   fill: #fff !important;
 }
-#divBoxTool button#btnEditBox {
+.is-box-tool button.is-box-edit {
   background: rgb(0, 172, 214);
 }
-#divBoxTool button#btnEditModule {
+.is-box-tool button.is-module-edit {
   background: #FF9800;
 }
 
@@ -483,6 +485,22 @@
     transform: scale(1);
   }
 }
+.section-active {
+  animation-name: section-active-anim;
+  animation-duration: 1s;
+}
+
+@keyframes section-active-anim {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 .page-overlay {
   background: rgba(0, 0, 0, 0.0001);
   position: fixed;
@@ -538,3 +556,54 @@
 .is-wrapper .is-builder {
   transition: unset;
 }
+
+.box-hover {
+  outline: 1px solid #00da89;
+  outline-offset: -1px;
+}
+
+.is-section:not(.box-space) .box-hover .is-overlay,
+.is-section:not(.box-space).box-hover .is-overlay {
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+}
+
+.box-active .is-container {
+  border: rgba(0, 0, 0, 0.1) 1px solid;
+}
+
+.box-active {
+  outline: 1px solid #00da89;
+  outline-offset: -1px;
+}
+
+.is-section:not(.box-space) .box-active .is-overlay,
+.is-section:not(.box-space).box-active .is-overlay {
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+}
+
+.section-active {
+  outline: 1px solid #00da89;
+  outline-offset: -1px;
+}
+
+.is-section:not(.box-space).section-active .is-overlay {
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  right: 1px;
+}
+
+.content-edit .is-section-tool,
+.content-edit .is-box-tool {
+  display: none !important;
+}
+
+.content-edit .box-hover {
+  outline: none !important;
+}