From 458f6fc4b2b1846fb9f576e1d64434b75cf888e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 23 Nov 2017 12:54:12 +0100
Subject: [PATCH] sass refactoring and updating styles for list item elements

---
 public/app/plugins/panel/table/editor.html    |  6 ++--
 public/sass/_variables.dark.scss              | 22 +++++++-------
 public/sass/_variables.light.scss             | 21 ++++++--------
 public/sass/components/_filter-table.scss     |  3 +-
 public/sass/components/_panel_dashlist.scss   | 13 +++------
 public/sass/components/_panel_graph.scss      |  2 +-
 public/sass/components/_panel_pluginlist.scss |  9 +-----
 public/sass/components/_panel_singlestat.scss | 29 -------------------
 public/sass/components/_panel_table.scss      |  4 ++-
 public/sass/components/_search.scss           | 20 ++++++-------
 public/sass/components/_tables_lists.scss     |  4 +--
 public/sass/mixins/_mixins.scss               | 16 ++++++++--
 public/sass/pages/_playlist.scss              |  6 ++--
 13 files changed, 60 insertions(+), 95 deletions(-)

diff --git a/public/app/plugins/panel/table/editor.html b/public/app/plugins/panel/table/editor.html
index 36d78b09dfa..582a2366584 100644
--- a/public/app/plugins/panel/table/editor.html
+++ b/public/app/plugins/panel/table/editor.html
@@ -35,16 +35,16 @@
 		<h5 class="section-heading">Paging</h5>
     <div class="gf-form">
       <label class="gf-form-label width-8">Rows per page</label>
-      <input type="number" class="gf-form-input width-6"
+      <input type="number" class="gf-form-input width-7"
                            placeholder="100" data-placement="right"
                                              ng-model="editor.panel.pageSize"
                                              ng-change="editor.render()"
                                              ng-model-onblur>
     </div>
-    <gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-6" label="Scroll" checked="editor.panel.scroll" on-change="editor.render()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label-class="width-8" switch-class="max-width-7" label="Scroll" checked="editor.panel.scroll" on-change="editor.render()"></gf-form-switch>
     <div class="gf-form max-width-17">
       <label class="gf-form-label width-8">Font size</label>
-      <div class="gf-form-select-wrapper width-6">
+      <div class="gf-form-select-wrapper width-7">
         <select class="gf-form-input"
                 ng-model="editor.panel.fontSize"
                 ng-options="f for f in editor.fontSizes"
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 85a0f8f9abe..9100f99ec91 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -21,6 +21,7 @@ $gray-4:           #D8D9DA;
 $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;
+$gray-blue:				 #292a2d;
 
 $white:            #fff;
 
@@ -108,14 +109,16 @@ $modal-backdrop-bg: #353c42	;
 $code-tag-bg:       $gray-1;
 $code-tag-border:   lighten($code-tag-bg, 2%);
 
