diff options
-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" >}} |