@innovastudio/contentbox 1.0.24 → 1.0.28

package/README.md

@@ -139,11 +139,17 @@ React and Vue project examples are provided in separate downloads in the user ar
 
 To start building a page, you can click the (+) button on the top left sidebar. This will open a selection of predesigned sections that you can add into your page.
 
-![Predesigned Sections](docs/predesigned-sections.png)
+![Simple Sections](docs/predesigned-sections.png)
+
+![Quick Start Sections](docs/predesigned-sections2.png)
+
+There are 2 predesigned section categories: 
+- Simple Start (to start from a basic/clean design)
+- Quick Start (to start with examples)
 
 The predesigned section files are located in the folder:
 
-assets/designs/
+**assets/designs/**
 
 It contains:
 - basic.js (a JSON file containing a list of simple designs)
@@ -229,13 +235,9 @@ A selection of typography styles is provided for you to choose to format your pa
 
 ![Typography Styles](docs/typography.png)
 
-The style can be used to format the entire page or just a specific section or a box area of your page. 
-
-If the page has one or more sections (or boxes) that have their own typography style, a modal dialog is opened for you to choose and replace all the sections' styles or keep the sections' style and format only the unstyled sections.
-
-![Apply options](docs/typography2.png)
+The style can be used to format the entire page or just a specific section of your page. 
 
-To apply the typography style for a specific section or box area, open the Box Settings dialog, select the 'Text' tab and click 'Change Style'.
+To apply the typography style to a specific box area, open the Box Settings dialog, select the 'Text' tab and click 'Change Style'.
 
 ![Apply to a specific section](docs/typography3.png)
 
@@ -243,7 +245,7 @@ This will re-open the typography selection and your selection will be applied to
 
 Typography style files are located in the folder:
 
-assets/styles/
+**assets/styles/**
 
 It contains all the css needed and its preview images. You can change its location using the **contentStylePath** parameter.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.24",
+  "version": "1.0.28",
   "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.57",
     "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, 
@@ -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,13 +231,27 @@
     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: 35px 15px 0;
   box-sizing: border-box;
-  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  top: 120px;
+  left: 50px;
+  width: calc(100% - 50px);
+  height: calc(100% - 120px);
+  position: absolute;
 }
 
 #divStyles > div {
@@ -355,12 +392,13 @@
   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,
+#_cbhtml .is-modal.editsection button.cmd-scroll-preset {
+  width: 50px;
 }
 
-.is-wrapper {
+cmd-box-spacing .is-wrapper {
   opacity: 0.01;
 }