css 'select' tweaks

src/mol-plugin/skin/base/components/controls-base.scss

@@ -5,7 +5,7 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 
-    
+
     &[disabled] {
         background: $default-background;
         opacity: 0.35;
@@ -51,7 +51,7 @@
 
 .msp-btn-link, .msp-btn-link:active, .msp-btn-link:focus {
     color: $msp-btn-link-font-color;
-    text-decoration: none;   
+    text-decoration: none;
 }
 
 .msp-btn-link:hover {
@@ -75,13 +75,13 @@
     .msp-btn-#{$name}, .msp-btn-#{$name}:active, .msp-btn-#{$name}:focus {
         color: $font;
         background: $bg;
-    }    
+    }
     .msp-btn-#{$name}:hover {
         color: $hover-font-color;
         background: color-lower-contrast($bg, 2.5%);
     }
-    
-    .msp-btn-#{$name}[disabled], .msp-btn-#{$name}[disabled]:hover, 
+
+    .msp-btn-#{$name}[disabled], .msp-btn-#{$name}[disabled]:hover,
     .msp-btn-#{$name}[disabled]:active, .msp-btn-#{$name}[disabled]:focus {
         color: color-lower-contrast($font, 1%);
     }
@@ -104,33 +104,33 @@
     line-height: $row-height;
 }
 
-.msp-form-control {    
+.msp-form-control {
     width: 100%;
     background: $msp-form-control-background;
     color: $font-color;
     border: none; // !important;
-    padding: 0 $control-spacing;   
-    line-height: $row-height - 2px;  
+    padding: 0 $control-spacing;
+    line-height: $row-height - 2px;
     height: $row-height;
     -webkit-appearance: none;
     -moz-appearance: none;
-    appearance: none;    
+    appearance: none;
     box-shadow: none !important;
-    
+
     &:hover {
         color: $hover-font-color;
         background-color: color-increase-contrast($msp-form-control-background, 5%);
         border: none;
         outline-offset: -1px;
-        outline: 1px solid color-increase-contrast($msp-form-control-background, 20%);    
+        outline: 1px solid color-increase-contrast($msp-form-control-background, 20%);
     }
-    
+
     &:active, &:focus {
         color: $font-color;
         background-color: $msp-form-control-background;
         border: none;
         outline-offset: 0;
-        outline: none;    
+        outline: none;
     }
 }
 
@@ -138,7 +138,7 @@
     margin-top: 1px;
 }
 
-.msp-btn-commit {        
+.msp-btn-commit {
     text-align: right;
     padding-top: 0;
     padding-bottom: 0;
@@ -148,22 +148,23 @@
     border: none;
     overflow: hidden;
     font-weight: bold;
-    
+
     .msp-icon {
         display: block-inline;
         line-height: $row-height;
         width: $row-height;
         text-align: center;
-    } 
+    }
 }
 
-select.msp-form-control { 
+select.msp-form-control {
     background: none;
     background-color: $msp-form-control-background;
     background-size: 8px 12px;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC);
     background-repeat: no-repeat;
-    background-position: right $control-spacing top (($row-height - 12px) / 2);    
+    background-position: right $control-spacing top (($row-height - 12px) / 2);
+    padding-right: ($row-height - 8px);
 }
 
 select.msp-form-control:-moz-focusring {

src/mol-plugin/skin/base/components/temp.scss

@@ -63,6 +63,7 @@
 
         text-align-last: center;
         background: none !important;
+        padding: 0 $control-spacing;
 
         > option[value = _] {
             display: none;