Minor style fixes

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

styles/css/main.css

@@ -2719,7 +2719,7 @@ div.gjs-select {
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
   position: absolute;
-  width: 85%;
+  width: 83%;
   height: 100%;
   bottom: 0;
   left: 0;
@@ -2900,12 +2900,12 @@ ol.example li.placeholder:before {
   text-align: center;
   z-index: 3; }
   .gjs-pn-panel#gjs-pn-commands, .gjs-pn-panel#gjs-pn-options2 {
-    width: 85%;
+    width: 83%;
     left: 0;
     top: 0;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
   .gjs-pn-panel#gjs-pn-options {
-    right: 15%;
+    right: 17%;
     top: 0; }
   .gjs-pn-panel#gjs-pn-options2 {
     bottom: 150px;
@@ -2917,13 +2917,13 @@ ol.example li.placeholder:before {
   .gjs-pn-panel#gjs-pn-views {
     border-bottom: 2px solid rgba(0, 0, 0, 0.3);
     right: 0;
-    width: 15%;
+    width: 17%;
     z-index: 4; }
   .gjs-pn-panel#gjs-pn-views-container {
     height: 100%;
     padding: 42px 0 0;
     right: 0;
-    width: 15%;
+    width: 17%;
     overflow: auto;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
 
@@ -3207,18 +3207,15 @@ ol.example li.placeholder:before {
   .gjs-sm-sector .gjs-sm-field, .gjs-clm-tags .gjs-sm-field, .gjs-sm-sector .gjs-clm-field, .gjs-clm-tags .gjs-clm-field {
     width: 100%;
     position: relative; }
-    .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;
+    .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, .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 {
+      background-color: transparent;
       color: rgba(255, 255, 255, 0.7);
-      background: none;
       border: none;
-      padding: 3px 21px 3px 0;
       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; }
     .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 {
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.7);
-      width: 100%;
       padding: 2px 10px 2px 2px;
       position: relative;
       z-index: 1;

styles/scss/main.scss

@@ -38,6 +38,7 @@ $colorGreen:	#62c462;
 $tagBg: #804f7b;
 $secColor: $tagBg;
 $imageCompDim:	50px;
+$leftWidth: 17%;
 
 $fontPath: '../fonts';
 $fontName: 'main-fonts';
@@ -215,7 +216,7 @@ div.#{$app-prefix}select{
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
   position: absolute;
-  width: 85%;
+  width: (100% - $leftWidth);
   height: 100%;
   bottom: 0; left: 0;
   overflow: hidden;
@@ -385,8 +386,6 @@ ol.example li.placeholder:before {position: absolute;}
 
 /********* PANELS **********/
 
-$leftWidth: 15%;
-
 .#{$pn-prefix}panel {
   @extend .#{$app-prefix}bg-main;
   @extend .#{$app-prefix}color-main;
@@ -398,13 +397,14 @@ $leftWidth: 15%;
   z-index:3;
 
   &##{$pn-prefix}commands{
-    width: 85%;
+    width: (100% - $leftWidth);
     left:0; top: 0;
     box-shadow: 0 0 5px $mainDkColor;
   }
 
   &##{$pn-prefix}options{
-  	right: 15%; top: 0;
+  	right: $leftWidth;
+    top: 0;
   }
 
   &##{$pn-prefix}options2{
@@ -754,23 +754,21 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
 	  width: 100%;
 	  position:relative;
 
-	  	input {
+    input, select {
+      background-color: transparent;
+      color: $inputFontColor;
+      border:none;
+      width: 100%;
+    }
+	  input {
 		  box-sizing: border-box;
-		  color: $inputFontColor;
-		  background:none; border:none;
 		  padding: 3px 21px 3px 0;
-   	 	  width: 100%;
 		}
-
 		select {
-		  background: none; border: none;
-		  color: $inputFontColor;
-		  width: 100%;
       padding: 2px 10px 2px 2px;
 		  position: relative;
 		  z-index:1;
 		  @include appearance(none);
-
 		  &::-ms-expand { display: none;}
 		}