@innovastudio/contentbox 1.4.27 → 1.4.29

package/package.json

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

package/public/contentbox/contentbox.css

@@ -476,10 +476,15 @@
   /* setting display=none makes initial script may not work properly */
   transform-origin: top;
 }
-
 .is-wrapper.is-edit {
   padding-left: 60px;
 }
+.is-wrapper .transition-edit.is-section {
+  transition: all 0.2s ease !important;
+}
+.is-wrapper .transition-edit .is-box {
+  transition: all 0.2s ease !important;
+}
 
 #_cbhtml {
   height: 0px;

package/public/contentbox/contentbox.esm.js

@@ -3838,8 +3838,16 @@ class EditSection {
     btnSectionHeight.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        let val = btn.getAttribute('data-value');
-        this.sectionHeight(val);
+        let val = btn.getAttribute('data-value'); // this.sectionHeight(val);
+
+        const activeSection = this.builder.activeSection;
+        activeSection.classList.add('transition-edit');
+        setTimeout(() => {
+          this.sectionHeight(val);
+          setTimeout(() => {
+            activeSection.classList.remove('transition-edit');
+          }, 200);
+        }, 10);
         let btns = modalEditSection.querySelectorAll('.cmd-section-height');
         btns.forEach(btn => {
           dom$k.removeClass(btn, 'on');
@@ -4406,8 +4414,7 @@ class EditSection {
     } //Trigger Render event
 
 
-    this.builder.settings.onRender();
-    this.builder.scrollTo(activeSection, 600);
+    this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 600);
   }
 
   boxSpacing(s) {
@@ -10234,15 +10241,31 @@ class EditBox {
     modalEditBox.querySelector('#tabBoxGeneral').click();
     const btnBoxSmaller = modalEditBox.querySelector('.cmd-box-smaller');
     btnBoxSmaller.addEventListener('click', () => {
-      this.builder.editor.saveForUndo();
-      this.boxWidthSmaller(); //Trigger Change event
+      this.builder.editor.saveForUndo(); // this.boxWidthSmaller();
+
+      const activeSection = this.builder.activeSection;
+      activeSection.classList.add('transition-edit');
+      setTimeout(() => {
+        this.boxWidthSmaller();
+        setTimeout(() => {
+          activeSection.classList.remove('transition-edit');
+        }, 200);
+      }, 10); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnBoxLarger = modalEditBox.querySelector('.cmd-box-larger');
     btnBoxLarger.addEventListener('click', () => {
-      this.builder.editor.saveForUndo();
-      this.boxWidthLarger(); //Trigger Change event
+      this.builder.editor.saveForUndo(); // this.boxWidthLarger();
+
+      const activeSection = this.builder.activeSection;
+      activeSection.classList.add('transition-edit');
+      setTimeout(() => {
+        this.boxWidthLarger();
+        setTimeout(() => {
+          activeSection.classList.remove('transition-edit');
+        }, 200);
+      }, 10); //Trigger Change event
 
       this.builder.settings.onChange();
     });
@@ -86629,7 +86652,7 @@ class ContentStuff$1 {
         .is-tool.is-col-tool svg {
             width: 23px;
             height: 23px;
-            fill: #fff;
+            fill: #fff !important;
         }
         .is-tool.is-col-tool .cell-more svg {
             width: 14px;
@@ -86658,7 +86681,7 @@ class ContentStuff$1 {
         .is-builder[gray] .is-tool.is-col-tool svg {
             width: 18px;
             height: 18px;
-            fill: #000;
+            fill: #000 !important;
         }
         .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
             width: 12px;
@@ -88235,7 +88258,7 @@ class ContentBuilder {
         .is-tool.is-col-tool svg {
             width: 23px;
             height: 23px;
-            fill: #fff;
+            fill: #fff  !important;
         }
         .is-tool.is-col-tool .cell-more svg {
             width: 14px;
@@ -88266,7 +88289,7 @@ class ContentBuilder {
         .is-builder[gray] .is-tool.is-col-tool svg {
             width: 18px;
             height: 18px;
-            fill: #000;
+            fill: #000 !important;
         }
         .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
             width: 12px;