Moved breadcrumbs border and local variables one level up to its wrapper

amir2mi · Oct 18, 2022 · 182e49a · 182e49a
1 parent 1941bf5
commit 182e49a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git 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
@@ -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 />