diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-11-20 07:44:46 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2022-03-11 23:59:55 +0300 |
| commit | e567d511d4c94617510ef592ab804ec273e93480 (patch) | |
| tree | c40774ce04ed3fd9b51469e865854bbe5a967fec | |
| parent | d16088d5d1ec2de56a301fbb8e1a227ae7eb5ece (diff) | |
Convert breadcrumb to CSS variables
| -rw-r--r-- | scss/_breadcrumb.scss | 31 | ||||
| -rw-r--r-- | site/content/docs/5.1/components/breadcrumb.md | 10 |
2 files changed, 32 insertions, 9 deletions
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index f7fafe743a..86890dc61a 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -1,28 +1,43 @@ +// stylelint-disable custom-property-empty-line-before + .breadcrumb { + // scss-docs-start breadcrumb-css-vars + --#{$variable-prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$variable-prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$variable-prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$variable-prefix}breadcrumb-font-size); + --#{$variable-prefix}breadcrumb-bg: #{$breadcrumb-bg}; + --#{$variable-prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; + --#{$variable-prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + --#{$variable-prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; + --#{$variable-prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; + // scss-docs-end breadcrumb-css-vars + display: flex; flex-wrap: wrap; - padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $breadcrumb-margin-bottom; + padding: var(--#{$variable-prefix}breadcrumb-padding-y) var(--#{$variable-prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$variable-prefix}breadcrumb-margin-bottom); @include font-size($breadcrumb-font-size); + font-size: var(--#{$variable-prefix}breadcrumb-font-size); list-style: none; - background-color: $breadcrumb-bg; - @include border-radius($breadcrumb-border-radius); + background-color: var(--#{$variable-prefix}breadcrumb-bg); + @include border-radius(var(--#{$variable-prefix}breadcrumb-border-radius)); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: $breadcrumb-item-padding-x; + padding-left: var(--#{$variable-prefix}breadcrumb-item-padding-x); &::before { float: left; // Suppress inline spacings and underlining of the separator - padding-right: $breadcrumb-item-padding-x; - color: $breadcrumb-divider-color; + padding-right: var(--#{$variable-prefix}breadcrumb-item-padding-x); + color: var(--#{$variable-prefix}breadcrumb-divider-color); content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } &.active { - color: $breadcrumb-active-color; + color: var(--#{$variable-prefix}breadcrumb-item-active-color); } } diff --git a/site/content/docs/5.1/components/breadcrumb.md b/site/content/docs/5.1/components/breadcrumb.md index 7086a1ee52..dabf6b58b4 100644 --- a/site/content/docs/5.1/components/breadcrumb.md +++ b/site/content/docs/5.1/components/breadcrumb.md @@ -96,8 +96,16 @@ Since breadcrumbs provide a navigation, it's a good idea to add a meaningful lab For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). -## Sass +## CSS ### Variables +<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small> + +As part of Bootstrap's evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" >}} + +### Sass variables + {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}} |