@innovastudio/contentbuilder 1.2.4-rc1 → 1.2.4-rc4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.2.4-rc1",
+  "version": "1.2.4-rc4",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.18.2",
     "@babel/preset-env": "^7.15.6",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",

package/public/contentbuilder/contentbuilder.css

@@ -195,6 +195,13 @@ button:focus {
 
 #_cbhtml,
 .is-ui {
+  /*
+  * { 
+      font-family:sans-serif;
+      line-height: inherit;
+      // Prevent overide
+  } 
+  */
   font-family: sans-serif;
   font-size: 13px;
   letter-spacing: 1px;
@@ -825,7 +832,7 @@ button:focus {
 #_cbhtml .is-rte-pop.active,
 .is-ui .is-rte-pop.active {
   animation-name: formatting-slide-out;
-  animation-duration: 0.1s;
+  animation-duration: 100ms;
   animation-fill-mode: forwards;
 }
 @keyframes formatting-slide-out {
@@ -839,7 +846,7 @@ button:focus {
 #_cbhtml .is-rte-pop.deactive,
 .is-ui .is-rte-pop.deactive {
   animation-name: formatting-slide-in;
-  animation-duration: 0.1s;
+  animation-duration: 100ms;
   animation-fill-mode: forwards;
 }
 @keyframes formatting-slide-in {
@@ -931,8 +938,9 @@ button:focus {
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options button,
 .is-ui .is-rte-pop.rte-textsetting-options button {
-  width: 40px;
-  height: 30px;
+  width: 38px;
+  height: 28.2px;
+  margin: 1px;
   box-shadow: none;
   background: transparent;
 }
@@ -944,6 +952,10 @@ button:focus {
 .is-ui .is-rte-pop.rte-textsetting-options button:hover {
   background: whitesmoke;
 }
+#_cbhtml .is-rte-pop.rte-textsetting-options button:focus,
+.is-ui .is-rte-pop.rte-textsetting-options button:focus {
+  background: whitesmoke;
+}
 #_cbhtml .is-rte-pop.rte-textsetting-options.active,
 .is-ui .is-rte-pop.rte-textsetting-options.active {
   animation-name: textsetting-slide-out;
@@ -1024,6 +1036,17 @@ button:focus {
 .is-ui .is-rte-pop.rte-color-picker button:hover {
   background: transparent;
 }
+#_cbhtml .is-rte-pop.rte-color-picker button:focus,
+.is-ui .is-rte-pop.rte-color-picker button:focus {
+  outline: #3e93f7 2px solid;
+  outline-offset: 0;
+}
+#_cbhtml .is-rte-pop.rte-color-picker .color-default button,
+#_cbhtml .is-rte-pop.rte-color-picker .color-gradient button,
+.is-ui .is-rte-pop.rte-color-picker .color-default button,
+.is-ui .is-rte-pop.rte-color-picker .color-gradient button {
+  outline: none;
+}
 #_cbhtml .is-rte-pop.rte-color-picker.active,
 .is-ui .is-rte-pop.rte-color-picker.active {
   animation-name: colorpicker-slide-out;
@@ -1170,6 +1193,10 @@ button:focus {
 .is-ui .is-rte-pop.rte-customtag-options > div button:hover {
   background: whitesmoke;
 }
+#_cbhtml .is-rte-pop.rte-customtag-options > div button:focus,
+.is-ui .is-rte-pop.rte-customtag-options > div button:focus {
+  background: whitesmoke;
+}
 #_cbhtml .is-rte-pop.rte-zoom-options > div,
 .is-ui .is-rte-pop.rte-zoom-options > div {
   width: 224px;
@@ -1731,6 +1758,7 @@ button:focus {
 #_cbhtml .is-modal a:focus,
 .is-ui .is-modal a:focus {
   outline: #3e93f7 2px solid;
+  outline-offset: 0;
 }
 #_cbhtml .is-modal.active,
 .is-ui .is-modal.active {
@@ -1792,6 +1820,7 @@ button:focus {
 #_cbhtml .is-modal .form-upload-larger:focus-within,
 .is-ui .is-modal .form-upload-larger:focus-within {
   outline: #3e93f7 2px solid;
+  outline-offset: 0;
 }
 #_cbhtml .is-modal .is-modal-overlay,
 .is-ui .is-modal .is-modal-overlay {
@@ -2920,6 +2949,7 @@ button:focus {
 .is-ui button:focus,
 .is-ui .is-btn:focus {
   outline: #3e93f7 2px solid;
+  outline-offset: 0;
 }
 #_cbhtml button.fullwidth,
 #_cbhtml .is-btn.fullwidth,
@@ -2984,6 +3014,26 @@ button:focus {
   background: transparent;
   border: transparent 1px solid;
 }
+#_cbhtml textarea:not(.monaco-mouse-cursor-text),
+.is-ui textarea:not(.monaco-mouse-cursor-text) {
+  font-family: courier;
+  font-size: 15px;
+  line-height: 2;
+  letter-spacing: 1px;
+  margin: 0;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: #fafafa;
+  color: #121212;
+  border-radius: 1px;
+}
+#_cbhtml textarea:not(.monaco-mouse-cursor-text):focus,
+.is-ui textarea:not(.monaco-mouse-cursor-text):focus {
+  outline: #3e93f7 2px solid;
+  outline-offset: 0;
+  box-shadow: none;
+}
 #_cbhtml select,
 .is-ui select {
   font-size: 13px;
@@ -3010,6 +3060,7 @@ button:focus {
 #_cbhtml select:focus,
 .is-ui select:focus {
   outline: #3e93f7 2px solid;
+  outline-offset: 0;
   box-shadow: none;
 }
 #_cbhtml input[type=text],
@@ -3033,6 +3084,7 @@ button:focus {
 #_cbhtml input[type=text]:focus,
 .is-ui input[type=text]:focus {
   outline: #3e93f7 2px solid;
+  outline-offset: 0;
   box-shadow: none;
 }
 #_cbhtml input[type=text] [type=checkbox], #_cbhtml input[type=text] [type=radio],
@@ -3713,6 +3765,21 @@ button:focus {
   width: 100%;
   z-index: 1;
 }
+#_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-gradients button:focus,
+.is-ui .pickgradientcolor .div-gradients button:focus {
+  border: white 2px solid;
+}
 #_cbhtml .color-swatch,
 .is-ui .color-swatch {
   width: 100%;
@@ -3735,6 +3802,19 @@ button:focus {
   cursor: pointer;
   transition: all ease 0.3s;
 }
+#_cbhtml .color-swatch [data-color],
+.is-ui .color-swatch [data-color] {
+  width: 35px;
+  height: 31.5px;
+  margin: 0;
+  transition: none;
+  outline: none;
+  border-radius: 0px;
+}
+#_cbhtml .color-swatch [data-color]:focus,
+.is-ui .color-swatch [data-color]:focus {
+  border: rgba(255, 255, 255, 0.7) 2px solid;
+}
 #_cbhtml .color-gradient,
 .is-ui .color-gradient {
   width: 100%;
@@ -3757,6 +3837,18 @@ button:focus {
   cursor: pointer;
   transition: all ease 0.3s;
 }
+#_cbhtml .color-gradient [data-color],
+.is-ui .color-gradient [data-color] {
+  width: 35px;
+  height: 31.5px;
+  margin: 0;
+  transition: none;
+  outline: none;
+}
+#_cbhtml .color-gradient [data-color]:focus,
+.is-ui .color-gradient [data-color]:focus {
+  border: rgba(255, 255, 255, 0.7) 2px solid;
+}
 #_cbhtml .pickcolor button,
 .is-ui .pickcolor button {
   float: left;
@@ -3772,6 +3864,12 @@ button:focus {
   height: 35px;
   border: transparent 1px solid;
   margin: 0px;
+  transition: none;
+  outline: none;
+}
+#_cbhtml .pickcolor .color-default button:focus,
+.is-ui .pickcolor .color-default button:focus {
+  border: rgba(255, 255, 255, 0.7) 2px solid;
 }
 #_cbhtml .pickcolor button.clear,
 .is-ui .pickcolor button.clear {
@@ -3840,6 +3938,7 @@ button:focus {
 }
 .is-tool button:focus {
   outline: none !important;
+  outline-offset: 0;
 }
 .is-tool button svg {
   fill: #000;
@@ -4719,6 +4818,7 @@ button:focus {
   opacity: 0;
   transform: scale(0.7) translateZ(150px);
   transition: all 450ms ease-in-out;
+  outline: none;
 }
 .is-ui .is-lightbox.light {
   background-color: rgba(255, 255, 255, 0.97);
@@ -4774,7 +4874,6 @@ button:focus {
   background: none;
   border: none;
   cursor: pointer;
-  outline: none;
   box-shadow: none;
 }
 .is-ui .is-lightbox .cmd-lightbox-close svg {