@innovastudio/contentbox 1.0.21 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.21",
+  "version": "1.0.25",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,7 +38,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.51",
+    "@innovastudio/contentbuilder": "^1.0.54",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.css

@@ -142,6 +142,14 @@
   outline: none;
 }
 
+.is-sidebar-title {
+  font-family: sans-serif;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-weight: 400;
+}
+
 /* 
     Sidebar Panels: 
         #divSidebarSections, 
@@ -154,7 +162,7 @@
 }
 
 #divSidebarTypography {
-  max-width: 350px;
+  max-width: 360px;
 }
 
 #divSidebarSnippets > div:first-child {
@@ -165,16 +173,11 @@
   box-sizing: border-box;
 }
 
-#divSidebarSnippets > div:first-child > #divSnippetCat {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-}
-
-#divSidebarSnippets > div:first-child > #divSnippetCatOptions {
-  top: auto;
-  width: 262px;
+#divSidebarSnippets > div:first-child > .is-selectbox {
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: 400;
 }
 
 #divSidebarSections > div,
@@ -193,6 +196,26 @@
   box-sizing: border-box;
 }
 
+#divSidebarTypography label {
+  margin: 0 20px 0 0;
+  display: flex;
+  align-items: center;
+}
+#divSidebarTypography label input {
+  margin: 0;
+}
+#divSidebarTypography label span {
+  margin-left: 5px;
+  line-height: 1;
+}
+#divSidebarTypography #btnTypoClear {
+  width: 50px;
+  height: 40px;
+  display: flex;
+  background: transparent;
+  box-shadow: none;
+}
+
 #divSidebarSections {
   width: 100%;
   max-width: 460px;
@@ -208,39 +231,52 @@
     max-width: 930px;
   }
 }
+#divSelector {
+  position: absolute;
+  top: 120px;
+  right: 0;
+  width: 100%;
+  z-index: 2;
+  padding: 0 0 0 50px;
+  box-sizing: border-box;
+}
+
 #divStyles {
   border-top: #fff 40px solid;
-  padding: 20px 15px 0;
+  padding: 35px 15px 0;
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  top: 120px;
+  height: calc(100% - 120px);
+  position: absolute;
 }
 
 #divStyles > div {
   width: 100%;
   min-height: 255px;
-  margin: 0 0 15px;
-  display: inline-block;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
+  margin: 30px 0 70px;
+  display: flex;
+  box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0.08);
   position: relative;
   cursor: pointer;
 }
 
 #divStyles > div div {
+  text-align: center;
   transition: all 0.3s ease;
   position: absolute;
-  background: rgba(0, 0, 0, 0.3);
-  top: 0;
+  background: transparent;
+  top: -40px;
   right: 0;
   width: 100%;
   padding: 3px 10px;
   box-sizing: border-box;
   border: none;
   font-family: sans-serif;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #fff;
+  font-size: 12px;
+  line-height: 1.4;
   z-index: 1;
   -webkit-transition: all 0.16s ease;
   transition: all 0.16s ease;
@@ -250,7 +286,6 @@
   width: 100%;
   -webkit-transition: all 0.16s ease;
   transition: all 0.16s ease;
-  float: left;
 }
 
 #divStyles .is-overlay {
@@ -262,7 +297,7 @@
 }
 
 #divStyles > div .is-overlay:after {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.03);
   position: absolute;
   content: "";
   display: block;
@@ -356,12 +391,12 @@
   font-size: 13px;
 }
 
-#_cbhtml .is-modal.editsection button.cmd-section-height {
-  padding: 1px 15px;
-  width: 67px;
+#_cbhtml .is-modal.editsection button.cmd-section-height,
+#_cbhtml .is-modal.editsection button.cmd-box-spacing {
+  width: 50px;
 }
 
-.is-wrapper {
+cmd-box-spacing .is-wrapper {
   opacity: 0.01;
 }