sass refactoring and updating styles for list item elements

public/sass/components/_filter-table.scss

@@ -14,11 +14,10 @@
 .filter-table {
   width: 100%;
   border-collapse: collapse;
-  // table-layout: fixed;
 }
 
 .filter-table tr {
-  background: $grafanaListBackground;
+  background-color: $list-item-bg;
   border-bottom: 3px solid $page-bg;
 }
 

public/sass/components/_panel_dashlist.scss

@@ -8,22 +8,17 @@
 }
 
 .dashlist-link {
-  display: block;
-  margin: 5px;
-  padding: 7px;
-  background-color: $tight-form-bg;
-  border: $input-btn-border-width solid $input-label-border-color;
+  @include list-item();
+
   .fa {
     padding-top: 3px;
   }
+
   .dashlist-star {
     float: right;
   }
+
   .fa-star {
     color: $orange;
   }
-
-  &:hover {
-    background-color: $tight-form-func-bg;
-  }
 }

public/sass/components/_panel_graph.scss

@@ -139,7 +139,7 @@
   }
 
   .graph-legend-series:nth-child(odd) {
-    background-color: $grafanaListAccent;
+    background: $table-bg-accent;
   }
 
   .graph-legend-value {

public/sass/components/_panel_pluginlist.scss

@@ -8,14 +8,7 @@
 }
 
 .pluginlist-link {
-  display: block;
-  margin: 5px;
-  padding: 7px;
-  background-color: $tight-form-bg;
-
-  &:hover {
-    background-color: $tight-form-func-bg;
-  }
+  @include list-item();
 }
 
 .pluginlist-icon {

public/sass/components/_panel_singlestat.scss

@@ -19,35 +19,6 @@
   padding-right: 20px;
 }
 
-.singlestat-panel-table {
-  width: 100%;
-  td {
-    padding: 5px 10px;
-    white-space: nowrap;
-    text-align: right;
-    border-bottom: 1px solid $grafanaListBorderBottom;
-  }
-
-  th {
-    text-align: right;
-    padding: 5px 10px;
-    font-weight: bold;
-    color: $blue
-  }
-
-  td:first-child {
-    text-align: left;
-  }
-
-  tr:nth-child(odd) td {
-    background-color: $grafanaListAccent;
-  }
-
-  tr:last-child td {
-    border: none;
-  }
-}
-
 #flotGagueValue0 {
   font-weight: bold; //please dont hurt me for this!
 }

public/sass/components/_panel_table.scss

@@ -27,9 +27,11 @@
     margin-left: 0;
     margin-bottom: 0;
   }
+
   ul > li {
     display: inline; // Remove list-style and block-level defaults
   }
+
   ul > li > a {
     float: left; // Collapse white-space
     padding: 4px 12px;
@@ -109,7 +111,7 @@
 }
 
 .table-panel-header-bg {
-  background: $grafanaListAccent;
+  background: $list-item-bg;
   border-top: 2px solid $body-bg;
   border-bottom: 2px solid $body-bg;
   height: 2.0em;

public/sass/components/_search.scss

@@ -120,21 +120,20 @@
 }
 
 .search-item {
-  display: flex;
-  height: 37px;
-  padding: 0px;
-  white-space: nowrap;
-  background-color: $tight-form-bg;
-  margin-bottom: 4px;
+  @include list-item();
   @include left-brand-border();
 
+  display: flex;
+  height: 37px;
+  white-space: nowrap;
+  padding: 0px;
+
   &:hover {
-    @include left-brand-border-gradient();
-    background-color: $tight-form-func-bg;
+    @include left-brand-border-gradient($gray-blue);
   }
 
   &.selected {
-    background-color: $tight-form-func-bg;
+    background: $list-item-hover-bg;
   }
 
   // .fa-star, .fa-star-o {
@@ -156,11 +155,10 @@
 }
 
 .search-item__body-title {
-  color: $grafanaListMainLinkColor;
+  color: $list-item-link-color;
 }
 
 .search-item__body-sub-title {
-  color: $grafanaListMainLinkColor;
   color: $text-muted;
   font-size: $font-size-sm;
   line-height: 9pt;

public/sass/components/_tables_lists.scss

@@ -8,7 +8,7 @@
   }
 
   tr td {
-    background-color: $grafanaListBackground;
+    background-color: $list-item-bg;
     padding: 5px 10px;
     white-space: nowrap;
     border-bottom: 4px solid $panel-bg;
@@ -37,7 +37,7 @@
   display: block;
   padding: 1px 10px;
   line-height: 34px;
-  background-color: $tight-form-bg;
+  background-color: $list-item-bg;
   margin-bottom: 4px;
   cursor: pointer;
 }