diff options
-rw-r--r-- | .bundlewatch.config.json | 4 | ||||
-rw-r--r-- | scss/_progress.scss | 29 | ||||
-rw-r--r-- | site/content/docs/5.1/components/progress.md | 10 |
3 files changed, 31 insertions, 12 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 477fa44869..1344e1ef2b 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "26.8 kB" + "maxSize": "26.85 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "24.85 kB" + "maxSize": "24.9 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_progress.scss b/scss/_progress.scss index 5715ab00ce..01f488b657 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -9,13 +9,24 @@ // scss-docs-end progress-keyframes .progress { + // scss-docs-start progress-css-vars + --#{$prefix}progress-height: #{$progress-height}; + @include rfs($progress-font-size, --#{$prefix}progress-font-size); + --#{$prefix}progress-bg: #{$progress-bg}; // stylelint-disable-line custom-property-empty-line-before + --#{$prefix}progress-border-radius: #{$progress-border-radius}; + --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; + --#{$prefix}progress-bar-color: #{$progress-bar-color}; + --#{$prefix}progress-bar-bg: #{$progress-bar-bg}; + --#{$prefix}progress-bar-transition: #{$progress-bar-transition}; + // scss-docs-end progress-css-vars + display: flex; - height: $progress-height; + height: var(--#{$prefix}progress-height); overflow: hidden; // force rounded corners by cropping it - @include font-size($progress-font-size); - background-color: $progress-bg; - @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); + @include font-size(var(--#{$prefix}progress-font-size)); + background-color: var(--#{$prefix}progress-bg); + @include border-radius(var(--#{$prefix}progress-border-radius)); + @include box-shadow(var(--#{$prefix}progress-box-shadow)); } .progress-bar { @@ -23,16 +34,16 @@ flex-direction: column; justify-content: center; overflow: hidden; - color: $progress-bar-color; + color: var(--#{$prefix}progress-bar-color); text-align: center; white-space: nowrap; - background-color: $progress-bar-bg; - @include transition($progress-bar-transition); + background-color: var(--#{$prefix}progress-bar-bg); + @include transition(var(--#{$prefix}progress-bar-transition)); } .progress-bar-striped { @include gradient-striped(); - background-size: $progress-height $progress-height; + background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); } @if $enable-transitions { diff --git a/site/content/docs/5.1/components/progress.md b/site/content/docs/5.1/components/progress.md index fccd546c60..8fbba3be77 100644 --- a/site/content/docs/5.1/components/progress.md +++ b/site/content/docs/5.1/components/progress.md @@ -129,10 +129,18 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro </div> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="progress-css-vars" file="scss/_progress.scss" >}} + +### Sass variables + {{< scss-docs name="progress-variables" file="scss/_variables.scss" >}} ### Keyframes |