add breadcrumb separator variable

diff --git a/scss/components/_breadcrumbs.scss b/scss/components/_breadcrumbs.scss
index fbba67574bb22fb64c50c7b58e81abc55ba6721e..cb97c737688b4a5a8c2b162567fdd0650c38f99c 100644 (file)
--- a/scss/components/_breadcrumbs.scss
+++ b/scss/components/_breadcrumbs.scss
@@ -34,13 +34,21 @@ $breadcrumbs-item-margin: 0.75rem !default;
 /// @type Boolean
 $breadcrumbs-item-uppercase: true !default;
 
-/// If `true`, adds a slash between breadcrumb links.
+/// If `true`, adds a seperator between breadcrumb links.
 /// @type Boolean
-$breadcrumbs-item-slash: true !default;
+$breadcrumbs-item-separator: true !default;
 
-/// Color of breadcrumb slash.
+/// Used character for the breadcrumb separator.
+/// @type Content
+$breadcrumbs-item-separator-item: '/' !default;
+
+/// Used character for the breadcrumb separator in rtl mode.
+/// @type Content
+$breadcrumbs-item-separator-item-rtl: '\\' !default;
+
+/// Color of breadcrumb item.
 /// @type Color
-$breadcrumbs-item-slash-color: $medium-gray !default;
+$breadcrumbs-item-separator-color: $medium-gray !default;
 
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
@@ -60,17 +68,16 @@ $breadcrumbs-item-slash-color: $medium-gray !default;
       text-transform: uppercase;
     }
 
-    @if $breadcrumbs-item-slash {
+    @if $breadcrumbs-item-separator {
       // Need to escape the backslash
-      $slash: if($global-text-direction == 'ltr', '/', '\\');
+      $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
 
       &:not(:last-child)::after {
         position: relative;
-        top: 1px;
         margin: 0 $breadcrumbs-item-margin;
         opacity: 1;
-        content: $slash;
-        color: $breadcrumbs-item-slash-color;
+        content: $separator;
+        color: $breadcrumbs-item-separator-color;
       }
     }
     @else {