@innovastudio/contentbuilder 1.5.60 → 1.5.62

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.60",
+  "version": "1.5.62",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -263,6 +263,92 @@ button:focus-visible {
   .rte-paragraph-options,
   .rte-zoom-options
   */
+  /*
+  .pickgradientcolor {
+      flex-direction: column;
+      width: 300px;
+      padding: 15px;
+      box-sizing: border-box;
+      .is-settings {
+          margin-bottom: 15px;
+          & > div {
+              display: flex;
+              align-items: center;
+              height: 50px;
+              &.is-label {
+                  height: auto;
+                  font-family: sans-serif;
+                  font-size: 13px;
+                  font-weight: 300;
+                  letter-spacing: 1px;
+                  margin: 10px 0 3px;
+              }
+          }
+          button { 
+              width: auto; 
+              height: 37px; 
+              font-size: 10px;
+              line-height: 1;
+              text-transform: uppercase;
+              padding: 1px 20px;
+              box-sizing: border-box;
+              border: none;
+              outline-offset: -2px;
+              &.is-btn-color {
+                  width: 35px;
+                  height: 35px;
+                  padding: 0;
+                  background: $ui-modal-pickcolor-button-background;
+                  border: $ui-modal-pickgradient-button-border;
+              }
+              .is-elmgrad-remove {
+                  position: absolute;
+                  top: 0px;
+                  right: 0px;
+                  width: 20px;
+                  height: 20px;
+                  background: $ui-modal-pickgradient-remove-button-background;
+                  color: $ui-modal-pickgradient-remove-button-color;
+                  line-height: 20px;
+                  text-align: center;
+                  font-size: 12px;
+                  cursor: pointer;
+                  display: none;
+              }
+              &[data-elmgradient].active .is-elmgrad-remove {
+                  display:block;
+              }
+          }
+          label {
+              font-size: 13px;
+              color: inherit;
+          }
+      } //.is-settings
+
+      button.input-gradient-clear,
+      button.input-gradient-clear:hover {
+          border: transparent 1px solid;
+          background-color: transparent;
+      }
+
+      .div-gradients {
+          button{
+              width:35px;
+              height:35px;
+              margin: 0;
+              padding:0;
+              border:none;
+              transition: none;
+              outline: none;
+              border-radius: 0px;
+
+              &:focus {
+                  border: white 2px solid;
+              }
+          }
+      }
+  }
+  */
 }
 #_cbhtml p,
 .is-ui p {
@@ -435,7 +521,7 @@ button:focus-visible {
   border: 1px solid #f2f2f2;
   box-shadow: 4px 17px 20px 0px rgba(0, 0, 0, 0.08);
   outline: none;
-  border-radius: 5px;
+  border-radius: 7px;
   overflow: hidden;
 }
 #_cbhtml .is-pop:hover,
@@ -681,7 +767,7 @@ button:focus-visible {
   color: #000;
   background: #fff;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 9px 0px;
-  border-radius: 3px;
+  border-radius: 7px;
   overflow: hidden;
 }
 #_cbhtml .is-rte-tool div[role=button],
@@ -2197,7 +2283,7 @@ button:focus-visible {
   background: #fff;
   border: 1px solid #e3e3e3;
   box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.08);
-  border-radius: 5px;
+  border-radius: 7px;
   overflow: hidden;
 }
 #_cbhtml .is-modal .is-modal-content,
@@ -2217,7 +2303,7 @@ button:focus-visible {
   width: 100%;
   padding: 25px 25px;
   box-sizing: border-box;
-  border-radius: 5px;
+  border-radius: 7px;
   overflow: hidden;
 }
 #_cbhtml .is-modal.is-modal-full > div:not(.is-modal-overlay),
@@ -4587,95 +4673,171 @@ button:focus-visible {
 }
 #_cbhtml .pickgradientcolor,
 .is-ui .pickgradientcolor {
+  width: 380px;
   flex-direction: column;
-  width: 207px;
-  padding: 15px;
+  padding: 10px 10px 11px;
   box-sizing: border-box;
 }
