More work on template editor

src/css/less/grafana.less

@@ -2,6 +2,8 @@
 @import "graph.less";
 @import "console.less";
 @import "bootstrap-tagsinput.less";
+@import "tables_lists.less";
+@import "search.less";
 
 .hide-controls {
   padding: 0;
@@ -32,85 +34,6 @@
   }
 }
 
-// Search
-.grafana-search-panel {
-  .search-field-wrapper {
-    padding: 6px 10px;
-    input {
-      width: 100%;
-    }
-    button {
-      margin: 0 4px 0 0;
-    }
-    > span {
-      display: block;
-      overflow: hidden;
-      padding-right: 25px;
-    }
-  }
-}
-
-.search-results-container {
-  height: 500px;
-  overflow: auto;
-  display: block;
-  line-height: 28px;
-
-  .search-result-item:hover, .search-result-item.selected {
-    .search-result-link, .search-result-link > .icon {
-      color: @grafanaListHighlight;
-    }
-    .search-result-tag {
-      opacity: 0.70;
-      color: white;
-    }
-  }
-
-  .search-result-link {
-    color: @grafanaListMainLinkColor;
-    .icon {
-      padding-right: 10px;
-      color: @grafanaListHighlightContrast;
-    }
-  }
-
-  .search-result-item:nth-child(odd) {
-    background-color: lighten(@grayDarker, 2%);
-  }
-
-  .search-result-item {
-    padding: 0px 10px;
-    white-space: nowrap;
-    border-bottom: 1px solid @grafanaListBorderBottom;
-    border-top: 1px solid @grafanaListBorderTop;
-    border-left: 1px solid @grafanaListBorderBottom;
-  }
-
-  .search-result-tags {
-    float: right;
-    .label-tag {
-      margin-left: 6px;
-      font-size: 11px;
-      padding: 2px 6px;
-    }
-  }
-
-  .search-result-actions {
-    float: right;
-    padding-left: 20px;
-  }
-}
-
-.search-tagview-switch {
-  position: absolute;
-  top: 6px;
-  right: 24px;
-  color: darken(@linkColor, 30%);
-  &.active {
-    color: @linkColor;
-  }
-}
-
 .row-button {
   width: 24px;
 }

src/css/less/search.less

@@ -0,0 +1,83 @@
+// Search
+.grafana-search-panel {
+  .search-field-wrapper {
+    padding: 6px 10px;
+    input {
+      width: 100%;
+    }
+    button {
+      margin: 0 4px 0 0;
+    }
+    > span {
+      display: block;
+      overflow: hidden;
+      padding-right: 25px;
+    }
+  }
+}
+
+.search-results-container {
+  height: 500px;
+  overflow: auto;
+  display: block;
+  line-height: 28px;
+
+  .search-result-item:hover, .search-result-item.selected {
+    .search-result-link, .search-result-link > .icon {
+      color: @grafanaListHighlight;
+    }
+  }
+
+  .selected {
+    .search-result-tag {
+      opacity: 0.70;
+      color: white;
+    }
+  }
+
+  .search-result-link {
+    color: @grafanaListMainLinkColor;
+    .icon {
+      padding-right: 10px;
+      color: @grafanaListHighlightContrast;
+    }
+  }
+
+  .search-result-item:nth-child(odd) {
+    background-color: lighten(@grayDarker, 2%);
+  }
+
+  .search-result-item {
+    padding: 0px 10px;
+    white-space: nowrap;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+    border-top: 1px solid @grafanaListBorderTop;
+    border-left: 1px solid @grafanaListBorderBottom;
+  }
+
+  .search-result-tags {
+    float: right;
+    .label-tag {
+      margin-left: 6px;
+      font-size: 11px;
+      padding: 2px 6px;
+    }
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 20px;
+  }
+}
+
+.search-tagview-switch {
+  position: absolute;
+  top: 6px;
+  right: 24px;
+  color: darken(@linkColor, 30%);
+  &.active {
+    color: @linkColor;
+  }
+}
+
+

src/css/less/tables_lists.less

@@ -0,0 +1,29 @@
+.grafana-options-table {
+  width: 100%;
+
+  tr:nth-child(odd) td {
+    background-color: lighten(@grayDarker, 2%);
+  }
+
+  td {
+    padding: 5px 10px;
+    white-space: nowrap;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+    border-top: 1px solid @grafanaListBorderTop;
+  }
+
+  td:first-child {
+    border-left: 1px solid @grafanaListBorderBottom;
+  }
+
+  td:last-child {
+    border-right: 1px solid @grafanaListBorderBottom;
+  }
+
+  .max-width {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}