From 182e49aa2ed0848279a76e36b69d12c1c612a317 Mon Sep 17 00:00:00 2001
From: "Amir M. Mohamadi" <mail.amir2mi@gmail.com>
Date: Wed, 19 Oct 2022 00:08:30 +0330
Subject: [PATCH] Moved breadcrumbs border and local variables one level up to
 its wrapper

---
 scss/components/_breadcrumbs.scss | 20 ++++++--------------
 test.html                         | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/scss/components/_breadcrumbs.scss b/scss/components/_breadcrumbs.scss
index 5024e167..aff6665a 100644
--- a/scss/components/_breadcrumbs.scss
+++ b/scss/components/_breadcrumbs.scss
@@ -5,19 +5,21 @@
 }
 
 .breadcrumbs-wrapper {
+  --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}breadcrumbs-txt-color);
+  --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}breadcrumbs-bg-color);
+  --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}breadcrumbs-border-color);
   width: 100%;
+  border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
+  border-radius: var(--#{$CSS_VAR_PFX}border-radius);
 }
 
 .breadcrumbs {
-  --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}breadcrumbs-txt-color);
-  --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}breadcrumbs-bg-color);
-  --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}breadcrumbs-border-color);
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
   list-style: none;
   padding: 0;
-  margin: 0.5em 0;
+  margin: 0;
   border-radius: var(--#{$CSS_VAR_PFX}border-radius);
 
   &[class*="style-"] {
@@ -32,8 +34,6 @@
     padding: 0.64em 1em;
     color: var(--#{$CSS_VAR_PFX}local-txt-color);
     background: var(--#{$CSS_VAR_PFX}local-bg-color);
-    border-top: var(--#{$CSS_VAR_PFX}border-width) solid;
-    border-bottom: var(--#{$CSS_VAR_PFX}border-width) solid;
     border-color: var(--#{$CSS_VAR_PFX}local-border-color);
 
     &:not(:first-child) {
@@ -68,24 +68,16 @@
     &:first-child {
       @if $IS_LTR {
         padding-left: 2em;
-        border-left: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
-        border-radius: var(--#{$CSS_VAR_PFX}border-radius) 0 0 var(--#{$CSS_VAR_PFX}border-radius);
       } @else {
         padding-right: 2em;
-        border-right: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
-        border-radius: 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0;
       }
     }
 
     &:last-child {
       @if $IS_LTR {
         padding-right: 2em;
-        border-right: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
-        border-radius: 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0;
       } @else {
         padding-left: 2em;
-        border-left: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
-        border-radius: var(--#{$CSS_VAR_PFX}border-radius) 0 0 var(--#{$CSS_VAR_PFX}border-radius);
       }
     }
 
diff --git a/test.html b/test.html
index 6dc61c82..b573afc5 100644
--- a/test.html
+++ b/test.html
@@ -143,6 +143,26 @@
     </nav>
     <br />
     <br />
+    <nav class="breadcrumbs-wrapper style-dark" aria-label="breadcrumb">
+      <ol class="breadcrumbs">
+        <li class="crumb"><a href="#">Home</a></li>
+        <li class="crumb"><a href="#">Tutorials</a></li>
+        <li class="crumb"><a href="#">Videos</a></li>
+        <li class="crumb"><a href="#">Home</a></li>
+        <li class="crumb"><a href="#">Tutorials</a></li>
+        <li class="crumb"><a href="#">Videos</a></li>
+        <li class="crumb"><a href="#">Home</a></li>
+        <li class="crumb"><a href="#">Tutorials</a></li>
+        <li class="crumb"><a href="#">Videos</a></li>
+        <li class="crumb"><a href="#">Home</a></li>
+        <li class="crumb"><a href="#">Tutorials</a></li>
+        <li class="crumb"><a href="#">Videos</a></li>
+        <li class="crumb"><a href="#">Home</a></li>
+        <li class="crumb"><a href="#">Tutorials</a></li>
+        <li class="crumb"><a href="#">Videos</a></li>
+        <li class="crumb active" aria-current="location">How to create videos</li>
+      </ol>
+    </nav>
     <br />
     <br />