@innovastudio/contentbox 1.6.67 → 1.6.69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.67",
+  "version": "1.6.69",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,8 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.56",
-    "js-beautify": "^1.14.0"
+    "@innovastudio/contentbuilder": "^1.5.59",
+    "js-beautify": "^1.14.0",
+    "sortablejs": "^1.15.2"
   }
 }

package/public/contentbox/contentbox.css

@@ -610,12 +610,247 @@ body.controlpanel .is-content-view.mobile {
 }
 
 /* /IFRAME */
+*, ::before, ::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
 /* UI */
 .builder-ui {
   font-family: sans-serif;
   font-size: 13px;
   font-weight: 300;
   letter-spacing: 0.8px;
+  /* content.css */
+  /* /content.css */
+}
+.builder-ui h1, .builder-ui h2, .builder-ui h3, .builder-ui h4, .builder-ui h5, .builder-ui h6 {
+  font-weight: 500;
+  line-height: 1.17;
+}
+.builder-ui h1 {
+  font-size: 2.5rem;
+  margin: 1.2rem 0 1.2rem;
+}
+.builder-ui h2 {
+  font-size: 2rem;
+  margin: 1rem 0 1rem;
+}
+.builder-ui h3 {
+  font-size: 1.73rem;
+  margin: 1rem 0 1rem;
+}
+.builder-ui h4 {
+  font-size: 1.5rem;
+  margin: 0.5rem 0 0.5rem;
+}
+.builder-ui h5 {
+  font-size: 1.25rem;
+  margin: 0.5rem 0 0.5rem;
+}
+.builder-ui h6 {
+  font-size: 1rem;
+  margin: 0.5rem 0 0.5rem;
+}
+.builder-ui p {
+  margin: 0.8rem 0 0.8rem;
+}
+.builder-ui ul, .builder-ui ol {
+  margin: 0 0 1rem;
+  padding-inline-start: 20px;
+}
+.builder-ui a {
+  color: #000;
+}
+.builder-ui .text-left {
+  text-align: left;
+}
+.builder-ui .text-center {
+  text-align: center;
+}
+.builder-ui .text-right {
+  text-align: right;
+}
+.builder-ui .text-justify {
+  text-align: justify;
+}
+.builder-ui .ml-0 {
+  margin-left: 0px;
+}
+.builder-ui .ml-1 {
+  margin-left: 0.25rem;
+}
+.builder-ui .ml-2 {
+  margin-left: 0.5rem;
+}
+.builder-ui .ml-3 {
+  margin-left: 0.75rem;
+}
+.builder-ui .ml-4 {
+  margin-left: 1rem;
+}
+.builder-ui .ml-5 {
+  margin-left: 1.25rem;
+}
+.builder-ui .ml-6 {
+  margin-left: 1.5rem;
+}
+.builder-ui .ml-8 {
+  margin-left: 2rem;
+}
+.builder-ui .ml-10 {
+  margin-left: 2.5rem;
+}
+.builder-ui .mr-0 {
+  margin-right: 0px;
+}
+.builder-ui .mr-1 {
+  margin-right: 0.25rem;
+}
+.builder-ui .mr-2 {
+  margin-right: 0.5rem;
+}
+.builder-ui .mr-3 {
+  margin-right: 0.75rem;
+}
+.builder-ui .mr-4 {
+  margin-right: 1rem;
+}
+.builder-ui .mr-5 {
+  margin-right: 1.25rem;
+}
+.builder-ui .mr-6 {
+  margin-right: 1.5rem;
+}
+.builder-ui .mr-8 {
+  margin-right: 2rem;
+}
+.builder-ui .mr-10 {
+  margin-right: 2.5rem;
+}
+.builder-ui .mt-0 {
+  margin-top: 0px;
+}
+.builder-ui .mt-1 {
+  margin-top: 0.25rem;
+}
+.builder-ui .mt-2 {
+  margin-top: 0.5rem;
+}
+.builder-ui .mt-3 {
+  margin-top: 0.75rem;
+}
+.builder-ui .mt-4 {
+  margin-top: 1rem;
+}
+.builder-ui .mt-5 {
+  margin-top: 1.25rem;
+}
+.builder-ui .mt-6 {
+  margin-top: 1.5rem;
+}
+.builder-ui .mt-8 {
+  margin-top: 2rem;
+}
+.builder-ui .mt-10 {
+  margin-top: 2.5rem;
+}
+.builder-ui .mb-0 {
+  margin-bottom: 0px;
+}
+.builder-ui .mb-1 {
+  margin-bottom: 0.25rem;
+}
+.builder-ui .mb-2 {
+  margin-bottom: 0.5rem;
+}
+.builder-ui .mb-3 {
+  margin-bottom: 0.75rem;
+}
+.builder-ui .mb-4 {
+  margin-bottom: 1rem;
+}
+.builder-ui .mb-5 {
+  margin-bottom: 1.25rem;
+}
+.builder-ui .mb-6 {
+  margin-bottom: 1.5rem;
+}
+.builder-ui .mb-8 {
+  margin-bottom: 2rem;
+}
+.builder-ui .mb-10 {
+  margin-bottom: 2.5rem;
+}
+.builder-ui .flex {
+  display: flex;
+}
+.builder-ui .block {
+  display: block;
+}
+.builder-ui .inline {
+  display: inline;
+}
+.builder-ui .inline-block {
+  display: inline-block;
+}
+.builder-ui .inline-flex {
+  display: inline-flex;
+}
+.builder-ui .flex-row {
+  flex-direction: row;
+}
+.builder-ui .flex-row-reverse {
+  flex-direction: row-reverse;
+}
+.builder-ui .flex-col {
+  flex-direction: column;
+}
+.builder-ui .flex-col-reverse {
+  flex-direction: column-reverse;
+}
+.builder-ui .flex-wrap {
+  flex-wrap: wrap;
+}
+.builder-ui .flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.builder-ui .flex-nowrap {
+  flex-wrap: nowrap;
+}
+.builder-ui .justify-start {
+  justify-content: flex-start;
+}
+.builder-ui .justify-end {
+  justify-content: flex-end;
+}
+.builder-ui .justify-center {
+  justify-content: center;
+}
+.builder-ui .justify-between {
+  justify-content: space-between;
+}
+.builder-ui .justify-around {
+  justify-content: space-around;
+}
+.builder-ui .justify-evenly {
+  justify-content: space-evenly;
+}
+.builder-ui .items-start {
+  align-items: flex-start;
+}
+.builder-ui .items-end {
+  align-items: flex-end;
+}
+.builder-ui .items-center {
+  align-items: center;
+}
+.builder-ui .items-baseline {
+  align-items: baseline;
+}
+.builder-ui .items-stretch {
+  align-items: stretch;
 }
 .builder-ui svg {
   width: 16px;
@@ -1112,9 +1347,13 @@ body.controlpanel .is-wrapper {
 }
 .builder-ui .is-controlpanel [class^=panel-] .subpanel {
   padding: 14px 24px 15px;
+  width: 100%;
+  box-sizing: border-box;
 }
 .builder-ui .is-controlpanel [class^=panel-] .last .subpanel {
   padding: 14px 24px 30px;
+  width: 100%;
+  box-sizing: border-box;
 }
 .builder-ui .is-controlpanel [class^=panel-] .subtitle {
   font-weight: 600;
@@ -1173,31 +1412,6 @@ body.controlpanel .is-wrapper {
 .builder-ui .is-controlpanel .panel-iframe .asset-preview div {
   margin-top: 0 !important;
 }
-.builder-ui .is-controlpanel .group.color-pick > div {
-  width: 36px;
-  display: flex;
-  padding: 1px;
-  align-items: center;
-}
-.builder-ui .is-controlpanel .group.color-pick > div button {
-  margin: 0;
-  border-radius: 6px;
-  z-index: 1;
-  width: 36px;
-  flex: none;
-  color: inherit;
-}
-.builder-ui .is-controlpanel .group.color-pick > div input {
-  width: 36px;
-  height: 34px;
-  border-radius: 6px;
-  font-weight: 200;
-  outline: none;
-  position: absolute;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-}
 .builder-ui .is-controlpanel .group.fontsizes, .builder-ui .is-controlpanel .group.fontweight, .builder-ui .is-controlpanel .group.linespacing, .builder-ui .is-controlpanel .group.letterspacing {
   width: 217px;
 }
@@ -1600,55 +1814,6 @@ body.controlpanel .is-wrapper {
   outline: none !important;
 }
 
-input.clr-color:focus {
-  border: #3e93f7 2px solid !important;
-}
-
-.clr-swatches button:after {
-  box-shadow: none !important;
-}
-
-.clr-swatches {
-  width: 100% !important;
-  margin: 0 9px 9px !important;
-}
-
-.clr-swatches div {
-  border-radius: 5px !important;
-  overflow: hidden !important;
-  width: 182px !important;
-  padding: 0 !important;
-}
-
-.clr-swatches button {
-  width: 30px !important;
-  height: 28px !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
-}
-
-.clr-swatches.sm button {
-  width: 26px !important;
-  height: 24px !important;
-}
-
-.clr-preview {
-  margin: 15px 0 0px 20px !important;
-}
-
-input.clr-color {
-  margin: 15px 20px 14px auto !important;
-}
-
-.clr-swatches button, .clr-preview:before, .clr-field button {
-  background-image: repeating-linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd), repeating-linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd) !important;
-}
-
-.clr-alpha, .clr-alpha div {
-  background-image: repeating-linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), repeating-linear-gradient(45deg, #bbb 25%, #fff 25%, #fff 75%, #bbb 75%, #bbb) !important;
-}
-
 .is-rangeslider {
   -webkit-appearance: none;
   width: 100%;
@@ -1999,9 +2164,6 @@ body.frame-center.controlpanel .is-content-view {
   background-color: rgb(24, 24, 24);
   border: #6f6f6f 1px solid;
 }
-.dark .builder-ui .is-controlpanel .group.color-pick > div button {
-  background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
-}
 .dark .builder-ui .is-controlpanel .panel-dialog {
   background-color: rgb(24, 24, 24);
 }
@@ -2407,6 +2569,8 @@ body.frame-center.controlpanel .is-content-view {
 
 #divStyles > div img {
   width: 100%;
+  height: auto;
+  min-height: 200px;
   -webkit-transition: all 0.16s ease;
   transition: all 0.16s ease;
 }