From b6313e78f2a15a20567576992213a4b0aec3a976 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Thu, 23 Apr 2020 11:29:44 -0400
Subject: [PATCH] ui: Update Breadcrumbs styling (#7687)

---
 .../base/components/breadcrumbs/index.scss    | 22 +++-------
 .../base/components/breadcrumbs/layout.scss   | 18 ++++----
 .../base/components/breadcrumbs/skin.scss     | 41 ++++++-------------
 ui-v2/app/templates/dc/services/instance.hbs  |  1 -
 4 files changed, 28 insertions(+), 54 deletions(-)

diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss
index ebf1af8eb58c..014f32d18fc5 100644
--- a/ui-v2/app/styles/base/components/breadcrumbs/index.scss
+++ b/ui-v2/app/styles/base/components/breadcrumbs/index.scss
@@ -1,23 +1,11 @@
 @import './skin';
 @import './layout';
-%breadcrumbs li > * {
-  @extend %breadcrumb;
-}
-%breadcrumbs strong {
-  @extend %breadcrumb-selected;
+%breadcrumbs li a {
+  @extend %crumbs;
 }
-%breadcrumbs-milestone {
-  @extend %breadcrumbs;
+%breadcrumbs li:not(:first-child) a {
+  @extend %breadcrumb;
 }
-%breadcrumbs-milestone li:first-child > * {
+%breadcrumbs li:first-child a {
   @extend %breadcrumb-milestone;
 }
-%breadcrumbs-filesystem {
-  @extend %breadcrumbs;
-}
-%breadcrumbs-filesystem li:not(:first-child) > * {
-  @extend %breadcrumb-path;
-}
-%breadcrumbs-filesystem li:first-child > * {
-  @extend %breadcrumb-folder;
-}
diff --git a/ui-v2/app/styles/base/components/breadcrumbs/layout.scss b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss
index 1b3faf25cfcb..4ffda16d911e 100644
--- a/ui-v2/app/styles/base/components/breadcrumbs/layout.scss
+++ b/ui-v2/app/styles/base/components/breadcrumbs/layout.scss
@@ -1,11 +1,15 @@
-%breadcrumbs {
+%breadcrumbs > li {
+  list-style-type: none;
   display: inline-flex;
 }
-%breadcrumbs li > * {
-  display: inline-flex;
-  align-items: center;
+%breadcrumb-milestone::before {
+  margin-right: 4px;
+  display: inline-block;
+}
+%breadcrumb {
+  margin-left: 8px;
 }
-%breadcrumbs li > *::before,
-%breadcrumbs li {
-  margin-right: 0.5em;
+%breadcrumb::before {
+  margin-right: 8px;
+  display: inline-block;
 }
diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
index d2f9acf6e3e4..f7764062edc9 100644
--- a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
+++ b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss
@@ -1,36 +1,19 @@
-%breadcrumbs li {
-  list-style-type: none;
+%crumbs {
+  color: $gray-500;
+  text-decoration: none;
 }
-%breadcrumb::before {
-  line-height: 1;
-  font-size: 0.7em;
-  margin-top: 0.2em;
+%crumbs:hover {
+  color: $blue-500;
+  text-decoration: underline;
 }
-%breadcrumb::before {
-  content: '❮';
+%crumbs::before {
+  text-decoration: none;
 }
 %breadcrumb-milestone::before {
-  content: '❮❮';
-}
-%breadcrumb-path::before {
-  content: '/';
-}
-%breadcrumb-folder::before {
-  position: relative;
-  top: 2px;
-  margin-top: -4px;
-  @extend %with-folder-outline-color-icon;
-  @extend %as-pseudo;
-}
-%breadcrumb {
-  color: $color-action;
-}
-%breadcrumb-selected {
-  color: $gray-400;
+  @extend %with-chevron-left-mask, %as-pseudo;
+  background-color: $gray-500;
 }
 %breadcrumb::before {
-  color: rgba($color-action, 0.5);
-}
-%breadcrumb-selected::before {
-  color: $gray-300;
+  content: '/';
+  color: $gray-500;
 }
diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
index f2b03daacd90..e27ffdc11410 100644
--- a/ui-v2/app/templates/dc/services/instance.hbs
+++ b/ui-v2/app/templates/dc/services/instance.hbs
@@ -7,7 +7,6 @@
         <ol>
             <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
             <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service}})</a></li>
-            <li><strong>Instance</strong></li>
         </ol>
     </BlockSlot>
     <BlockSlot @name="header">