changed grafana-target css names in partials

src/app/directives/dropdown.typeahead.js

@@ -12,10 +12,10 @@ function (angular, app, _, $) {
     .directive('dropdownTypeahead', function($compile) {
 
       var inputTemplate = '<input type="text"'+
-                            ' class="grafana-target-segment-input input-medium grafana-target-segment-input"' +
+                            ' class="tight-form-input input-medium tight-form-input"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
+      var buttonTemplate = '<a  class="tight-form-item tight-form-func dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
                               ' data-placement="top"><i class="fa fa-plus"></i></a>';
 

src/app/directives/graphiteSegment.js

@@ -11,10 +11,10 @@ function (angular, app, _, $) {
     .module('grafana.directives')
     .directive('graphiteSegment', function($compile, $sce) {
       var inputTemplate = '<input type="text" data-provide="typeahead" ' +
-                            ' class="grafana-target-text-input input-medium"' +
+                            ' class="tight-form-clear-input input-medium"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a class="grafana-target-segment" tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>';
+      var buttonTemplate = '<a class="tight-form-item" tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>';
 
       return {
         link: function($scope, elem) {

src/app/directives/templateParamSelector.js

@@ -11,10 +11,10 @@ function (angular, app, _, $) {
     .module('grafana.directives')
     .directive('templateParamSelector', function($compile) {
       var inputTemplate = '<input type="text" data-provide="typeahead" ' +
-                            ' class="grafana-target-text-input input-medium"' +
+                            ' class="tight-form-clear-input input-medium"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="grafana-target-segment tabindex="1">{{variable.current.text}}</a>';
+      var buttonTemplate = '<a  class="tight-form-item tabindex="1">{{variable.current.text}}</a>';
 
       return {
         link: function($scope, elem) {

src/app/features/graphite/addGraphiteFunc.js

@@ -12,10 +12,10 @@ function (angular, app, _, $, gfunc) {
     .module('grafana.directives')
     .directive('graphiteAddFunc', function($compile) {
       var inputTemplate = '<input type="text"'+
-                            ' class="grafana-target-segment-input input-medium grafana-target-segment-input"' +
+                            ' class="tight-form-input input-medium tight-form-input"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
+      var buttonTemplate = '<a  class="tight-form-item tight-form-func dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown"' +
                               ' data-placement="top"><i class="fa fa-plus"></i></a>';
 

src/app/features/graphite/funcEditor.js

@@ -12,10 +12,10 @@ function (angular, _, $) {
 
       var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
       var paramTemplate = '<input type="text" style="display:none"' +
-                          ' class="input-mini grafana-function-param-input"></input>';
+                          ' class="input-mini tight-form-func-param"></input>';
 
       var funcControlsTemplate =
-         '<div class="graphite-func-controls">' +
+         '<div class="tight-form-func-controls">' +
            '<span class="pointer fa fa-arrow-left"></span>' +
            '<span class="pointer fa fa-question-circle"></span>' +
            '<span class="pointer fa fa-remove" ></span>' +
@@ -126,7 +126,7 @@ function (angular, _, $) {
           }
 
           function toggleFuncControls() {
-            var targetDiv = elem.closest('.grafana-target-inner');
+            var targetDiv = elem.closest('.tight-form-row');
 
             if (elem.hasClass('show-function-controls')) {
               elem.removeClass('show-function-controls');

src/app/features/graphite/partials/query.editor.html

@@ -1,24 +1,24 @@
 <div class="editor-row">
 
 	<div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
+        class="tight-form"
+        ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="GraphiteQueryCtrl"
         ng-init="init()">
 
-    <div class="grafana-target-inner">
-      <ul class="grafana-segment-list pull-right">
-        <li ng-show="parserError" class="grafana-target-segment">
+    <div class="tight-form-row">
+      <ul class="tight-form-list pull-right">
+        <li ng-show="parserError" class="tight-form-item">
           <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
             <i class="fa fa-warning"></i>
           </a>
         </li>
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
           <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
             <i class="fa fa-pencil"></i>
           </a>
         </li>
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
 					<div class="dropdown">
 						<a  class="pointer dropdown-toggle"
 							data-toggle="dropdown"
@@ -47,19 +47,19 @@
 						</ul>
 					</div>
 				</li>
-				<li class="grafana-target-segment last">
+				<li class="tight-form-item last">
 					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
 						<i class="fa fa-remove"></i>
 					</a>
 				</li>
 			</ul>
 
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment" style="min-width: 15px; text-align: center">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="min-width: 15px; text-align: center">
 					{{targetLetters[$index]}}
 				</li>
 				<li>
-					<a  class="grafana-target-segment"
+					<a  class="tight-form-item"
 						ng-click="target.hide = !target.hide; get_data();"
 						role="menuitem">
 						<i class="fa fa-eye"></i>
@@ -68,17 +68,17 @@
 			</ul>
 
 			<input  type="text"
-			class="grafana-target-text-input span10"
+			class="tight-form-clear-input span10"
               ng-model="target.target"
               focus-me="showTextEditor"
               spellcheck='false'
               ng-model-onblur ng-change="targetTextChanged()"
               ng-show="showTextEditor" />
 
-      <ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
+      <ul class="tight-form-list" role="menu" ng-hide="showTextEditor">
         <li ng-repeat="segment in segments" role="menuitem" graphite-segment></li>
 				<li ng-repeat="func in functions">
-          <span graphite-func-editor class="grafana-target-segment grafana-target-function">
+          <span graphite-func-editor class="tight-form-item tight-form-func">
           </span>
         </li>
         <li class="dropdown" graphite-add-func>
@@ -91,30 +91,30 @@
 </div>
 
 <section class="grafana-metric-options">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
+	<div class="tight-form">
+		<div class="tight-form-row">
+			<ul class="tight-form-list">
+				<li class="tight-form-item tight-form-item-icon">
 					<i class="fa fa-wrench"></i>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					Cache timeout
 				</li>
 				<li>
 					<input type="text"
-								class="input-mini grafana-target-segment-input"
+								class="input-mini tight-form-input"
 								ng-model="panel.cacheTimeout"
 								bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
 								data-placement="right"
 								spellcheck='false'
 								placeholder="60">
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					Max data points
 				</li>
 				<li>
 					<input type="text"
-								class="input-mini grafana-target-segment-input"
+								class="input-mini tight-form-input"
 								ng-model="panel.maxDataPoints"
 								bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
 								data-placement="right"
@@ -125,32 +125,32 @@
 			</ul>
 			<div class="clearfix"></div>
 		</div>
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
+		<div class="tight-form-row">
+			<ul class="tight-form-list">
+				<li class="tight-form-item tight-form-item-icon">
 					<i class="fa fa-info-circle"></i>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						shorter legend names
 					</a>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						series as parameters
 					</a>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						stacking
 					</a>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						templating
 					</a>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						max data points
 					</a>

src/app/features/influxdb/funcEditor.js

@@ -14,7 +14,7 @@ function (angular, _, $) {
                              'data-toggle="dropdown">{{target.function}}</a><span>(</span>';
 
       var paramTemplate = '<input type="text" style="display:none"' +
-                          ' class="input-mini grafana-function-param-input"></input>';
+                          ' class="input-mini tight-form-func-param"></input>';
 
       return {
         restrict: 'A',

src/app/features/influxdb/partials/query.editor.html

@@ -1,13 +1,13 @@
 <div class="editor-row">
 
   <div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
+        class="tight-form"
+        ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="InfluxQueryCtrl"
         ng-init="init()">
-    <div class="grafana-target-inner">
-			<ul class="grafana-segment-list pull-right">
-				<li class="grafana-target-segment">
+    <div class="tight-form-row">
+			<ul class="tight-form-list pull-right">
+				<li class="tight-form-item">
 					<div class="dropdown">
 						<a class="pointer dropdown-toggle"
 							data-toggle="dropdown"
@@ -23,26 +23,26 @@
 						</ul>
 					</div>
 				</li>
-				<li class="grafana-target-segment last">
+				<li class="tight-form-item last">
 					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
 						<i class="fa fa-remove"></i>
 					</a>
 				</li>
 			</ul>
 
-			<ul class="grafana-segment-list">
+			<ul class="tight-form-list">
 				<li>
-					<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
+					<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
 						<i class="fa fa-eye"></i>
 					</a>
         </li>
       </ul>
 
 			<!-- Raw Query mode  -->
-			<ul class="grafana-segment-list" ng-show="target.rawQuery">
+			<ul class="tight-form-list" ng-show="target.rawQuery">
 				<li>
 					<input type="text"
-             class="grafana-target-segment-input span10"
+             class="tight-form-input span10"
              ng-model="target.query"
              placeholder="select ..."
              focus-me="target.rawQuery"
@@ -54,13 +54,13 @@
 			</ul>
 
 			<!-- Query editor mode -->
-      <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
-				<li class="grafana-target-segment">
+      <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
+				<li class="tight-form-item">
 					series
 				</li>
         <li>
           <input type="text"
-                 class="grafana-target-segment-input span8"
+                 class="tight-form-input span8"
                  ng-model="target.series"
                  spellcheck='false'
                  bs-typeahead="listSeries"
@@ -71,12 +71,12 @@
                  ng-blur="seriesBlur()">
         </li>
 
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					alias
 				</li>
 
 				<li>
-					<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
+					<input type="text" class="input-medium tight-form-input" ng-model="target.alias"
 					spellcheck='false' placeholder="alias" ng-blur="get_data()">
 				</li>
 
@@ -85,28 +85,28 @@
       <div class="clearfix"></div>
     </div>
 
-    <div class="grafana-target-inner">
+    <div class="tight-form-row">
 			<!-- Raw Query mode  -->
-			<ul class="grafana-segment-list" ng-show="target.rawQuery">
-				<li class="grafana-target-segment">
+			<ul class="tight-form-list" ng-show="target.rawQuery">
+				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
           alias
         </li>
         <li>
           <input type="text"
-                 class="input-medium grafana-target-segment-input"
+                 class="input-medium tight-form-input"
                  ng-model="target.alias"
                  spellcheck='false'
                  placeholder="alias"
                  ng-blur="get_data()">
         </li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					group by time
 				</li>
 				<li>
-					<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
+					<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
 								 spellcheck='false' placeholder="{{interval}}" data-placement="right"
 								 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
 								 ng-model-onblur ng-change="get_data()" >
@@ -114,47 +114,47 @@
 			</ul>
 
 			<!-- Query editor mode -->
-      <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
-				<li class="grafana-target-segment">
+      <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
+				<li class="tight-form-item">
 					<i class="fa fa-eye invisible"></i>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					select
 				</li>
 				<li class="dropdown">
-					<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
+					<span influxdb-func-editor class="tight-form-item tight-form-func">
 					</span>
 				</li>
 
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					where
 				</li>
 				<li>
-					<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
+					<input type="text" class="input-medium tight-form-input" ng-model="target.condition"
 								 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
 				</li>
 
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					group by time
 				</li>
 				<li>
-					<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
+					<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
 								 spellcheck='false' placeholder="{{interval}}" data-placement="right"
 								 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
 								 ng-model-onblur ng-change="get_data()" >
 				</li>
 
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					and
 				</li>
 
 				<li>
-					<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
+					<input type="text" class="input-small tight-form-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
 								 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
 				</li>
 
 				<li class="dropdown">
-					<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
+					<a class="tight-form-item pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
 						<span ng-show="target.fill">
 							fill ({{target.fill}})
 						</span>
@@ -177,42 +177,42 @@
 </div>
 
 <section class="grafana-metric-options">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
+	<div class="tight-form">
+		<div class="tight-form-row">
+			<ul class="tight-form-list">
+				<li class="tight-form-item tight-form-item-icon">
 					<i class="fa fa-wrench"></i>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					group by time
 				</li>
 				<li>
-					<input type="text" class="input-medium grafana-target-segment-input" ng-model="panel.interval" ng-blur="get_data();"
+					<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
 					       spellcheck='false' placeholder="example: >10s">
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
 		</div>
 
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
+		<div class="tight-form-row">
+			<ul class="tight-form-list">
+				<li class="tight-form-item tight-form-item-icon">
 					<i class="fa fa-info-circle"></i>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						alias patterns
 					</a>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						stacking &amp; and fill
 					</a>
 				</li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
 					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 						group by time
 					</a>

src/app/features/opentsdb/partials/query.editor.html

@@ -1,12 +1,12 @@
 <div class="editor-row" style="margin-top: 10px;">
   <div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
+        class="tight-form"
+        ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="OpenTSDBQueryCtrl"
         ng-init="init()">
-    <div class="grafana-target-inner">
-			<ul class="grafana-segment-list pull-right">
-				<li class="grafana-target-segment">
+    <div class="tight-form-row">
+			<ul class="tight-form-list pull-right">
+				<li class="tight-form-item">
 					<div class="dropdown">
 						<a  class="pointer dropdown-toggle"
 							data-toggle="dropdown"
@@ -23,16 +23,16 @@
 						</ul>
 					</div>
 				</li>
-				<li class="grafana-target-segment last">
+				<li class="tight-form-item last">
 					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
             <i class="fa fa-remove"></i>
           </a>
         </li>
       </ul>
 
-      <ul class="grafana-segment-list">
+      <ul class="tight-form-list">
         <li>
-          <a  class="grafana-target-segment"
+          <a  class="tight-form-item"
               ng-click="target.hide = !target.hide; get_data();"
               role="menuitem">
             <i class="fa fa-eye"></i>
@@ -40,10 +40,10 @@
         </li>
       </ul>
 
-      <ul class="grafana-segment-list" role="menu">
+      <ul class="tight-form-list" role="menu">
         <li>
           <input type="text"
-                 class="grafana-target-segment-input"
+                 class="tight-form-input"
                  ng-model="target.metric"
                  spellcheck='false'
                  bs-typeahead="suggestMetrics"
@@ -57,12 +57,12 @@
             <i class="fa fa-warning"></i>
           </a>
         </li>
-				<li class="grafana-target-segment">
+				<li class="tight-form-item">
           Aggregator
         </li>
         <li>
           <select ng-model="target.aggregator"
-                  class="grafana-target-segment-input input-small"
+                  class="tight-form-input input-small"
                   ng-options="agg for agg in aggregators"
                   ng-change="targetBlur()">
           </select>
@@ -73,28 +73,28 @@
           </a>
         </li>
 
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
             Rate:
             <input type="checkbox"
-                   class="grafana-target-option-checkbox"
+                   class="tight-form-checkbox"
                    ng-model="target.shouldComputeRate"
                    ng-change="targetBlur()"
                    >
         </li>
-        <li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
+        <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
           Counter:
           <input type="checkbox"
-                 class="grafana-target-option-checkbox"
+                 class="tight-form-checkbox"
                  ng-disabled="!target.shouldComputeRate"
                  ng-model="target.isCounter"
                  ng-change="targetBlur()">
         </li>
-        <li class="grafana-target-segment" ng-hide="!target.isCounter">
+        <li class="tight-form-item" ng-hide="!target.isCounter">
           Counter Max:
         </li>
         <li ng-hide="!target.isCounter">
           <input type="text"
-                 class="grafana-target-segment-input input-medium"
+                 class="tight-form-input input-medium"
                  ng-disabled="!target.shouldComputeRate"
                  ng-model="target.counterMax"
                  spellcheck='false'
@@ -102,12 +102,12 @@
                  ng-blur="targetBlur()"
                  />
         </li>
-        <li class="grafana-target-segment" ng-hide="!target.isCounter">
+        <li class="tight-form-item" ng-hide="!target.isCounter">
           Counter Reset Value:
         </li>
         <li ng-hide="!target.isCounter">
           <input type="text"
-                 class="grafana-target-segment-input input-medium"
+                 class="tight-form-input input-medium"
                  ng-disabled="!target.shouldComputeRate"
                  ng-model="target.counterResetValue"
                  spellcheck='false'
@@ -115,12 +115,12 @@
                  ng-blur="targetBlur()"
                  />
         </li>
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
           Alias:
         </li>
 				<li>
 					<input type="text"
-                 class="grafana-target-segment-input input-medium"
+                 class="tight-form-input input-medium"
                  ng-model="target.alias"
                  spellcheck='false'
                  placeholder="series alias"
@@ -134,13 +134,13 @@
       <div class="clearfix"></div>
     </div>
 
-    <div class="grafana-target-inner">
-      <ul class="grafana-segment-list" role="menu">
+    <div class="tight-form-row">
+      <ul class="tight-form-list" role="menu">
 
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
           Downsample:
           <input type="checkbox"
-                 class="grafana-target-option-checkbox"
+                 class="tight-form-checkbox"
                  ng-model="target.shouldDownsample"
                  ng-change="targetBlur(target)"
                  >
@@ -148,7 +148,7 @@
 
         <li ng-hide="!target.shouldDownsample">
           <input type="text"
-                 class="input-small grafana-target-segment-input"
+                 class="input-small tight-form-input"
                  ng-disabled="!target.shouldDownsample"
                  ng-model="target.downsampleInterval"
                  ng-change="targetBlur()"
@@ -156,29 +156,29 @@
                  >
         </li>
 
-        <li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
+        <li class="tight-form-item" ng-hide="!target.shouldDownsample">
           Aggregator
         </li>
 
         <li ng-hide="!target.shouldDownsample">
           <select ng-model="target.downsampleAggregator"
-                  class="grafana-target-segment-input input-small"
+                  class="tight-form-input input-small"
                   ng-options="agg for agg in aggregators"
                   ng-change="targetBlur()">
           </select>
         </li>
 
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
             Tags:
         </li>
-        <li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
+        <li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
           {{key}}&nbsp;=&nbsp;{{value}}
           <a ng-click="removeTag(key)">
             <i class="fa fa-remove"></i>
           </a>
         </li>
 
-        <li class="grafana-target-segment" ng-hide="addTagMode">
+        <li class="tight-form-item" ng-hide="addTagMode">
           <a ng-click="addTag()">
             <i class="fa fa-plus"></i>
           </a>
@@ -186,14 +186,14 @@
 
         <li ng-show="addTagMode">
             <input type="text"
-                   class="input-small grafana-target-segment-input"
+                   class="input-small tight-form-input"
                    spellcheck='false'
                    bs-typeahead="suggestTagKeys"
                    data-min-length=0 data-items=100
                    ng-model="target.currentTagKey"
                    placeholder="key">
             <input type="text"
-                   class="input-small grafana-target-segment-input"
+                   class="input-small tight-form-input"
                    spellcheck='false'
                    bs-typeahead="suggestTagValues"
                    data-min-length=0 data-items=100

src/app/features/panellinkeditor/module.html

@@ -2,41 +2,41 @@
   <div class="section">
 		<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
 
-		<div class="grafana-target" ng-repeat="link in panel.links"j>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment">
+		<div class="tight-form" ng-repeat="link in panel.links"j>
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
 						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
 					</li>
 
-					<li class="grafana-target-segment">title</li>
+					<li class="tight-form-item">title</li>
 					<li>
-						<input type="text" ng-model="link.title" class="input-medium grafana-target-segment-input">
+						<input type="text" ng-model="link.title" class="input-medium tight-form-input">
 					</li>
 
-					<li class="grafana-target-segment">type</li>
+					<li class="tight-form-item">type</li>
 					<li>
-						<select class="input-medium grafana-target-segment-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+						<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
 					</li>
 
-					<li class="grafana-target-segment" ng-show="link.type === 'dashboard'">dashboard</li>
+					<li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
 					<li ng-show="link.type === 'dashboard'">
 						<input type="text"
 						       ng-model="link.dashboard"
 									 bs-typeahead="searchDashboards"
-									 class="input-large grafana-target-segment-input">
+									 class="input-large tight-form-input">
 					</li>
 
-					<li class="grafana-target-segment" ng-show="link.type === 'absolute'">url</li>
+					<li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
 					<li ng-show="link.type === 'absolute'">
-						<input type="text" ng-model="link.url" class="input-large grafana-target-segment-input">
+						<input type="text" ng-model="link.url" class="input-large tight-form-input">
 					</li>
 
-					<li class="grafana-target-segment">params
+					<li class="tight-form-item">params
 						<tip>Use var-variableName=value to pass templating variables.</tip>
 					</li>
 					<li>
-						<input type="text" ng-model="link.params" class="input-medium grafana-target-segment-input">
+						<input type="text" ng-model="link.params" class="input-medium tight-form-input">
 					</li>
 				</ul>
 				<div class="clearfix"></div>

src/app/panels/graph/axisEditor.html

@@ -1,13 +1,13 @@
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Left Y</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Unit
 					</li>
 					<li class="dropdown" style="width: 130px;"
@@ -15,38 +15,38 @@
 						dropdown-typeahead="unitFormats"
 						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small tight-form-input" placeholder="auto"
 					   	empty-to-null ng-model="panel.grid.leftMax"
 							ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Min
 					</li>
 					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small tight-form-input" placeholder="auto"
 					  	empty-to-null ng-model="panel.grid.leftMin"
 							ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input last"
+						<input type="text" class="input-small tight-form-input last"
 					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Right Y</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Unit
 					</li>
 					<li class="dropdown" style="width: 130px"
@@ -54,27 +54,27 @@
 						dropdown-typeahead="unitFormats"
 						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small tight-form-input" placeholder="auto"
 					   	empty-to-null ng-model="panel.grid.rightMax"
 							ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Min
 					</li>
 					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small tight-form-input" placeholder="auto"
 					  	empty-to-null ng-model="panel.grid.rightMin"
 							ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input last"
+						<input type="text" class="input-small tight-form-input last"
 					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
@@ -84,19 +84,19 @@
 	</div>
 
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+		<div class="tight-form">
+		<div class="tight-form-row">
+			<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Show Axis</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						X-Axis&nbsp;
 						<input class="cr1" id="hideXAxis" type="checkbox"
 								ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
 						<label for="hideXAxis" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment last">
+					<li class="tight-form-item last">
 						Y-Axis&nbsp;
 						<input class="cr1" id="hideYAxis" type="checkbox"
 						    ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
@@ -105,32 +105,32 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Thresholds</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Level 1
 					</li>
 					<li>
-						<input type="number" class="input-small grafana-target-segment-input"
+						<input type="number" class="input-small tight-form-input"
 					  	ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Level 2
 					</li>
 					<li>
-						<input type="number" class="input-small grafana-target-segment-input"
+						<input type="number" class="input-small tight-form-input"
 					  	ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
 					</li>
-					<li class="grafana-target-segment last">
+					<li class="tight-form-item last">
 						Line mode&nbsp;
 						<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
 								ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
@@ -146,31 +146,31 @@
 
 <div class="editor-row">
 	<div class="section">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Legend</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Show&nbsp;
 						<input class="cr1" id="panel.legend.show" type="checkbox"
 						    ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
 						<label for="panel.legend.show" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Table&nbsp;
 						<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
 						    ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
 						<label for="panel.legend.alignAsTable" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Right side&nbsp;
 						<input class="cr1" id="panel.legend.rightSide" type="checkbox"
 						    ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
 						<label for="panel.legend.rightSide" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment last">
+					<li class="tight-form-item last">
 						<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
 						<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
 						    ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
@@ -182,37 +182,37 @@
 		</div>
 	</div>
 	<div class="section">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 100px">
 						<strong>Legend values</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Min&nbsp;
 						<input class="cr1" id="panel.legend.min" type="checkbox"
 						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.min" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Max&nbsp;
 						<input class="cr1" id="panel.legend.max" type="checkbox"
 						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.max" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Avg&nbsp;
 						<input class="cr1" id="panel.legend.avg" type="checkbox"
 						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.avg" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Current&nbsp;
 						<input class="cr1" id="panel.legend.current" type="checkbox"
 						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.current" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment last">
+					<li class="tight-form-item last">
 						Total&nbsp;
 						<input class="cr1" id="panel.legend.total" type="checkbox"
 						    ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">

src/app/panels/graph/styleEditor.html

@@ -66,14 +66,14 @@
   <div class="section">
 		<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
 		<div>
-			<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
-				<div class="grafana-target-inner">
-					<ul class="grafana-segment-list">
-						<li class="grafana-target-segment">
+			<div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
+				<div class="tight-form-row">
+					<ul class="tight-form-list">
+						<li class="tight-form-item">
 							<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
 						</li>
 
-						<li class="grafana-target-segment">
+						<li class="tight-form-item">
 							alias or regex
 						</li>
 						<li>
@@ -82,9 +82,9 @@
 							bs-typeahead="getSeriesNames"
 							ng-blur="render()"
 							data-min-length=0 data-items=100
-							class="input-medium grafana-target-segment-input" >
+							class="input-medium tight-form-input" >
 						</li>
-						<li class="grafana-target-segment" ng-repeat="option in currentOverrides">
+						<li class="tight-form-item" ng-repeat="option in currentOverrides">
 							<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
 							{{option.name}}: {{option.value}}
 						</li>

src/app/panels/singlestat/editor.html

@@ -1,63 +1,63 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Big value</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Prefix
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input"
+						<input type="text" class="input-small tight-form-input"
 					  	ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Value
 					</li>
 					<li>
-						<select class="input-small grafana-target-segment-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
+						<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Postfix
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input last"
+						<input type="text" class="input-small tight-form-input last"
 					  	ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Font size</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Prefix
 					</li>
 					<li>
-						<select class="input-small grafana-target-segment-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+						<select class="input-small tight-form-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Value
 					</li>
 					<li>
-						<select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+						<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Postfix
 					</li>
 					<li>
-						<select class="input-small grafana-target-segment-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+						<select class="input-small tight-form-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Unit</strong>
 					</li>
 					<li class="dropdown" style="width: 130px;"
@@ -74,39 +74,39 @@
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Coloring</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Background&nbsp;
 						<input class="cr1" id="panel.colorBackground" type="checkbox"
 						    ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
 						<label for="panel.colorBackground" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Value&nbsp;
 						<input class="cr1" id="panel.colorValue" type="checkbox"
 						    ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
 						<label for="panel.colorValue" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Thresholds<tip>Comma seperated values</tip>
 					</li>
 					<li>
-						<input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+						<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Colors
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
 						<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
 						<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
 					</li>
-					<li class="grafana-target-segment last">
+					<li class="tight-form-item last">
 						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
 					</li>
 				</ul>
@@ -118,34 +118,34 @@
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
 						<strong>Spark lines</strong>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Show&nbsp;
 						<input class="cr1" id="panel.sparkline.show" type="checkbox"
 						    ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
 						<label for="panel.sparkline.show" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Background mode&nbsp;
 						<input class="cr1" id="panel.sparkline.full" type="checkbox"
 						    ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
 						<label for="panel.sparkline.full" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Line Color
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						Fill Color
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
 					</li>
 				</ul>
@@ -157,27 +157,27 @@
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment">
+		<div class="tight-form">
+			<div class="tight-form-row">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
 						<strong>Value to text mapping</strong>
 					</li>
-					<li class="grafana-target-segment"  ng-repeat-start="map in panel.valueMaps">
+					<li class="tight-form-item"  ng-repeat-start="map in panel.valueMaps">
 						<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
 					</li>
 					<li>
-						<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
+						<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="render()">
 					</li>
-					<li class="grafana-target-segment">
+					<li class="tight-form-item">
 						<i class="fa fa-arrow-right"></i>
 					</li>
 					<li ng-repeat-end>
-						<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
+						<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="render()">
 					</li>
 
 					<li>
-						<a class="pointer grafana-target-segment" ng-click="addValueMap();">
+						<a class="pointer tight-form-item" ng-click="addValueMap();">
 							<i class="fa fa-plus"></i>
 						</a>
 					</li>

src/app/partials/submenu.html

@@ -1,9 +1,9 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
-		<div class="grafana-target">
-			<div class="grafana-target-inner" style="border-top: none">
+		<div class="tight-form">
+			<div class="tight-form-row" style="border-top: none">
 
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
 						<div class="dropdown">
 							<a class="pointer" data-toggle="dropdown">
 								<i class="fa fa-cog"></i>
@@ -16,8 +16,8 @@
 					</li>
 				</ul>
 
-				<ul class="grafana-segment-list" ng-if="dashboard.templating.enable">
-					<li ng-repeat-start="variable in variables" class="grafana-target-segment template-param-name">
+				<ul class="tight-form-list" ng-if="dashboard.templating.enable">
+					<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
 						<span class="template-variable ">
 						${{variable.name}}:
 						</span>
@@ -27,8 +27,8 @@
 					</li>
 				</ul>
 
-				<ul class="grafana-segment-list" ng-if="dashboard.annotations.enable">
-					<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+				<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
+					<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
 						<a ng-click="disableAnnotation(annotation)">
 							<i class="annotation-color-icon fa fa-bolt"></i>
 							{{annotation.name}}

src/css/less/tightform.less

@@ -78,7 +78,7 @@
 }
 
 //.grafana-target-function {
-.tight-form-item-func {
+.tight-form-func {
   background: @grafanaTargetFuncBackground;
   > a {
     color: @grafanaTargetColor;
@@ -103,16 +103,16 @@ input[type=text].tight-form-func-param {
 }
 
 //input[type=text].grafana-target-text-input {
-// input[type=text].tight-form-input {
-//   padding: 8px 7px;
-//   border: none;
-//   margin: 0px;
-//   background: transparent;
-//   float: left;
-//   color: @grafanaTargetColor;
-//   border-radius: 0;
-//   border-right: 1px solid @grafanaTargetSegmentBorder;
-// }
+input[type=text].tight-form-clear-input {
+  padding: 8px 7px;
+  border: none;
+  margin: 0px;
+  background: transparent;
+  float: left;
+  color: @grafanaTargetColor;
+  border-radius: 0;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+}
 
 //[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
 [type=text].tight-form-input, [type=number].tight-form-input {
@@ -126,9 +126,10 @@ input[type=text].tight-form-func-param {
   }
 }
 
-// input[type=checkbox].grafana-target-option-checkbox {
-//   margin: 0;
-// }
+//input[type=checkbox].grafana-target-option-checkbox {
+input[type=checkbox].tight-form-checkbox {
+  margin: 0;
+}
 
 select.tight-form-input {
   border: none;