Began polish and tweaks of new template variable multi select dropdown

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

@@ -7,10 +7,9 @@
 </a>
 
 <div ng-if="selectorOpen" class="variable-value-dropdown">
-	<div class="search-field-wrapper">
+	<div class="variable-search-wrapper">
 		<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>
 	</div>
 

public/css/less/submenu.less

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