From acd992183cae30aeaaf2476e064bd6173351e2ad Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 24 Jun 2019 15:49:02 +0100
Subject: [PATCH] Use design system icon for breadcrumb
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is nicer because it’s drawn with CSS (so is resolution independent)
and is a bit darker to match the border colour (visually if not
actually).
---
 .../stylesheets/components/navigation.scss    | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index b50a51f2c..08b6476d4 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -74,13 +74,28 @@
     text-overflow: ellipsis;
     font-weight: normal;
     text-decoration: none;
-    background-image: file-url("separator-2x.png");
-    background-size: 6px 11px;
-    background-repeat: no-repeat;
-    background-position: right 5px top ($padding-top + 5px);
     padding: $padding-top 20px $padding-bottom 0;
     margin-right: 7px;
     box-sizing: border-box;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -1px;
+      bottom: 1px;
+      right: 6px;
+      width: 7px;
+      height: 7px;
+      margin: auto 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      border: solid;
+      border-width: 1px 1px 0 0;
+      border-color: $secondary-text-colour;
+    }
 
     &:hover {
       color: $link-hover-colour;