From 76a4c303eed00a1f30b7a6d2d1d04fdf2f935e62 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 8 Dec 2015 02:20:25 -0800 Subject: [PATCH] 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 `
    `-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] --- docs/components/breadcrumb.md | 23 ++++++++++++++++------- docs/migration.md | 4 ++++ scss/_breadcrumb.scss | 20 ++++++++++---------- scss/_variables.scss | 5 +++-- 4 files changed, 33 insertions(+), 19 deletions(-) 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 %}
      -
    1. Home
      2. +
    2. Home
      -
    1. Home
      2. -
    2. Library
      3. +
    3. Home
      4. +
    4. Library
    -
      -
    1. Home
      2. -
    2. Library
      3. -
    3. Data
      4. +
        +
      1. Home
        2. +
      2. Library
        3. +
      3. Data
      + +
      + Home + Library + Data + Bootstrap +
      {% 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; -- 2.47.2