ui: Update Breadcrumbs styling (#7687)

ui-v2/app/styles/base/components/breadcrumbs/index.scss

@@ -1,23 +1,11 @@
 @import './skin';
 @import './layout';
-%breadcrumbs li > * {
+%breadcrumbs li a {
+  @extend %crumbs;
+}
+%breadcrumbs li:not(:first-child) a {
   @extend %breadcrumb;
 }
-%breadcrumbs strong {
-  @extend %breadcrumb-selected;
-}
-%breadcrumbs-milestone {
-  @extend %breadcrumbs;
-}
-%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;
-}

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;
 }
-%breadcrumbs li > *::before,
-%breadcrumbs li {
-  margin-right: 0.5em;
+%breadcrumb {
+  margin-left: 8px;
+}
+%breadcrumb::before {
+  margin-right: 8px;
+  display: inline-block;
 }

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;
 }

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">