Refactor Breadcrumbs component

Use new `.breadcrumb-item` class instead of child selectors and `li` tag selectors,
so as to no longer require the usage of `<ol>`-based markup.

Rename variables to follow naming conventions:
* $breadcrumb-padding-vertical => $breadcrumb-padding-y
* $breadcrumb-padding-horizontal => $breadcrumb-padding-x

Introduce new variable: $breadcrumb-item-padding

[skip sauce]

1 files changed, 10 insertions, 10 deletions

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 30af411abb..5ccca354ce 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -1,23 +1,23 @@
 .breadcrumb {
-  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
   margin-bottom: $spacer-y;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
   @include clearfix;
+}
 
-  > li {
-    float: left;
+.breadcrumb-item {
+  float: left;
 
-    + li::before {
-      padding-right: .5rem;
-      padding-left: .5rem;
-      color: $breadcrumb-divider-color;
-      content: "#{$breadcrumb-divider}";
-    }
+  + .breadcrumb-item::before {
+    padding-right: $breadcrumb-item-padding;
+    padding-left: $breadcrumb-item-padding;
+    color: $breadcrumb-divider-color;
+    content: "#{$breadcrumb-divider}";
   }
 
-  > .active {
+  &.active {
     color: $breadcrumb-active-color;
   }
 }