Convert breadcrumb to CSS variables

twbs · Mar 11, 2022 · 92376c2 · 92376c2
1 parent 58ac9a9
commit 92376c2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git 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
@@ -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" >}}