styling search result listing breadcrumbs

opentech/public/search/templates/search/includes/search_result.html

 {% load static wagtailcore_tags wagtailsearchpromotions_tags wagtailimages_tags %}
 
-{# breadcrumbs #}
-{% if result.get_ancestors|length > 2 %}
-    {% for ancestor in result.get_ancestors %}
-        {% if not ancestor.is_root %}
-            {% if ancestor.depth > 2 %}
-                {{ ancestor.title }}
-                {% if ancestor.depth|add:1 < result.depth %}
-                    &nbsp;/&nbsp;
 <a class="listing" href="{% pageurl result %}">
+    {# breadcrumbs #}
+    <h6 class="listing__path">
+        {% if result.get_ancestors|length > 2 %}
+            {% for ancestor in result.get_ancestors %}
+                {% if not ancestor.is_root %}
+                    {% if ancestor.depth > 2 %}
+                        <span>{{ ancestor.title }}</span>
+                        {% if ancestor.depth|add:1 < result.depth %}
+                            <span class="nav__item--breadcrumb"></span>
+                        {% endif %}
+                    {% else %}<span class="nav__item--breadcrumb"></span>{% endif %} {# the first one #}
                 {% endif %}
-            {% else %}/{% endif %} {# the first one #}
+            {% endfor %}
         {% endif %}
-    {% endfor %}
-{% endif %}
+    </h6>
 
 {% if result.listing_image %}
     <a href="{% pageurl result %}">

opentech/static_src/src/sass/public/components/_nav.scss

@@ -112,6 +112,10 @@
             font-weight: $weight--normal;
             border-bottom: 0;
 
+            .listing & {
+                margin-left: 10px;
+            }
+
             &::after {
                 width: 0;
                 height: 0;
@@ -120,9 +124,18 @@
                 border-bottom: 5px solid transparent;
                 border-left: 5px solid $color--white;
                 content: '';
+
+                .listing & {
+                    margin-left: 0;
+                    border-left: 5px solid $color--default;
+                }
             }
 
             &:first-child {
+                .listing & {
+                    margin-left: 0;
+                }
+
                 a {
                     margin-left: 0;
                 }