Adjust UI style

GrapesJS · Nov 30, 2016 · de1b6c0 · de1b6c0
1 parent 4a05f17
commit de1b6c0
Show file tree

Hide file tree

Showing 6 changed files with 345 additions and 383 deletions.
diff --git a/index.html b/index.html
@@ -10,61 +10,6 @@
 	<style>
 		body, html{ height: 100%; margin: 0;}
 	</style>
-	<style>
-    body, html{ height: 100%; margin: 0;}
-
-    .gjs-clm-tags .gjs-sm-title,
-    .gjs-sm-sector .gjs-sm-title{
-      border-top: none;
-    }
-
-    .gjs-clm-tags .gjs-clm-tag {
-      background-color: #4c9790; /*#008f73 #4c9790*/
-      border: none;
-      box-shadow: none;
-      padding: 5px 8px;
-      text-shadow: none;
-    }
-
-    .gjs-field {
-      background-color: rgba(0, 0, 0, 0.15);
-      box-shadow: none;
-    }
-    .gjs-btnt.gjs-pn-active, .gjs-pn-btn.gjs-pn-active{
-      box-shadow: none;
-    }
-
-    .gjs-btnt.gjs-pn-active, .gjs-color-active, .gjs-pn-btn.gjs-pn-active{
-      color: #35d7bb;
-    }
-
-    #gjs-rte-toolbar .gjs-rte-btn,
-    .gjs-btn-prim, .gjs-btnt,
-    .gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
-    .gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
-    .gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
-    .gjs-color-main, .gjs-mdl-dialog,
-    .gjs-off-prv, .gjs-pn-btn, .gjs-pn-panel,
-    .gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
-    .gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
-    .gjs-sm-sector .gjs-sm-stack #gjs-sm-add{
-      color: #a0aabf; /*#a0aabf #d0d6e2*/
-    }
-
-    #gjs-rte-toolbar, .gjs-bg-main,
-    .gjs-clm-select option,
-    .gjs-clm-tags .gjs-sm-colorp-c,
-    .gjs-editor, .gjs-mdl-dialog,
-    .gjs-nv-item .gjs-nv-title-c,
-    .gjs-off-prv, .gjs-pn-panel,
-    .gjs-select option,
-    .gjs-sm-sector .gjs-sm-colorp-c,
-    .gjs-sm-select option,
-    .gjs-sm-unit option,
-    .sp-container{
-      background-color: #373d49;
-    }
-  </style>
 	<body>
 
 		<div id="gjs" style="height:0px; overflow:hidden">

diff --git a/src/asset_manager/template/assets.html b/src/asset_manager/template/assets.html
@@ -1,7 +1,9 @@
 <div class="<%= pfx %>assets-cont">
   <div class="<%= pfx %>assets-header">
-    <form id="login-form" class="<%= pfx %>add-asset">
-      <input class="<%= ppfx %>input" placeholder="http://path/to/the/image.jpg" />
+    <form class="<%= pfx %>add-asset">
+      <div class="<%= ppfx %>field <%= pfx %>add-field">
+        <input placeholder="http://path/to/the/image.jpg" />
+      </div>
       <button class="<%= ppfx %>btn-prim">Add image</button>
       <div style="clear:both"></div>
     </form>
@@ -12,4 +14,4 @@
   </div>
   <div class="<%= pfx %>assets"></div>
   <div style="clear:both"></div>
