From 19f201b6c35711425f6af0ebec49b07d08fa437e Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 25 Oct 2021 13:13:18 +0000
Subject: [PATCH] Bug 28101: (follow-up) Correct breadcrumb divider image

This patch corrects the CSS for generating a chevron-style divider
between breadcrumb items. The CSS copied from staff-global.scss needed
some tweaks to make it work in the OPAC with Bootstrap 4.

Also changed: The Base64-encoded SVG is converted to plain based on
https://css-tricks.com/probably-dont-base64-svg/
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 39 +++++++------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 58acbc36ca..4ba2708a70 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -1339,35 +1339,12 @@ nav {
         }
     }
 
-    background: transparent none;
-    border: 0;
-
     &.breadcrumb {
         background-color: #F0F3F3;
+        border-radius: 0;
         font-size: 85%;
-        list-style: none outside none;
         margin: 15px;
         padding: 5px 10px;
-        border-radius: 0px;
-
-        ol {
-            margin: 0;
-            padding-left: 0;
-            list-style: none;
-        }
-
-                                                                                             li {
-            display: inline;
-
-            &+li::before {
-                background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
-                background-size: 8px;
-                content: '';
-                display: inline-block;
-                height: .8em;
-                width: .8em;
-            }
-        }
 
         [aria-current="page"] {
             color: #000;
@@ -1377,6 +1354,20 @@ nav {
     }
 }
 
+.breadcrumb-item {
+    + .breadcrumb-item {
+        &::before {
+            background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-right'%3E%3Cpath fill-rule='evenodd' d='M7.37 0l5.35 7.3c.2.2.2.51 0 .7l-5.38 8h-4.2l5.64-8.35L3.13.01z'/%3E%3C/svg%3E") 50% 50% no-repeat;
+            background-size: 8px;
+            display: inline-block;
+            content: '';
+            float: none;
+            height: .8em;
+            width: .8em;
+        }
+    }
+}
+
 .nav_pages {
     border-top: 1px solid #DDD;
     padding: .6em;
-- 
2.20.1