@innovastudio/contentbox 1.0.26 → 1.0.30

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.26",
+  "version": "1.0.30",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,7 +38,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.55",
+    "@innovastudio/contentbuilder": "^1.0.61",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.css

@@ -70,7 +70,7 @@
   left: 0;
   width: 50px;
   height: 100vh;
-  background: rgba(255, 255, 255, 0.7) !important;
+  background: rgba(255, 255, 255, 0.97) !important;
   color: rgba(0, 0, 0, 0.8);
   border-right: rgba(0, 0, 0, 0.05) 1px solid;
   z-index: 10003;
@@ -162,7 +162,7 @@
 }
 
 #divSidebarTypography {
-  max-width: 360px;
+  max-width: 300px;
 }
 
 #divSidebarSnippets > div:first-child {
@@ -245,30 +245,31 @@
   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 {
   width: 100%;
-  min-height: 255px;
   margin: 30px 0 70px;
   display: flex;
+  border: rgba(205, 205, 205, 0.32) 1px solid;
   box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0.08);
   position: relative;
   cursor: pointer;
 }
 
-#divStyles > div div {
+#divStyles > div div:first-child {
   text-align: center;
   transition: all 0.3s ease;
   position: absolute;
   background: transparent;
-  top: -40px;
+  top: -45px;
   right: 0;
   width: 100%;
   padding: 3px 10px;
@@ -286,6 +287,7 @@
   width: 100%;
   -webkit-transition: all 0.16s ease;
   transition: all 0.16s ease;
+  image-rendering: -webkit-optimize-contrast;
 }
 
 #divStyles .is-overlay {
@@ -392,11 +394,40 @@
 }
 
 #_cbhtml .is-modal.editsection button.cmd-section-height,
-#_cbhtml .is-modal.editsection button.cmd-box-spacing {
-  width: 50px;
+#_cbhtml .is-modal.editsection button.cmd-box-spacing,
+#_cbhtml .is-modal.editsection button.cmd-scroll-preset {
+  width: 45px;
+}
+#_cbhtml .is-modal.editsection button.cmd-section-height svg,
+#_cbhtml .is-modal.editsection button.cmd-box-spacing svg,
+#_cbhtml .is-modal.editsection button.cmd-scroll-preset svg {
+  flex: none;
+  width: 10px;
+  height: 10px;
+}
+
+#_cbhtml .is-modal.editsection button.cmd-section-duplicate {
+  padding: 0 22px;
+}
+#_cbhtml .is-modal.editsection button.cmd-section-duplicate svg {
+  margin-left: -4px;
+}
+#_cbhtml .is-modal.editsection button.cmd-section-duplicate span {
+  margin-left: 5px;
+  font-size: 12px;
+  text-transform: none;
+}
+
+#_cbhtml .label-checkbox {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+#_cbhtml .label-checkbox input {
+  margin-right: 8px;
 }
 
-cmd-box-spacing .is-wrapper {
+.is-wrapper {
   opacity: 0.01;
 }