From: Chris Rebert <code@chrisrebert.com>
Date: Tue, 8 Dec 2015 10:20:25 +0000 (-0800)
Subject: Refactor Breadcrumbs component
X-Git-Tag: v4.0.0-alpha.3~474^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=76a4c303eed00a1f30b7a6d2d1d04fdf2f935e62;p=thirdparty%2Fbootstrap.git

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]
---

diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
index bfd7ef1b61..204a60c81e 100644
--- a/docs/components/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -8,17 +8,26 @@ Indicate the current page's location within a navigational hierarchy.
 
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
 
+Works fine with or without the usage of list markup.
+
 {% example html %}
 <ol class="breadcrumb">
-  <li class="active">Home</li>
+  <li class="breadcrumb-item active">Home</li>
 </ol>
 <ol class="breadcrumb">
-  <li><a href="#">Home</a></li>
-  <li class="active">Library</li>
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item active">Library</li>
 </ol>
-<ol class="breadcrumb" style="margin-bottom: 5px;">
-  <li><a href="#">Home</a></li>
-  <li><a href="#">Library</a></li>
-  <li class="active">Data</li>
+<ol class="breadcrumb">
+  <li class="breadcrumb-item"><a href="#">Home</a></li>
+  <li class="breadcrumb-item"><a href="#">Library</a></li>
+  <li class="breadcrumb-item active">Data</li>
 </ol>
+<!-- Or use a div instead of a list -->
+<div class="breadcrumb">
+  <a class="breadcrumb-item" href="#">Home</a>
+  <a class="breadcrumb-item" href="#">Library</a>
+  <a class="breadcrumb-item" href="#">Data</a>
+  <span class="breadcrumb-item active">Bootstrap</span>
+</div>
 {% endexample %}
diff --git a/docs/migration.md b/docs/migration.md
index b586a41c34..d710d17683 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -114,6 +114,10 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
 
 - Explicit classes (`.page-item`, `.page-link`) are now required on the descendants of `.pagination`s
 
+### Breadcrumbs
+
+- An explicit class, `.breadcrumb-item`, is now required on the descendants of `.breadcrumb`s
+
 ### Badges
 
 - Dropped the badge component. Use the `.label-pill` modifier together with the label component instead.
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;
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 88afa3ccd3..a29d0399d9 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -625,8 +625,9 @@ $thumbnail-border-radius:     $border-radius !default;
 
 // Breadcrumbs
 
-$breadcrumb-padding-vertical:   .75rem !default;
-$breadcrumb-padding-horizontal: 1rem !default;
+$breadcrumb-padding-y:          .75rem !default;
+$breadcrumb-padding-x:          1rem !default;
+$breadcrumb-item-padding:       .5rem !default;
 
 $breadcrumb-bg:                 $gray-lighter !default;
 $breadcrumb-divider-color:      $gray-light !default;