ux(submenu): tight-form -> gf-form

public/app/features/dashboard/submenu/submenu.html

@@ -1,30 +1,27 @@
 <div class="submenu-controls">
-	<div class="tight-form borderless">
+	<ul ng-if="ctrl.dashboard.templating.list.length > 0">
+		<li ng-repeat="variable in ctrl.variables" class="submenu-item">
+			<span class="submenu-item-label template-variable " ng-show="!variable.hideLabel">
+				{{variable.label || variable.name}}:
+			</span>
+			<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
+		</li>
+	</ul>
 
-		<ul class="tight-form-list" ng-if="ctrl.dashboard.templating.list.length > 0">
-			<li ng-repeat="variable in ctrl.variables" class="submenu-item">
-				<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
-					{{variable.label || variable.name}}:
-				</span>
-				<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
-			</li>
-		</ul>
+	<ul ng-if="ctrl.dashboard.annotations.list.length > 0">
+		<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+			<a ng-click="ctrl.disableAnnotation(annotation)">
+				<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
+				{{annotation.name}}
+				<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
+				<label for="hideYAxis" class="cr1"></label>
+			</a>
+		</li>
+	</ul>
 
-		<ul class="tight-form-list" ng-if="ctrl.dashboard.annotations.list.length > 0">
-			<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-				<a ng-click="ctrl.disableAnnotation(annotation)">
-					<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
-					{{annotation.name}}
-					<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
-					<label for="hideYAxis" class="cr1"></label>
-				</a>
-			</li>
-		</ul>
+	<ul class="pull-right" ng-if="ctrl.dashboard.links.length > 0">
+		<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
+	</ul>
 
-		<ul class="tight-form-list pull-right" ng-if="ctrl.dashboard.links.length > 0">
-			<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
-		</ul>
-
-		<div class="clearfix"></div>
-	</div>
+	<div class="clearfix"></div>
 </div>

public/app/partials/valueSelectDropdown.html

@@ -1,5 +1,5 @@
 <div class="variable-link-wrapper">
-	<a ng-click="vm.show()" class="variable-value-link tight-form-item">
+	<a ng-click="vm.show()" class="variable-value-link">
 		{{vm.linkText}}
 		<span ng-repeat="tag in vm.selectedTags" bs-tooltip='tag.valuesText' data-placement="bottom">
 			<span class="label-tag"tag-color-from-name="tag.text">
@@ -10,7 +10,7 @@
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
+	<input type="text" class="hidden-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
 	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">

public/sass/components/_submenu.scss

@@ -1,5 +1,5 @@
 .submenu-controls {
-  margin: 10px 5px;
+  margin: 0 5px;
   font-size: 16px;
 }
 
@@ -23,6 +23,7 @@
   border: $panel-border;
   margin-right: 10px;
   display: inline-block;
+  float: left;
 
   .fa-caret-down {
     font-size: 75%;
@@ -37,11 +38,35 @@
   .label-tag {
     margin: 0 5px;
   }
+
+  padding: 8px 7px;
+  box-sizing: content-box;
+  display: inline-block;
+  font-weight: normal;
+  display: inline-block;
+  color: $text-color;
+}
+
+.submenu-item-label {
+  padding: 8px 0px 8px 7px;
+  box-sizing: content-box;
+  display: inline-block;
+  font-weight: normal;
+  display: inline-block;
 }
 
 .variable-link-wrapper  {
   display: inline-block;
   position: relative;
+
+  .hidden-input {
+    padding: 8px 7px;
+    border: none;
+    margin: 0px;
+    background: transparent;
+    border-radius: 0;
+    border-right: 1px solid $tight-form-border;
+  }
 }
 
 .variable-value-dropdown {