-#_cbhtml .pickgradientcolor .is-settings,
-.is-ui .pickgradientcolor .is-settings {
-  margin-bottom: 15px;
+#_cbhtml .pickgradientcolor .div-presets,
+.is-ui .pickgradientcolor .div-presets {
+  display: flex;
+  flex-flow: wrap;
+  gap: 10px;
+}
+#_cbhtml .pickgradientcolor .div-presets .btn-graditem,
+.is-ui .pickgradientcolor .div-presets .btn-graditem {
+  width: 82px;
+  height: 82px;
+  border-radius: 5px;
+}
+#_cbhtml .pickgradientcolor .gradient-preview,
+.is-ui .pickgradientcolor .gradient-preview {
+  width: 140px;
+  height: 140px;
+  margin: 20px 0;
+  box-shadow: 0px 0px 0px 1px rgba(161, 161, 161, 0.27);
+  display: none;
 }
-#_cbhtml .pickgradientcolor .is-settings > div,
-.is-ui .pickgradientcolor .is-settings > div {
+#_cbhtml .pickgradientcolor .label-saved,
+.is-ui .pickgradientcolor .label-saved {
+  margin-top: 20px;
+}
+#_cbhtml .pickgradientcolor .div-saved,
+.is-ui .pickgradientcolor .div-saved {
   display: flex;
-  align-items: center;
-  height: 50px;
+  flex-flow: wrap;
+  gap: 10px;
+  margin-top: 20px;
 }
-#_cbhtml .pickgradientcolor .is-settings > div.is-label,
-.is-ui .pickgradientcolor .is-settings > div.is-label {
-  height: auto;
-  font-family: sans-serif;
-  font-size: 13px;
-  font-weight: 300;
-  letter-spacing: 1px;
-  margin: 10px 0 3px;
+#_cbhtml .pickgradientcolor .div-saved div,
+.is-ui .pickgradientcolor .div-saved div {
+  width: 82px;
+  height: 82px;
+  position: relative;
 }
-#_cbhtml .pickgradientcolor .is-settings button,
-.is-ui .pickgradientcolor .is-settings button {
-  width: auto;
-  height: 37px;
-  font-size: 10px;
-  line-height: 1;
-  text-transform: uppercase;
-  padding: 1px 20px;
-  box-sizing: border-box;
-  border: none;
-  outline-offset: -2px;
+#_cbhtml .pickgradientcolor .div-saved div .btn-graditem,
+.is-ui .pickgradientcolor .div-saved div .btn-graditem {
+  width: 82px;
+  height: 82px;
+  border-radius: 5px;
 }
-#_cbhtml .pickgradientcolor .is-settings button.is-btn-color,
-.is-ui .pickgradientcolor .is-settings 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 .pickgradientcolor .div-saved div .btn-remove,
+.is-ui .pickgradientcolor .div-saved div .btn-remove {
+  width: 19px;
+  height: 19px;
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: #fff;
+  border-radius: 50%;
+  border: rgba(0, 0, 0, 0.6705882353) 1px solid;
+}
+#_cbhtml .pickgradientcolor .div-saved div .btn-remove svg,
+.is-ui .pickgradientcolor .div-saved div .btn-remove svg {
+  color: #000;
+}
+#_cbhtml .pickgradientcolor .div-sort,
+.is-ui .pickgradientcolor .div-sort {
+  display: flex;
+  gap: 28px;
+  flex-flow: wrap;
+  margin-top: 20px;
+}
+#_cbhtml .pickgradientcolor .div-sort div,
+.is-ui .pickgradientcolor .div-sort div {
+  width: 44px;
+  height: 44px;
+  position: relative;
+}
+#_cbhtml .pickgradientcolor .div-sort div .btn-colorstop,
+.is-ui .pickgradientcolor .div-sort div .btn-colorstop {
+  width: 44px;
+  height: 44px;
+  border-radius: 4px;
+  border: 1px solid rgba(197, 197, 197, 0.27);
 }
-#_cbhtml .pickgradientcolor .is-settings button .is-elmgrad-remove,
-.is-ui .pickgradientcolor .is-settings button .is-elmgrad-remove {
+#_cbhtml .pickgradientcolor .div-sort div .btn-remove,
+.is-ui .pickgradientcolor .div-sort div .btn-remove {
+  width: 19px;
+  height: 19px;
   position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 20px;
-  height: 20px;
-  background: rgba(95, 94, 94, 0.26);
-  color: #fff;
-  line-height: 20px;
-  text-align: center;
-  font-size: 12px;
-  cursor: pointer;
-  display: none;
+  top: -8px;
+  right: -8px;
+  background: #fff;
+  border-radius: 50%;
+  border: rgba(0, 0, 0, 0.6705882353) 1px solid;
 }
-#_cbhtml .pickgradientcolor .is-settings button[data-elmgradient].active .is-elmgrad-remove,
-.is-ui .pickgradientcolor .is-settings button[data-elmgradient].active .is-elmgrad-remove {
-  display: block;
+#_cbhtml .pickgradientcolor .div-sort div .btn-remove svg,
+.is-ui .pickgradientcolor .div-sort div .btn-remove svg {
+  color: #000;
 }
-#_cbhtml .pickgradientcolor .is-settings label,
-.is-ui .pickgradientcolor .is-settings label {
-  font-size: 13px;
-  color: inherit;
+#_cbhtml .pickgradientcolor .div-add,
+.is-ui .pickgradientcolor .div-add {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-#_cbhtml .pickgradientcolor button.input-gradient-clear,
-#_cbhtml .pickgradientcolor button.input-gradient-clear:hover,
-.is-ui .pickgradientcolor button.input-gradient-clear,
-.is-ui .pickgradientcolor button.input-gradient-clear:hover {
-  border: transparent 1px solid;
-  background-color: transparent;
+#_cbhtml .pickgradientcolor .div-add .btn-clear,
+.is-ui .pickgradientcolor .div-add .btn-clear {
+  width: 44px;
+  height: 44px;
+  border-radius: 4px;
 }
-#_cbhtml .pickgradientcolor .div-gradients button,
-.is-ui .pickgradientcolor .div-gradients button {
-  width: 35px;
-  height: 35px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  transition: none;
-  outline: none;
-  border-radius: 0px;
+#_cbhtml .pickgradientcolor .div-add .btn-clear svg,
+.is-ui .pickgradientcolor .div-add .btn-clear svg {
+  width: 17px;
+  height: 17px;
 }
-#_cbhtml .pickgradientcolor .div-gradients button:focus,
-.is-ui .pickgradientcolor .div-gradients button:focus {
-  border: white 2px solid;
+#_cbhtml .pickgradientcolor .div-add .btn-addstop,
+.is-ui .pickgradientcolor .div-add .btn-addstop {
+  width: 44px;
+  height: 44px;
+  border-radius: 4px;
+}
+#_cbhtml .pickgradientcolor .div-add .btn-addstop svg,
+.is-ui .pickgradientcolor .div-add .btn-addstop svg {
+  width: 17px;
+  height: 17px;
+}
+#_cbhtml .pickgradientcolor .div-save,
+.is-ui .pickgradientcolor .div-save {
+  width: 100%;
+  margin-top: 20px;
+}
+#_cbhtml .pickgradientcolor .div-save .btn-save,
+.is-ui .pickgradientcolor .div-save .btn-save {
+  width: 100%;
+  height: 44px;
+  border-radius: 4px;
+}
+#_cbhtml .roundslider-container,
+.is-ui .roundslider-container {
+  width: 60px;
+  height: 60px;
+  position: relative;
+  flex: none;
+}
+#_cbhtml .roundslider-container .roundslider,
+.is-ui .roundslider-container .roundslider {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+  background-color: #f0f0f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#_cbhtml .roundslider-container .knob,
+.is-ui .roundslider-container .knob {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #007bff;
+  position: absolute;
+  cursor: pointer;
 }
 #_cbhtml .color-swatch,
 .is-ui .color-swatch {
@@ -4807,7 +4969,7 @@ button:focus-visible {
   box-sizing: border-box;
   padding: 0;
   outline: none;
-  border-radius: 2px;
+  border-radius: 3px;
   overflow: hidden;
 }
 .is-tool:hover {