Began polish and tweaks of new template variable multi select dropdown

public/app/features/dashboard/partials/variableValueSelect.html

@@ -7,10 +7,9 @@
 </a>
 </a>
 
 
 <div ng-if="selectorOpen" class="variable-value-dropdown">
 <div ng-if="selectorOpen" class="variable-value-dropdown">
-	<div class="search-field-wrapper">
+	<div class="variable-search-wrapper">
 		<span style="position: relative;">
 		<span style="position: relative;">
-			<input  type="text" placeholder="Search variable values" give-focus="giveFocus" tabindex="1"
-			ng-keydown="keyDown($event)" ng-model="query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="search()" />
+			<input type="text" placeholder="Search values..." give-focus="giveFocus" tabindex="1" ng-model="query.query" spellcheck='false' ng-change="search()" />
 		</span>
 		</span>
 	</div>
 	</div>
 
 

public/css/less/submenu.less

@@ -28,37 +28,49 @@
   position: absolute;
   position: absolute;
   top: 43px;
   top: 43px;
   min-width: 200px;
   min-width: 200px;
-  height: 400px;
+  max-height: 400px;
   background: @grafanaPanelBackground;
   background: @grafanaPanelBackground;
   box-shadow: 0px 0px 55px 0px black;
   box-shadow: 0px 0px 55px 0px black;
   border: 1px solid @grafanaTargetFuncBackground;
   border: 1px solid @grafanaTargetFuncBackground;
   z-index: 1000;
   z-index: 1000;
-  padding: 10px;
+  font-size: @baseFontSize;
+  padding: 4px 4px 8px 4px;
+}
+
+.variable-options-container {
+  max-height: 350px;
+  overflow: auto;
+  display: block;
+  line-height: 28px;
+}
 
 
-  .variable-options-container {
-    height: 350px;
-    overflow: auto;
-    display: block;
-    line-height: 28px;
+.variable-option {
+  display: block;
+  .fa {
+    font-size: 130%;
+    position: relative;
+    top: 2px;
+    padding-right: 4px;
   }
   }
+  .fa-check-square-o { display: none; }
 
 
-  .variable-option {
-    display: block;
-    .fa {
-      font-size: 130%;
-      position: relative;
-      top: 2px;
-      padding-right: 6px;
+  &.selected {
+    .fa-square-o {
+      display: none;
     }
     }
-    .fa-check-square-o { display: none; }
-
-    &.selected {
-      .fa-square-o {
-        display: none;
-      }
-      .fa-check-square-o {
-        display: inline-block;
-      }
+    .fa-check-square-o {
+      display: inline-block;
     }
     }
   }
   }
 }
 }
+
+.variable-search-wrapper {
+  input {
+    width: 100%;
+    padding: 7px 8px;
+    height: 100%;
+    box-sizing: border-box;
+    margin-bottom: 6px;
+  }
+}
+

public/css/less/variables.dark.less

@@ -63,7 +63,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 
 @baseFontSize:          14px;
 @baseFontSize:          14px;
-@baseFontWeight:		400;
+@baseFontWeight:		    400;
 @baseFontFamily:        @sansFontFamily;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 @altFontFamily:         @serifFontFamily;