@innovastudio/contentbox 1.4.37 → 1.4.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.37",
+  "version": "1.4.38",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.42",
+    "@innovastudio/contentbuilder": "^1.3.52",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -75,7 +75,7 @@
   background: rgba(255, 255, 255, 0.97);
   color: rgba(0, 0, 0, 0.8);
   border-right: rgba(0, 0, 0, 0.05) 1px solid;
-  z-index: 10003;
+  z-index: 10004;
   opacity: 0.0001;
 }
 #_cbhtml .is-sidebar button.is-sidebar-button {
@@ -109,7 +109,7 @@
 }
 
 .is-sidebar-content {
-  z-index: 10002;
+  z-index: 10003;
   position: fixed;
   top: 0;
   left: 0;
@@ -479,6 +479,10 @@
 .is-wrapper.is-edit {
   padding-left: 61px;
 }
+.is-wrapper.is-container-edit > div.section-select, .is-wrapper.is-clean-edit > div.section-select {
+  overflow-x: unset !important;
+  overflow-y: unset !important;
+}
 .is-wrapper .transition-edit.is-section {
   transition: all 0.2s ease !important;
 }
@@ -489,6 +493,7 @@
 #_cbhtml {
   height: 0px;
   float: left;
+  margin-top: -100px;
 }
 
 .pace {
@@ -601,58 +606,133 @@
   transition: unset;
 }
 
-/* Navbar Fix */
-.is-wrapper.is-edit .is-section.is-section-navbar,
-.is-wrapper.is-edit .is-section.is-section-navbar .is-topbar {
-  left: 0;
-  margin-left: 61px;
-  width: calc(100% - 61px);
-}
-.is-wrapper.is-edit .is-section.is-section-navbar .is-topbar.static {
-  width: 100%;
-  margin-left: unset;
-}
+/*
 
+// Navbar Fix
+.is-wrapper {
+    &.is-edit {
+        .is-section.is-section-navbar,
+        .is-section.is-section-navbar .is-topbar {
+            left: 0;
+            margin-left: 61px;
+            width: calc(100% - 61px);
+        }
+        .is-section.is-section-navbar .is-topbar.static {
+            width: 100%;
+            margin-left: unset;
+        }
+    }
+}
+
+// protected section
 .is-section.protected .is-box-tool {
-  display: none !important;
-}
-
-.hard-select .is-box-tool {
-  display: none !important;
-}
-.hard-select .is-section-tool {
-  display: none !important;
-}
-.hard-select .box-select {
-  outline: #00da89 1px solid;
-  outline-offset: -1px;
-  z-index: 1;
-}
-.hard-select .box-select .is-box-tool {
-  display: flex !important;
-}
-.hard-select .box-select .is-overlay {
-  z-index: -1;
-}
-.hard-select .section-select .is-section-tool {
-  display: block !important;
-}
-
+    display: none !important;
+}
+
+// manual selection during animation edit
+.hard-select {
+    .is-box-tool {
+        display: none !important;
+    }
+    .is-section-tool {
+        display: none !important;
+    }
+    .box-select {
+        outline: #00da89 1px solid; // #6e50f2 //#00da89 (green)
+        outline-offset: -1px;
+        z-index:1;
+        .is-box-tool {
+            display: flex !important;
+        }
+        .is-overlay {
+            z-index: -1;
+        }
+    }
+    .section-select {
+        .is-section-tool {
+            display: block !important;
+        }
+    }
+
+}
+
+// drop block as section
 .is-wrapper > .sortable-ghost {
-  height: 40px !important;
-  min-height: unset !important;
-  background: rgba(204, 204, 204, 0.15) !important;
+    height: 40px !important;
+    min-height: unset !important;
+    background: rgba(204, 204, 204, 0.15) !important;
+}
+
+// toggle tool
+.is-wrapper.is-clean-edit {
+    &.hard-select .box-select .is-box-tool ,
+    .box-select .is-box-tool {
+        display: none !important;
+    }
+    &.hard-select .section-select .is-section-tool,
+    .section-select .is-section-tool {
+        display: none !important;
+    }
+    &.hard-select .box-select,
+    .box-select {
+        outline: none !important;
+    }
+}
+
+// clean UI for selection only
+.selection-only:not([data-skrollrr-off]) {
+    .is-wrapper {
+        &.hard-select .box-select .is-box-tool ,
+        .box-select .is-box-tool {
+            display: none !important;
+        }
+        &.hard-select .section-select .is-section-tool,
+        .section-select .is-section-tool {
+            display: none !important;
+        }
+        .is-rowadd-tool {
+            display: none !important;
+        }
+        .is-tool {
+            display: none !important;
+        }
+    }
+    .is-tool {
+        z-index: -10000 !important;
+    }
+}
+
+// section info
+.is-wrapper {
+    .is-section-info {
+        position: absolute;
+        z-index: 1;
+        top: 3px;
+        left: 3px;
+        display: none;
+        & > div {
+            width: auto;
+            height: auto;
+            padding: 5px 20px;
+            background-color:rgb(255 239 100);
+            color: #111;
+            font-family: sans-serif;
+            letter-spacing: 2px;
+            font-size: 17px;
+        }
+    }
+    .section-select .is-section-info {
+        display: block;
+    }
+}
+
+// To make editing possible on wide content
+.is-wrapper.is-edit .section-wide-250 .is-box-centered { 
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+.is-wrapper.is-edit .section-wide-250 .is-container > div > div { // To make col tool visible
+    max-height: 90vh;
 }
 
-.is-wrapper.is-clean-edit .hard-select .box-select .is-box-tool,
-.is-wrapper.is-clean-edit .box-select .is-box-tool {
-  display: none !important;
-}
-.is-wrapper.is-clean-edit .hard-select .section-select .is-section-tool,
-.is-wrapper.is-clean-edit .section-select .is-section-tool {
-  display: none !important;
-}
-.is-wrapper.is-clean-edit .hard-select .box-select,
-.is-wrapper.is-clean-edit .box-select {
-  outline: none !important;
-}
+*/