+// cards
+$card-background: linear-gradient(135deg, #2f2f32, #262628);
+$card-background-hover: linear-gradient(135deg, #343436, #262628);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
 
 // Lists
-$grafanaListBackground:  	  $dark-4;
-$grafanaListAccent:      	  lighten($dark-2, 2%);
-$grafanaListBorderTop:      $dark-3;
-$grafanaListBorderBottom:   $black;
-$grafanaListHighlight:      #333;
-$grafanaListMainLinkColor:  $text-color;
+$list-item-bg:         $card-background;
+$list-item-hover-bg:   lighten($gray-blue, 5%);
+$list-item-link-color: $text-color;
+$list-item-shadow:     $card-shadow;
 
 // Scrollbars
 $scrollbarBackground: #3a3a3a;
@@ -171,7 +174,7 @@ $input-box-shadow:               inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.
 $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        $gray-1 !default;
-$input-label-bg:				         #292a2d;
+$input-label-bg:				         $gray-blue;
 $input-label-border-color:       transparent;
 $input-invalid-border-color:     lighten($red, 5%);
 
@@ -292,11 +295,6 @@ $graph-tooltip-bg:        $dark-1;
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 
-// cards
-$card-background: linear-gradient(135deg, #2f2f32, #262628);
-$card-background-hover: linear-gradient(135deg, #343436, #262628);
-$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
-
 // info box
 $info-box-background: linear-gradient(100deg, #1a4552, #00374a);
 
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 5532281ea93..61c2c34962a 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -115,14 +115,16 @@ $modal-backdrop-bg: $body-bg;
 $code-tag-bg:       $gray-6;
 $code-tag-border:   darken($code-tag-bg, 3%);
 
-// Lists
-$grafanaListBackground:    	   #eaebee;
-$grafanaListAccent:            $gray-5;
-$grafanaListBorderTop:         $gray-3;
-$grafanaListBorderBottom:      $gray-3;
-$grafanaListHighlight:         $gray-5;
-$grafanaListMainLinkColor:     $text-color;
+// cards
+$card-background: linear-gradient(135deg, $gray-5, $gray-6);
+$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 
+// Lists
+$list-item-bg:         $card-background;
+$list-item-hover-bg:   darken($gray-5, 5%);
+$list-item-link-color: $text-color;
+$list-item-shadow:     $card-shadow;
 
 // Tables
 // -------------------------
@@ -308,11 +310,6 @@ $graph-tooltip-bg:        $gray-5;
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
 
-// cards
-$card-background: linear-gradient(135deg, $gray-5, $gray-6);
-$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
-$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-
 // info box
 $info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);
 
diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss
index 37ae3875679..3aaaafef84f 100644
--- a/public/sass/components/_filter-table.scss
+++ b/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;
 }
 
diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss
index 3c643fdd945..09ad4208099 100644
--- a/public/sass/components/_panel_dashlist.scss
+++ b/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;
-  }
 }
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index c92e5a0d3d0..b5c0ec2c66a 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/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 {
diff --git a/public/sass/components/_panel_pluginlist.scss b/public/sass/components/_panel_pluginlist.scss
index 605e1afdb6a..f000b795dc1 100644
--- a/public/sass/components/_panel_pluginlist.scss
+++ b/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 {
diff --git a/public/sass/components/_panel_singlestat.scss b/public/sass/components/_panel_singlestat.scss
index 41d746e583a..768c29f6d03 100644
--- a/public/sass/components/_panel_singlestat.scss
+++ b/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!
 }
diff --git a/public/sass/components/_panel_table.scss b/public/sass/components/_panel_table.scss
index 77652bc634d..b3512738fb3 100644
--- a/public/sass/components/_panel_table.scss
+++ b/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;
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index 972a7fe61b6..06e3470226a 100644
--- a/public/sass/components/_search.scss
+++ b/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;
diff --git a/public/sass/components/_tables_lists.scss b/public/sass/components/_tables_lists.scss
index 6787ef2869e..43be08eac33 100644
--- a/public/sass/components/_tables_lists.scss
+++ b/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;
 }
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss
index 78f9d3fca08..8df291f2402 100644
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -330,8 +330,8 @@
   background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 }
 
-@mixin left-brand-border() {
-  border-left: 2px solid transparent;
+@mixin left-brand-border($color: transparent) {
+  border-left: 2px solid $color;
 }
 
 @mixin left-brand-border-gradient() {
@@ -355,4 +355,16 @@
   border-bottom-width: 1px;
 }
 
+@mixin list-item() {
+  display: block;
+  margin: 3px;
+  padding: 7px;
+  background: $list-item-bg;
+  box-shadow: $list-item-shadow;
+  color: $list-item-link-color;
+
+  &:hover {
+    background-color: $list-item-hover-bg;
+  }
+}
 
diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss
index d0d8f04f130..59fa3789d05 100644
--- a/public/sass/pages/_playlist.scss
+++ b/public/sass/pages/_playlist.scss
@@ -51,7 +51,7 @@
   line-height: 28px;
 
   .search-item:hover, .search-item.selected {
-    background-color: $grafanaListHighlight;
+    background-color: $list-item-hover-bg;
   }
 
   .selected {
@@ -70,7 +70,7 @@
   }
 
   .search-result-link {
-    color: $grafanaListMainLinkColor;
+    color: $list-item-link-color;
     .fa {
       padding-right: 10px;
     }
@@ -80,7 +80,7 @@
     display: block;
     padding: 3px 10px;
     white-space: nowrap;
-    background-color: $grafanaListBackground;
+    background-color: $list-item-bg;
     margin-bottom: 4px;
     .search-result-icon:before {
       content: "\f009";