@innovastudio/contentbox 1.0.29 → 1.0.33

package/README.md

@@ -139,9 +139,9 @@ 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.
 
-![Simple Sections](docs/predesigned-sections.png)
+![Simple Start](docs/predesigned-sections.png)
 
-![Quick Start Sections](docs/predesigned-sections2.png)
+![Quick Start](docs/predesigned-sections2.png)
 
 There are 2 predesigned section categories: 
 - Simple Start (to start from a basic/clean design)
@@ -239,7 +239,7 @@ The style can be used to format the entire page or just a specific section of yo
 
 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)
+![Apply to a specific section](docs/typography2.png)
 
 This will re-open the typography selection and your selection will be applied to the chosen box area only.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.29",
+  "version": "1.0.33",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,7 +38,8 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.58",
+    "@ashthornton/asscroll": "^2.0.4",
+    "@innovastudio/contentbuilder": "^1.0.63",
     "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 {
@@ -256,20 +256,20 @@
 
 #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;
@@ -392,10 +392,20 @@
   font-size: 13px;
 }
 
+#_cbhtml .is-modal.editsection button {
+  width: auto;
+}
+#_cbhtml .is-modal.editsection button svg {
+  flex: none;
+  width: 10px;
+  height: 10px;
+}
+
 #_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;
+#_cbhtml .is-modal.editsection button.cmd-scroll-preset,
+#_cbhtml .is-modal.editsection button.cmd-section-duplicate {
+  width: 45px;
 }
 
 #_cbhtml .is-modal.editsection button.cmd-section-duplicate {
@@ -410,6 +420,15 @@
   text-transform: none;
 }
 
+#_cbhtml .label-checkbox {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+#_cbhtml .label-checkbox input {
+  margin-right: 8px;
+}
+
 .is-wrapper {
   opacity: 0.01;
 }