From 6f783f5a3b8d434a73df35c9143c8b125e29612a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 29 May 2015 08:40:14 +0200
Subject: [PATCH] Single variable select state highlight fixed, Closes #2073

---
 .../partials/variableValueSelect.html         |  4 +-
 public/css/less/submenu.less                  | 42 +++++++++++--------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html
index 303e1756033..a910d647059 100644
--- a/public/app/features/dashboard/partials/variableValueSelect.html
+++ b/public/app/features/dashboard/partials/variableValueSelect.html
@@ -14,13 +14,13 @@
 
 	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="keyDown($event)" ng-model="search.query" ng-change="queryChanged()" ></input>
 
-	<div class="variable-value-dropdown" ng-if="dropdownVisible">
+	<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
 		<div class="variable-options-wrapper">
 			<div class="variable-options-column">
 				<div class="variable-options-column-header" ng-if="variable.multi">
 					Selected ({{selectedValuesCount}})
 				</div>
-				<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex, 'multi': variable.multi}" ng-click="optionSelected(option, $event)">
+				<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
 					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index 7a4989545c5..bd0a14da22f 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -55,7 +55,7 @@
   min-width: 150px;
   max-height: 400px;
   min-height: 150px;
-  background: @dropdownBackground;
+  background-color: @dropdownBackground;
   overflow-y: auto;
   overflow-x: hidden;
   box-shadow: 0px 0px 55px 0px black;
@@ -63,6 +63,29 @@
   z-index: 1000;
   font-size: @baseFontSize;
   border-radius: 3px 3px 0 0;
+
+  &.multi {
+   .variable-option-icon {
+     display: inline-block;
+     width: 24px;
+     height: 18px;
+     position: relative;
+     top: 4px;
+     background: url(@checkboxImageUrl) left top no-repeat;
+   }
+
+   .selected {
+     .variable-option-icon{
+       background: url(@checkboxImageUrl) 0px -18px no-repeat;
+     }
+   }
+ }
+
+ &.single {
+   .selected {
+     background-color: @grafanaTargetFuncHightlight;
+   }
+ }
 }
 
 .variable-options-wrapper {
@@ -87,23 +110,6 @@
   position: relative;
   white-space: nowrap;
   min-width: 115px;
-
- &.multi {
-   .variable-option-icon {
-     display: inline-block;
-     width: 24px;
-     height: 18px;
-     position: relative;
-     top: 4px;
-     background: url(@checkboxImageUrl) left top no-repeat;
-   }
-
-   &.selected {
-     .variable-option-icon{
-       background: url(@checkboxImageUrl) 0px -18px no-repeat;
-     }
-   }
- }
 }
 
 .variable-options-column-header {