@innovastudio/contentbuilder 1.3.86 → 1.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.86",
+  "version": "1.4.0",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -113,7 +113,8 @@ button:focus-visible {
   }
 }
 .sortable-drag {
-  background: transparent;
+  background-image: none !important;
+  background-color: transparent !important;
   outline: none !important;
 }
 .sortable-drag * {
@@ -2461,27 +2462,32 @@ button:focus-visible {
   margin: 15px 20px 13px 0;
   outline-offset: 2px;
 }
-#_cbhtml .is-modal.columnsettings .is-modal-bar,
-.is-ui .is-modal.columnsettings .is-modal-bar {
+#_cbhtml .is-modal.columnsettings .is-modal-bar, #_cbhtml .is-modal.rowsettings .is-modal-bar,
+.is-ui .is-modal.columnsettings .is-modal-bar,
+.is-ui .is-modal.rowsettings .is-modal-bar {
   background-color: #fafafa;
 }
-#_cbhtml .is-modal.columnsettings .is-modal-content,
-.is-ui .is-modal.columnsettings .is-modal-content {
+#_cbhtml .is-modal.columnsettings .is-modal-content, #_cbhtml .is-modal.rowsettings .is-modal-content,
+.is-ui .is-modal.columnsettings .is-modal-content,
+.is-ui .is-modal.rowsettings .is-modal-content {
   width: 380px !important;
   min-height: 435px;
   padding: 0px !important;
 }
-#_cbhtml .is-modal.columnsettings.active,
-.is-ui .is-modal.columnsettings.active {
+#_cbhtml .is-modal.columnsettings.active, #_cbhtml .is-modal.rowsettings.active,
+.is-ui .is-modal.columnsettings.active,
+.is-ui .is-modal.rowsettings.active {
   display: flex;
 }
-#_cbhtml .is-modal.columnsettings > div:not(.is-draggable),
-.is-ui .is-modal.columnsettings > div:not(.is-draggable) {
+#_cbhtml .is-modal.columnsettings > div:not(.is-draggable), #_cbhtml .is-modal.rowsettings > div:not(.is-draggable),
+.is-ui .is-modal.columnsettings > div:not(.is-draggable),
+.is-ui .is-modal.rowsettings > div:not(.is-draggable) {
   width: 100%;
   margin-top: 30px;
 }
-#_cbhtml .is-modal.columnsettings button,
-.is-ui .is-modal.columnsettings button {
+#_cbhtml .is-modal.columnsettings button, #_cbhtml .is-modal.rowsettings button,
+.is-ui .is-modal.columnsettings button,
+.is-ui .is-modal.rowsettings button {
   width: auto;
   height: 35px;
   font-size: 10px;
@@ -2492,135 +2498,161 @@ button:focus-visible {
   border: none;
   outline-offset: -2px;
 }
-#_cbhtml .is-modal.columnsettings button:focus,
-.is-ui .is-modal.columnsettings button:focus {
+#_cbhtml .is-modal.columnsettings button:focus, #_cbhtml .is-modal.rowsettings button:focus,
+.is-ui .is-modal.columnsettings button:focus,
+.is-ui .is-modal.rowsettings button:focus {
   border-radius: 2px;
 }
-#_cbhtml .is-modal.columnsettings button.is-btn-color,
-.is-ui .is-modal.columnsettings button.is-btn-color {
+#_cbhtml .is-modal.columnsettings button.is-btn-color, #_cbhtml .is-modal.rowsettings button.is-btn-color,
+.is-ui .is-modal.columnsettings button.is-btn-color,
+.is-ui .is-modal.rowsettings button.is-btn-color {
   width: 35px;
   height: 35px;
   padding: 0;
   background: rgba(255, 255, 255, 0.2);
   border: rgba(0, 0, 0, 0.09) 1px solid;
 }
-#_cbhtml .is-modal.columnsettings button span,
-.is-ui .is-modal.columnsettings button span {
+#_cbhtml .is-modal.columnsettings button span, #_cbhtml .is-modal.rowsettings button span,
+.is-ui .is-modal.columnsettings button span,
+.is-ui .is-modal.rowsettings button span {
   margin-left: 5px;
 }
-#_cbhtml .is-modal.columnsettings button svg,
-.is-ui .is-modal.columnsettings button svg {
+#_cbhtml .is-modal.columnsettings button svg, #_cbhtml .is-modal.rowsettings button svg,
+.is-ui .is-modal.columnsettings button svg,
+.is-ui .is-modal.rowsettings button svg {
   width: 12px;
   height: 12px;
   flex: none;
 }
-#_cbhtml .is-modal.columnsettings button.input-cell-bgimage,
-.is-ui .is-modal.columnsettings button.input-cell-bgimage {
+#_cbhtml .is-modal.columnsettings button.input-cell-bgimage, #_cbhtml .is-modal.rowsettings button.input-cell-bgimage,
+.is-ui .is-modal.columnsettings button.input-cell-bgimage,
+.is-ui .is-modal.rowsettings button.input-cell-bgimage {
   margin-right: 1px;
 }
-#_cbhtml .is-modal.columnsettings button.input-cell-bgimage svg,
-.is-ui .is-modal.columnsettings button.input-cell-bgimage svg {
+#_cbhtml .is-modal.columnsettings button.input-cell-bgimage svg, #_cbhtml .is-modal.rowsettings button.input-cell-bgimage svg,
+.is-ui .is-modal.columnsettings button.input-cell-bgimage svg,
+.is-ui .is-modal.rowsettings button.input-cell-bgimage svg {
   width: 14px;
   height: 14px;
 }
-#_cbhtml .is-modal.columnsettings button.input-cell-bgimageadjust,
-.is-ui .is-modal.columnsettings button.input-cell-bgimageadjust {
-  width: 40px;
-}
-#_cbhtml .is-modal.columnsettings .cell-bgimage-preview,
-.is-ui .is-modal.columnsettings .cell-bgimage-preview {
+#_cbhtml .is-modal.columnsettings .cell-bgimage-preview, #_cbhtml .is-modal.rowsettings .cell-bgimage-preview,
+.is-ui .is-modal.columnsettings .cell-bgimage-preview,
+.is-ui .is-modal.rowsettings .cell-bgimage-preview {
   max-width: 120px;
 }
-#_cbhtml .is-modal.columnsettings .cell-bgimage-preview img,
-.is-ui .is-modal.columnsettings .cell-bgimage-preview img {
+#_cbhtml .is-modal.columnsettings .cell-bgimage-preview img, #_cbhtml .is-modal.rowsettings .cell-bgimage-preview img,
+.is-ui .is-modal.columnsettings .cell-bgimage-preview img,
+.is-ui .is-modal.rowsettings .cell-bgimage-preview img {
   max-width: 100%;
   max-height: 100%;
 }
 #_cbhtml .is-modal.columnsettings .div-content-padding,
-#_cbhtml .is-modal.columnsettings .div-content-height,
+#_cbhtml .is-modal.columnsettings .div-content-height, #_cbhtml .is-modal.rowsettings .div-content-padding,
+#_cbhtml .is-modal.rowsettings .div-content-height,
 .is-ui .is-modal.columnsettings .div-content-padding,
-.is-ui .is-modal.columnsettings .div-content-height {
+.is-ui .is-modal.columnsettings .div-content-height,
+.is-ui .is-modal.rowsettings .div-content-padding,
+.is-ui .is-modal.rowsettings .div-content-height {
   display: flex;
 }
 #_cbhtml .is-modal.columnsettings .div-content-padding button,
-#_cbhtml .is-modal.columnsettings .div-content-height button,
+#_cbhtml .is-modal.columnsettings .div-content-height button, #_cbhtml .is-modal.rowsettings .div-content-padding button,
+#_cbhtml .is-modal.rowsettings .div-content-height button,
 .is-ui .is-modal.columnsettings .div-content-padding button,
-.is-ui .is-modal.columnsettings .div-content-height button {
+.is-ui .is-modal.columnsettings .div-content-height button,
+.is-ui .is-modal.rowsettings .div-content-padding button,
+.is-ui .is-modal.rowsettings .div-content-height button {
   width: 40px;
   border: transparent 1px solid;
 }
 #_cbhtml .is-modal.columnsettings .div-content-padding button svg,
-#_cbhtml .is-modal.columnsettings .div-content-height button svg,
+#_cbhtml .is-modal.columnsettings .div-content-height button svg, #_cbhtml .is-modal.rowsettings .div-content-padding button svg,
+#_cbhtml .is-modal.rowsettings .div-content-height button svg,
 .is-ui .is-modal.columnsettings .div-content-padding button svg,
-.is-ui .is-modal.columnsettings .div-content-height button svg {
+.is-ui .is-modal.columnsettings .div-content-height button svg,
+.is-ui .is-modal.rowsettings .div-content-padding button svg,
+.is-ui .is-modal.rowsettings .div-content-height button svg {
   flex: none;
 }
-#_cbhtml .is-modal.columnsettings .div-content-padding-pos,
-.is-ui .is-modal.columnsettings .div-content-padding-pos {
+#_cbhtml .is-modal.columnsettings .div-content-padding-pos, #_cbhtml .is-modal.rowsettings .div-content-padding-pos,
+.is-ui .is-modal.columnsettings .div-content-padding-pos,
+.is-ui .is-modal.rowsettings .div-content-padding-pos {
   display: flex;
 }
-#_cbhtml .is-modal.columnsettings .div-content-padding-pos button,
-.is-ui .is-modal.columnsettings .div-content-padding-pos button {
+#_cbhtml .is-modal.columnsettings .div-content-padding-pos button, #_cbhtml .is-modal.rowsettings .div-content-padding-pos button,
+.is-ui .is-modal.columnsettings .div-content-padding-pos button,
+.is-ui .is-modal.rowsettings .div-content-padding-pos button {
   width: 75px;
   padding-left: 15px;
   padding-right: 15px;
   border: transparent 1px solid;
 }
-#_cbhtml .is-modal.columnsettings .div-content-padding-pos button svg,
-.is-ui .is-modal.columnsettings .div-content-padding-pos button svg {
+#_cbhtml .is-modal.columnsettings .div-content-padding-pos button svg, #_cbhtml .is-modal.rowsettings .div-content-padding-pos button svg,
+.is-ui .is-modal.columnsettings .div-content-padding-pos button svg,
+.is-ui .is-modal.rowsettings .div-content-padding-pos button svg {
   flex: none;
 }
-#_cbhtml .is-modal.columnsettings .div-content-textcolor,
-.is-ui .is-modal.columnsettings .div-content-textcolor {
+#_cbhtml .is-modal.columnsettings .div-content-textcolor, #_cbhtml .is-modal.rowsettings .div-content-textcolor,
+.is-ui .is-modal.columnsettings .div-content-textcolor,
+.is-ui .is-modal.rowsettings .div-content-textcolor {
   display: flex;
 }
-#_cbhtml .is-modal.columnsettings .div-content-textcolor button,
-.is-ui .is-modal.columnsettings .div-content-textcolor button {
+#_cbhtml .is-modal.columnsettings .div-content-textcolor button, #_cbhtml .is-modal.rowsettings .div-content-textcolor button,
+.is-ui .is-modal.columnsettings .div-content-textcolor button,
+.is-ui .is-modal.rowsettings .div-content-textcolor button {
   width: 40px;
   border: transparent 1px solid;
 }
-#_cbhtml .is-modal.columnsettings .div-content-textcolor button[data-command=dark],
-.is-ui .is-modal.columnsettings .div-content-textcolor button[data-command=dark] {
+#_cbhtml .is-modal.columnsettings .div-content-textcolor button[data-command=dark], #_cbhtml .is-modal.rowsettings .div-content-textcolor button[data-command=dark],
+.is-ui .is-modal.columnsettings .div-content-textcolor button[data-command=dark],
+.is-ui .is-modal.rowsettings .div-content-textcolor button[data-command=dark] {
   width: auto;
   background-color: #f7f7f7;
   color: #111;
 }
-#_cbhtml .is-modal.columnsettings .div-content-textcolor button[data-command=light],
-.is-ui .is-modal.columnsettings .div-content-textcolor button[data-command=light] {
+#_cbhtml .is-modal.columnsettings .div-content-textcolor button[data-command=light], #_cbhtml .is-modal.rowsettings .div-content-textcolor button[data-command=light],
+.is-ui .is-modal.columnsettings .div-content-textcolor button[data-command=light],
+.is-ui .is-modal.rowsettings .div-content-textcolor button[data-command=light] {
   width: auto;
   background-color: #333;
   color: #f7f7f7;
 }
-#_cbhtml .is-modal.columnsettings .div-content-position,
-.is-ui .is-modal.columnsettings .div-content-position {
+#_cbhtml .is-modal.columnsettings .div-content-position, #_cbhtml .is-modal.rowsettings .div-content-position,
+.is-ui .is-modal.columnsettings .div-content-position,
+.is-ui .is-modal.rowsettings .div-content-position {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   width: 184px;
   padding: 0;
 }
-#_cbhtml .is-modal.columnsettings .div-content-position button,
-.is-ui .is-modal.columnsettings .div-content-position button {
+#_cbhtml .is-modal.columnsettings .div-content-position button, #_cbhtml .is-modal.rowsettings .div-content-position button,
+.is-ui .is-modal.columnsettings .div-content-position button,
+.is-ui .is-modal.rowsettings .div-content-position button {
   width: 30px;
   height: 36px;
   border: transparent 1px solid;
 }
-#_cbhtml .is-modal.columnsettings .div-content-position button svg,
-.is-ui .is-modal.columnsettings .div-content-position button svg {
+#_cbhtml .is-modal.columnsettings .div-content-position button svg, #_cbhtml .is-modal.rowsettings .div-content-position button svg,
+.is-ui .is-modal.columnsettings .div-content-position button svg,
+.is-ui .is-modal.rowsettings .div-content-position button svg {
   flex: none;
 }
-#_cbhtml .is-modal.columnsettings .image-src,
-.is-ui .is-modal.columnsettings .image-src {
+#_cbhtml .is-modal.columnsettings .image-src, #_cbhtml .is-modal.rowsettings .image-src,
+.is-ui .is-modal.columnsettings .image-src,
+.is-ui .is-modal.rowsettings .image-src {
   display: flex;
 }
-#_cbhtml .is-modal.columnsettings .image-src > button,
-.is-ui .is-modal.columnsettings .image-src > button {
+#_cbhtml .is-modal.columnsettings .image-src > button, #_cbhtml .is-modal.rowsettings .image-src > button,
+.is-ui .is-modal.columnsettings .image-src > button,
+.is-ui .is-modal.rowsettings .image-src > button {
   background: transparent !important;
   width: 50px;
   height: 43px;
 }
-#_cbhtml .is-modal.columnsettings #divCellClick p,
-.is-ui .is-modal.columnsettings #divCellClick p {
+#_cbhtml .is-modal.columnsettings #divCellClick p, #_cbhtml .is-modal.rowsettings #divCellClick p,
+.is-ui .is-modal.columnsettings #divCellClick p,
+.is-ui .is-modal.rowsettings #divCellClick p {
   font-size: 13px;
   line-height: 1.7;
 }
@@ -3943,6 +3975,13 @@ button:focus-visible {
   color: #0096f1;
   background: #f0f0f0;
 }
+#_cbhtml .elementstyles div.is-separator,
+.is-ui .elementstyles div.is-separator {
+  width: 100%;
+  border-top: #f0f0f0 1px solid;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
 #_cbhtml .elementstyles .is-settings,
 .is-ui .elementstyles .is-settings {
   margin-top: 7px;
@@ -4001,6 +4040,16 @@ button:focus-visible {
   margin: 0;
   border-radius: 1px;
 }
+#_cbhtml .elementstyles .is-settings .elm-bgimage-preview,
+.is-ui .elementstyles .is-settings .elm-bgimage-preview {
+  max-width: 120px;
+  min-height: unset;
+}
+#_cbhtml .elementstyles .is-settings .elm-bgimage-preview img,
+.is-ui .elementstyles .is-settings .elm-bgimage-preview img {
+  max-width: 100%;
+  max-height: 100%;
+}
 #_cbhtml .elementstyles #divElementMore,
 .is-ui .elementstyles #divElementMore {
   top: 50px;
@@ -4401,6 +4450,12 @@ button:focus-visible {
 #_cbhtml .is-pop.rowmore button:hover {
   background-color: rgba(0, 0, 0, 0.03) !important;
 }
+#_cbhtml .is-pop.rowmore div.is-separator {
+  width: 100%;
+  border-top: #f0f0f0 1px solid;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
 #_cbhtml .is-pop.elmmore {
   flex-direction: column;
 }
@@ -4789,14 +4844,6 @@ button:focus-visible {
   right: auto;
   left: -40px;
 }
-.is-builder.builder-active > div:not(.row-active) {
-  border-right: 120px rgba(0, 0, 0, 0) solid;
-  margin-right: -120px;
-}
-.is-builder[leftrowtool].builder-active > div:not(.row-active) {
-  border-left: 120px rgba(0, 0, 0, 0) solid;
-  margin-left: -120px;
-}
 .is-builder[rowoutline] .row-outline {
   outline: none;
 }
@@ -5350,3 +5397,17 @@ button:focus-visible {
     margin-top: -200px;
   }
 }
+.relative {
+  position: relative;
+}
+
+.is-row-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+  user-select: none;
+}