From 588f35ef4fcdfb97b548c968d613eb55de4cb117 Mon Sep 17 00:00:00 2001
From: Matt <matt@raintank.io>
Date: Tue, 15 Aug 2017 10:54:13 +0200
Subject: [PATCH] Reduced size of breadcrumbs, additional form styling. Colors
 still need to be adjusted

---
 public/sass/components/_dropdown.scss |  4 ++++
 public/sass/components/_gf-form.scss  |  9 +++++----
 public/sass/layout/_page.scss         | 21 ++++++++++++---------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index c12a0ef4141..8dee2bcc2b9 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -120,6 +120,10 @@
       }
     }
   }
+  &--navbar {
+    background: $black;
+    font-size: $font-size-sm;
+  }
 }
 
 .dropdown-item-text {
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index bbf9d72084d..b2b17899308 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -1,4 +1,4 @@
-$gf-form-margin: 0.25rem;
+$gf-form-margin: 0.1rem;
 
 .gf-form {
   margin-bottom: $gf-form-margin;
@@ -54,10 +54,10 @@ $gf-form-margin: 0.25rem;
   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: 0;
+  margin-right: $gf-form-margin;
 
   border: $input-btn-border-width solid transparent;
   @include border-radius($label-border-radius-sm);
@@ -112,7 +112,8 @@ $gf-form-margin: 0.25rem;
   background-image: none;
   background-clip: padding-box;
   border: 1px solid $input-border-color;
-  border-bottom: 0px;
+  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;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index d823a8e457f..90d29d55108 100644
--- a/public/sass/layout/_page.scss
+++ b/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 {
@@ -107,13 +107,15 @@
 $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 {
@@ -121,6 +123,7 @@ $page-nav-bg: black;
 
   > a {
     color: $text-color-weak;
+    font-size: $font-size-sm;
     display: block;
     padding: 0.6rem 1rem 0.6rem 3rem;;
     position: relative;
@@ -133,9 +136,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;
     }
@@ -155,9 +158,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;
@@ -189,7 +192,7 @@ $page-nav-bg: black;
   width: 16px;
   height: 16px;
   right: -9px;
-  top: 12px;
+  top: 5px;
   z-index: 3;
 }