Merge pull request #73 from anmol372/breadcrumb

Styling for Breadcrumb Navigation

Author: anik120

assets/scss/_breadcrumb.scss

@@ -0,0 +1,46 @@
+.breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    //padding: $breadcrumb-padding-y;
+    padding-left: 0rem;
+    padding-top: 0.75rem;
+    //padding-right: 1 rem;
+    //padding-bottom: 0.75 rem;
+
+    margin-bottom: $breadcrumb-margin-bottom;
+    list-style: none;
+    background-color: initial;
+    //@include border-radius($breadcrumb-border-radius);
+    margin-left: 0px;
+    border-bottom-left-radius: 0rem;
+    border-top-left-radius: 0rem;
+  }
+
+.breadcrumb-item {
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+    padding-left: 0.5rem;
+  }
+  
+.breadcrumb-item + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    color: $breadcrumb-divider-color;
+    content: "/";
+}
+  
+.breadcrumb-item + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+}
+  
+.breadcrumb-item + .breadcrumb-item:hover::before {
+    text-decoration: none;
+}
+  
+.breadcrumb-item.active {
+    color: $breadcrumb-active-color;;
+}
+ 

assets/scss/_global.scss

@@ -30,10 +30,10 @@ ol {
  li {
   counter-increment: ordered-list-counter;
   position: relative;
-  padding-left: var(--of--spacer--lg);
+  //padding-left: var(--of--spacer--lg);
 }
- li::before {
-  content: counter(ordered-list-counter) ". ";
+li::before {
+  //content: counter(ordered-list-counter) ". ";
   position: absolute;
   left: 0;
   top: 0;
@@ -673,7 +673,7 @@ ol {
 
  .of-capability-level__table__footnotes {
     counter-reset: footnotes;
-  }
+}
 
 .of-table-footnotes {
     margin-bottom: var(--of--spacer--lg);

assets/scss/_styles_project.scss

@@ -17,7 +17,7 @@
 //@import "../../themes/docsy/assets/scss/sidebar-tree";
 @import "../../themes/docsy/assets/scss/sidebar-toc";
 @import "../../themes/docsy/assets/scss/buttons";
-@import "../../themes/docsy/assets/scss/breadcrumb";
+//@import "../../themes/docsy/assets/scss/breadcrumb";
 @import "../../themes/docsy/assets/scss/alerts";
 @import "../../themes/docsy/assets/scss/content";
 @import "../../themes/docsy/assets/scss/search";
@@ -63,6 +63,7 @@ footer {
 @import "reset";
 @import "type";
 @import "sidebar-tree";
+@import "breadcrumb";
 
 //components
 @import "header";

assets/scss/_variables.scss

@@ -76,3 +76,12 @@
       $ov--breakpoint--xl: 1200px;
       $ov--breakpoint--2xl: 1450px; 
 
+// Breadcrumbs
+$breadcrumb-font-size:              null !default;
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-margin-bottom:          1rem !default;
+$breadcrumb-bg:                     $gray-100 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider:                quote("/") !default;
+$breadcrumb-border-radius:          $border-radius !default;