Merge branch 'develop-ux-wip' of github.com:grafana/grafana into develop-ux-wip

.gitignore

@@ -41,3 +41,6 @@ profile.cov
 /examples/*/dist
 /packaging/**/*.rpm
 /packaging/**/*.deb
+
+# Ignore OSX indexing
+.DS_Store

public/sass/_variables.dark.scss

@@ -166,7 +166,7 @@ $input-bg:                       $black;
 $input-bg-disabled:              $dark-3;
 
 $input-color:                    $gray-4;
-$input-border-color:             $dark-4;
+$input-border-color:             $dark-3;
 $input-box-shadow:               inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10);
 $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
@@ -240,6 +240,11 @@ $menu-dropdown-hover-bg:      $dark-2;
 $menu-dropdown-border-color:  $dark-3;
 $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 
+// Breadcrumb
+// -------------------------
+$page-nav-bg: $black;
+$page-nav-shadow: 5px 5px 20px -5px $black;
+
 
 // Pagination
 // -------------------------

public/sass/_variables.light.scss

@@ -192,6 +192,11 @@ $menu-dropdown-hover-bg:      $gray-6;
 $menu-dropdown-border-color:  $tight-form-border;
 $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
 
+// Breadcrumb
+// -------------------------
+$page-nav-bg: $white;
+$page-nav-shadow: 5px 5px 20px -5px $gray-4;
+
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;
 

public/sass/components/_dropdown.scss

@@ -120,6 +120,10 @@
       }
     }
   }
+  &--navbar {
+    background: $black;
+    font-size: $font-size-sm;
+  }
 }
 
 .dropdown-item-text {

public/sass/components/_gf-form.scss

-$gf-form-margin: 0.25rem;
+$gf-form-margin: 0.1rem;
 
 .gf-form {
   margin-bottom: $gf-form-margin;
@@ -51,11 +51,10 @@ $gf-form-margin: 0.25rem;
 
 .gf-form-label {
   padding: $input-padding-y $input-padding-x;
-  margin-right: $gf-form-margin;
   flex-shrink: 0;
   font-weight: $font-weight-semi-bold;
 
-  background-color: $input-label-bg;
+  background-color: #23252d; //$input-label-bg;
   display: block;
   font-size: $font-size-sm;
   margin-right: $gf-form-margin;
@@ -112,7 +111,9 @@ $gf-form-margin: 0.25rem;
   background-color: $input-bg;
   background-image: none;
   background-clip: padding-box;
-  border: $input-btn-border-width solid $input-border-color;
+  border: 1px solid $input-border-color;
+  border-bottom: none;
+  border-left: none;
   @include border-radius($input-border-radius-sm);
   @include box-shadow($input-box-shadow);
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

public/sass/layout/_page.scss

@@ -11,7 +11,7 @@
 .main-view {
   position: relative;
   flex-grow: 1;
-  background: inear-gradient(180deg, #1b1d25 0, #210d0d);
+  background: linear-gradient(180deg, #251f1f 0, #17181b);
 }
 
 .page-container {
@@ -102,22 +102,26 @@
 }
 
 $breadcrumb-hover-hl: #111;
-$page-nav-bg: black;
 
-.page-nav {
-  background: $page-nav-bg;
- }
+$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;
 }
 
 .page-breadcrumb__item {
   background: $page-nav-bg;
+  box-shadow: $page-nav-shadow;
+
 
   > a {
     color: $text-color-weak;
+    font-size: $font-size-sm;
     display: block;
     padding: 0.6rem 1rem 0.6rem 3rem;;
     position: relative;
@@ -130,9 +134,9 @@ $page-nav-bg: black;
       content: '';
       height: 0;
       width: 0;
-      border: 46px solid transparent;
+      border: $page-breadcrumb__angle-1 solid transparent;
       border-right-width: 0;
-      border-left-width: 41px;
+      border-left-width: $page-breadcrumb__angle-a;
       z-index: 2;
       border-left-color: $page-nav-bg;
     }
@@ -152,9 +156,9 @@ $page-nav-bg: black;
     content: '';
     height: 0;
     width: 0;
-    border: 46px solid transparent;
+    border: $page-breadcrumb__angle-1 solid transparent;
     border-right-width: 0;
-    border-left-width: 41px;
+    border-left-width: $page-breadcrumb__angle-ul;
     z-index: 1;
     transform: translateX(4px);
     border-left-color: #282020;
@@ -186,7 +190,7 @@ $page-nav-bg: black;
   width: 16px;
   height: 16px;
   right: -9px;
-  top: 12px;
+  top: 5px;
   z-index: 3;
 }