-</div>
+</div>
diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js
@@ -10,7 +10,8 @@ define(['backbone','./LayerView'],
 			this.stackModel	= o.stackModel;
 			this.preview = o.preview;
 			this.pfx = this.config.stylePrefix || '';
-			this.className	= this.pfx + 'layers';
+			this.ppfx = this.config.pStylePrefix || '';
+			this.className	= this.pfx + 'layers ' + this.ppfx + 'field';
 			this.listenTo( this.collection, 'add', this.addTo);
 			this.listenTo( this.collection, 'deselectAll', this.deselectAll );
 			this.listenTo( this.collection, 'reset', this.render);

diff --git a/styles/css/main.css b/styles/css/main.css
@@ -3055,7 +3055,7 @@ ol.example li.placeholder:before {
   border-left: 1px solid rgba(5, 5, 5, 0.3); }
 
 .gjs-nv-item > .gjs-nv-children {
-  margin-left: 10px;
+  margin-left: 7px;
   display: none; }
 
 .gjs-nv-item.open > .gjs-nv-children {
@@ -3099,37 +3099,34 @@ ol.example li.placeholder:before {
   .gjs-comp-image-placeholder.fa-picture-o::after {
     content: "\f03e"; }
 
-/***********  END Components *************/
 /********* Input style **********/
-/*#d5d5d5*/
-/*303030*/
-/*414141*/
-/*#252525*/
-/*b1b1b1*/
+/* #d5d5d5 */
+/* b1b1b1 */
+/* #252525 */
+/* 303030 */
 .gjs-label {
   line-height: 18px; }
 
 .gjs-field {
   background-color: rgba(0, 0, 0, 0.3);
-  /*353535*/
   border: 1px solid rgba(0, 0, 0, 0.1);
-  /*292929*/
   box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-  /*575757*/
   border-radius: 2px;
   box-sizing: border-box;
-  padding: 0 5px;
+  padding: 0;
   position: relative; }
-  .gjs-field input, .gjs-field select {
+  .gjs-field input,
+  .gjs-field select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     color: rgba(255, 255, 255, 0.7);
     border: none;
     background-color: transparent;
+    box-sizing: border-box;
     width: 100%;
     position: relative;
-    padding: 3px 0;
+    padding: 3px 4px 4px;
     z-index: 1; }
   .gjs-field select {
     height: 20px;
@@ -3154,7 +3151,7 @@ ol.example li.placeholder:before {
     cursor: pointer; }
 
 .gjs-field-color input {
-  padding-right: 20px;
+  padding-right: 22px;
   box-sizing: border-box; }
 
 .gjs-field-colorp {
@@ -3165,7 +3162,7 @@ ol.example li.placeholder:before {
   position: absolute;
   right: 0;
   top: 0;
-  width: 20px;
+  width: 22px;
   z-index: 10; }
   .gjs-field-colorp .gjs-checker-bg {
     height: 100%;
@@ -3193,7 +3190,7 @@ ol.example li.placeholder:before {
   padding: 0;
   width: auto; }
 
-/*???*/
+/* ??? */
 .gjs-field-checkbox {
   padding: 0;
   width: auto !important; }
@@ -3225,6 +3222,8 @@ ol.example li.placeholder:before {
   position: absolute;
   right: 0;
   top: 0; }
+  .gjs-field-units select {
+    padding: 0 12px 0 0; }
 
 .gjs-field-unit {
   position: absolute;
@@ -3335,7 +3334,6 @@ ol.example li.placeholder:before {
   .gjs-add-trasp:active {
     background-color: rgba(0, 0, 0, 0.2); }
 
-/********* END Inputs **********/
 /********* Device Manager **********/
 .gjs-devices-c {
   display: flex;
@@ -3407,10 +3405,8 @@ ol.example li.placeholder:before {
       border: none;
       width: 100%; }
     .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input {
-      box-sizing: border-box;
-      padding: 3px 21px 3px 0; }
+      box-sizing: border-box; }
     .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
-      padding: 2px 10px 2px 2px;
       position: relative;
       z-index: 1;
       -webkit-appearance: none;
@@ -3556,10 +3552,6 @@ ol.example li.placeholder:before {
       background-repeat: no-repeat;
       background-position: center center; }
     .gjs-sm-sector .gjs-sm-property .gjs-sm-layers, .gjs-clm-tags .gjs-sm-property .gjs-sm-layers {
-      background-color: rgba(0, 0, 0, 0.13);
-      border: 1px solid rgba(0, 0, 0, 0.13);
-      box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
-      border-radius: 2px;
       margin-top: 5px;
       min-height: 30px; }
     .gjs-sm-sector .gjs-sm-property .gjs-sm-layer, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer {
@@ -3724,7 +3716,7 @@ ol.example li.placeholder:before {
     display: inline-block;
     vertical-align: top; }
   .gjs-clm-tags #gjs-clm-add-tag {
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.15);
     border-radius: 2px;
     padding: 5px 6px;
     box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
@@ -3760,7 +3752,8 @@ ol.example li.placeholder:before {
   .gjs-clm-tags #gjs-clm-tag-label {
     cursor: text; }
     .gjs-clm-tags #gjs-clm-tag-label input {
-      width: auto; }
+      width: auto;
+      padding: 0 4px; }
 
 /********* END Class manager **********/
 /********* Modal dialog **********/
@@ -3828,13 +3821,17 @@ ol.example li.placeholder:before {
 .gjs-am-assets-header {
   padding: 5px; }
 
-.gjs-am-add-asset input {
-  width: 70%; }
+.gjs-am-add-asset .gjs-am-add-field {
+  width: 70%;
+  float: left; }
 
 .gjs-am-add-asset button {
   width: 25%;
   float: right; }
 
+.gjs-am-add-field input {
+  padding: 6px; }
+
 .gjs-am-assets-cont {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 3px;