From 148a4c6c2d844445a70a6aad93df69fe191a6703 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Wed, 18 Oct 2017 07:49:52 +0200
Subject: [PATCH] Grafana5 light (#9559)

* variable for theme name for icons

* changes to navbar, sidemenu, breadcrumb, form-labels, dashlistlinks, searchitems etc

* fixed some missed issues with breadcrumbs
---
 public/sass/_variables.dark.scss            |  7 ++-
 public/sass/_variables.light.scss           | 35 +++++++------
 public/sass/base/_icons.scss                | 12 ++---
 public/sass/components/_gf-form.scss        |  4 +-
 public/sass/components/_navbar.scss         |  4 +-
 public/sass/components/_panel_dashlist.scss |  1 +
 public/sass/components/_scrollbar.scss      |  2 +-
 public/sass/components/_search.scss         |  1 +
 public/sass/components/_sidemenu.scss       |  4 +-
 public/sass/components/_tabbed_view.scss    |  1 -
 public/sass/layout/_page.scss               | 54 ++++-----------------
 public/sass/pages/_dashboard.scss           |  1 -
 12 files changed, 51 insertions(+), 75 deletions(-)

diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index d00372f26f3..2bad240d49b 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -1,6 +1,7 @@
 // Global values
 // --------------------------------------------------
 
+$theme-name: dark;
 
 // Grays
 // -------------------------
@@ -172,7 +173,8 @@ $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:				         $dark-3;
+$input-label-bg:				 #292a2d;
+$input-label-border-color:       transparent;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Search
@@ -216,6 +218,7 @@ $navbarHeight:                    52px;
 $navbarBackgroundHighlight:       $dark-3;
 $navbarBackground:                $panel-bg;
 $navbarBorder:                    1px solid $body-bg;
+$navbarShadow:                    0 0 20px black;
 
 $navbarText:                      $gray-4;
 $navbarLinkColor:                 $gray-4;
@@ -233,6 +236,8 @@ $navbarButtonBackgroundHighlight: $body-bg;
 // -------------------------
 $side-menu-bg:            $black;
 $side-menu-item-hover-bg: $dark-2;
+$side-menu-shadow:        0 0 20px black;
+$breadcrumb-hover-hl:   #111;
 
 // Menu dropdowns
 // -------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index c4860961363..4f3c70f3f60 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -6,6 +6,7 @@
 // Global values
 // --------------------------------------------------
 
+$theme-name: light;
 
 // Grays
 // -------------------------
@@ -68,8 +69,8 @@ $text-shadow-faint: none;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
-$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
-$dashboard-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
+$dashboard-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
 
 // Links
 // -------------------------
@@ -106,8 +107,8 @@ $panel-header-menu-hover-bg:  $gray-4;
 $divider-border-color:	      $gray-2;
 
 // Graphite Target Editor
-$tight-form-border:   $gray-4;
-$tight-form-bg:    		$gray-6;
+$tight-form-border:     $gray-4;
+$tight-form-bg:    	    #eaebee;
 
 $tight-form-func-bg:            $gray-5;
 $tight-form-func-highlight-bg:  $gray-6;
@@ -117,7 +118,7 @@ $code-tag-bg:       $gray-6;
 $code-tag-border:   darken($code-tag-bg, 3%);
 
 // Lists
-$grafanaListBackground:    	   $gray-6;
+$grafanaListBackground:    	   #eaebee;
 $grafanaListAccent:            $gray-5;
 $grafanaListBorderTop:         $gray-3;
 $grafanaListBorderBottom:      $gray-3;
@@ -178,13 +179,15 @@ $input-box-shadow:               none;
 $input-border-focus:             $blue !default;
 $input-box-shadow-focus:         $blue !default;
 $input-color-placeholder:        $gray-4 !default;
-$input-label-bg:	        	     $gray-6;
+$input-label-bg:	        	 #eaebee;
+$input-label-border-color:       #e3e4e7;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Sidemenu
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $gray-6;
+$side-menu-shadow:        0 0 5px #c2c2c2;
 
 // Menu dropdowns
 // -------------------------
@@ -195,9 +198,10 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
 
 // Breadcrumb
 // -------------------------
-$page-nav-bg: $white;
-$page-nav-shadow: 5px 5px 20px -5px $gray-4;
+$page-nav-bg:               #eaebee;
+$page-nav-shadow:           5px 5px 20px -5px $gray-4;
 $page-nav-breadcrumb-color: $black;
+$breadcrumb-hover-hl:       #d9dadd;
 
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;
@@ -247,13 +251,14 @@ $wellBackground:                  $gray-3;
 
 $navbarHeight:                    52px;
 $navbarBackgroundHighlight:       #f8f8f8;
-$navbarBackground:                #f8f8f8;
+$navbarBackground:                #f2f3f7;
 $navbarBorder:                    1px solid $tight-form-border;
+$navbarShadow:                    0 0 3px #c1c1c1;
 
-$navbarText:                      #666;
-$navbarLinkColor:                 #666;
-$navbarLinkColorHover:            #333;
-$navbarLinkColorActive:           #555;
+$navbarText:                      #444;
+$navbarLinkColor:                 #444;
+$navbarLinkColorHover:            #000;
+$navbarLinkColorActive:           #333;
 $navbarLinkBackgroundHover:       transparent;
 $navbarLinkBackgroundActive:      darken($navbarBackground, 6.5%);
 $navbarDropdownShadow:            inset 0px 4px 7px -4px darken($body-bg, 20%);
@@ -278,9 +283,9 @@ $error-text-color:              lighten($red, 10%);
 $success-text-color:            lighten($green, 10%);
 $info-text-color:                     $blue;
 
-$alert-error-bg:          linear-gradient(90deg, #d44939, #e0603d);
+$alert-error-bg:          linear-gradient(90deg, #d44939, #e04d3d);
 $alert-success-bg:        linear-gradient(90deg, #3aa655, #47b274);
-$alert-warning-bg:        linear-gradient(90deg, #d44939, #e0603d);
+$alert-warning-bg:        linear-gradient(90deg, #d44939, #e04d3d);
 $alert-info-bg:           $blue-dark;
 
 // popover
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index b35f39eb24f..414ca44c1a9 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -12,27 +12,27 @@
 }
 
 .gicon-alert {
-  background-image: url('../img/icons_dark_theme/icon_alert.svg');
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
 }
 
 .gicon-dashboard {
-  background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg');
 }
 
 .gicon-dashboard-starred {
-  background-image: url('../img/icons_dark_theme/icon_dashboard_fav.svg');
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg');
 }
 
 .gicon-dashboard-new {
-  background-image: url('../img/icons_dark_theme/icon_new_dashboard.svg');
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_new_dashboard.svg');
 }
 
 .gicon-folder-new {
-  background-image: url('../img/icons_dark_theme/icon_add_folder.svg');
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_add_folder.svg');
 }
 
 .gicon-dashboard-import {
-  background-image: url('../img/icons_dark_theme/icon_import_dashboard.svg');
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_import_dashboard.svg');
 }
 
 
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e9c1a841c9c..421e80f89d1 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -59,11 +59,11 @@ $gf-form-margin: 3px;
   flex-shrink: 0;
   font-weight: $font-weight-semi-bold;
 
-  background-color: #292a2d; //$input-label-bg;
+  background-color: $input-label-bg;
   display: block;
   font-size: $font-size-sm;
 
-  border: $input-btn-border-width solid transparent;
+  border: $input-btn-border-width solid $input-label-border-color;
   @include border-radius($label-border-radius-sm);
 
 
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index b4692e49dcc..8b69f8f8ccc 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -4,14 +4,14 @@
   overflow: visible;
   position: relative;
   padding-left: $side-menu-width;
-  box-shadow: 0 0 20px black;
+  box-shadow: $navbarShadow;
   z-index: 1;
+  background-color: $navbarBackground;
 }
 
 .navbar-inner {
   min-height: $navbarHeight;
   padding-right: $spacer;
-  background-color: $navbarBackground;
   display: flex;
   @include clearfix();
 }
diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss
index 16cf415e521..71ae2bc3b08 100644
--- a/public/sass/components/_panel_dashlist.scss
+++ b/public/sass/components/_panel_dashlist.scss
@@ -12,6 +12,7 @@
   margin: 5px;
   padding: 7px;
   background-color: $tight-form-bg;
+  border: $input-btn-border-width solid $input-label-border-color;
   .fa {
     float: right;
     padding-top: 3px;
diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss
index 6ad40d1abf7..ba59d66fa49 100644
--- a/public/sass/components/_scrollbar.scss
+++ b/public/sass/components/_scrollbar.scss
@@ -77,7 +77,7 @@
 
 .gm-scrollbar .thumb:hover,
 .gm-scrollbar .thumb:active {
-  background-color: $blue;
+  background-color: $blue-dark;
 }
 
 .gm-scrollbar.-vertical .thumb {
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index b4dc7d1b13f..f4ca3dc3d88 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -111,6 +111,7 @@
   padding: 3px 10px;
   white-space: nowrap;
   background-color: $tight-form-bg;
+  border: $input-btn-border-width solid $input-label-border-color;;
   margin-bottom: 4px;
   @include left-brand-border();
 
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index c7a1879ed39..088b09b7360 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -17,9 +17,9 @@
     background: $side-menu-bg;
     position: initial;
     height: auto;
-    box-shadow: 0 0 20px black;
+    box-shadow: $side-menu-shadow;
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
   .sidemenu__top,
   .sidemenu__bottom {
diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss
index 48ea259c36e..1a2f6eaa6ae 100644
--- a/public/sass/components/_tabbed_view.scss
+++ b/public/sass/components/_tabbed_view.scss
@@ -52,7 +52,6 @@
 }
 
 .tabbed-view-body {
-  background-color: $panel-bg;
   padding: $spacer*2 $spacer;
 
   &--small {
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 9708602f309..24616e7236f 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -121,69 +121,35 @@
   margin-bottom: $spacer*2;
 }
 
-$breadcrumb-hover-hl: #111;
-
-$page-breadcrumb__angle-1: 39px;
-$page-breadcrumb__angle-ul: 31px;
-$page-breadcrumb__angle-a: 30px;
-
-
 .page-breadcrumb {
   display: flex;
   padding: 0 $spacer;
   line-height: 0.5;
+  margin-left: 2em;
 }
 
 .page-breadcrumb__item {
   background: $page-nav-bg;
-  box-shadow: $page-nav-shadow;
+  margin-right: .2rem;
+  transform: skewX(-35deg);
 
 
   > a {
     color: $page-nav-breadcrumb-color;
     font-size: $font-size-sm;
     display: block;
-    padding: 0.6rem 1rem 0.6rem 3rem;;
+    padding: 0.6rem 1rem 0.6rem 1rem;;
     position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: -53px;
-      left: 100%;
-      content: '';
-      height: 0;
-      width: 0;
-      border: $page-breadcrumb__angle-1 solid transparent;
-      border-right-width: 0;
-      border-left-width: $page-breadcrumb__angle-a;
-      z-index: 2;
-      border-left-color: $page-nav-bg;
-    }
+    transform: skewX(35deg);
   }
 
-  &:first-child {
-    a {
-      padding-left: 1rem;
-    }
+  &:last-child {
+    background: $breadcrumb-hover-hl;;
   }
 
-  &::after {
-    content: '';
-    position: absolute;
-    top: -53px;
-    left: 100%;
-    content: '';
-    height: 0;
-    width: 0;
-    border: $page-breadcrumb__angle-1 solid transparent;
-    border-right-width: 0;
-    border-left-width: $page-breadcrumb__angle-ul;
-    z-index: 1;
-    transform: translateX(4px);
-    border-left-color: #282020;
-    margin: 0;
-  }
+
+
+
 
   &:hover {
     background: $breadcrumb-hover-hl;
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 11a298f43f9..5738c4a02df 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -1,6 +1,5 @@
 .dashboard-container {
   padding: $dashboard-padding;
-  background: $dashboard-gradient;
   width: 100%;
   min-height: 100%;
 }