mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 11:00:56 +02:00
Code Issues Releases Wiki Activity

Convert progress bars to CSS variables (#35962)

Browse Source 
* Convert progress bars to CSS variables

* bundlewatch
This commit is contained in:
Mark Otto
2022-03-18 09:02:03 -07:00
committed by GitHub
parent b165f35f78
commit 88bd287b27
3 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.bundlewatch.config.json
View File

@@ -26,11 +26,11 @@
}, },
{ {
"path": "./dist/css/bootstrap.css", "path": "./dist/css/bootstrap.css",
"maxSize": "26.8 kB" "maxSize": "26.85 kB"
}, },
{ {
"path": "./dist/css/bootstrap.min.css", "path": "./dist/css/bootstrap.min.css",
"maxSize": "24.85 kB" "maxSize": "24.9 kB"
}, },
{ {
"path": "./dist/js/bootstrap.bundle.js", "path": "./dist/js/bootstrap.bundle.js",

29
scss/_progress.scss
View File

@@ -9,13 +9,24 @@
// scss-docs-end progress-keyframes // scss-docs-end progress-keyframes
.progress { .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; display: flex;
height: $progress-height; height: var(--#{$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it overflow: hidden; // force rounded corners by cropping it
@include font-size($progress-font-size); @include font-size(var(--#{$prefix}progress-font-size));
background-color: $progress-bg; background-color: var(--#{$prefix}progress-bg);
@include border-radius($progress-border-radius); @include border-radius(var(--#{$prefix}progress-border-radius));
@include box-shadow($progress-box-shadow); @include box-shadow(var(--#{$prefix}progress-box-shadow));
} }
.progress-bar { .progress-bar {
@@ -23,16 +34,16 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
color: $progress-bar-color; color: var(--#{$prefix}progress-bar-color);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-color: $progress-bar-bg; background-color: var(--#{$prefix}progress-bar-bg);
@include transition($progress-bar-transition); @include transition(var(--#{$prefix}progress-bar-transition));
} }
.progress-bar-striped { .progress-bar-striped {
@include gradient-striped(); @include gradient-striped();
background-size: $progress-height $progress-height; background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
} }
@if $enable-transitions { @if $enable-transitions {

10
site/content/docs/5.1/components/progress.md
View File

@@ -129,10 +129,18 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
</div> </div>
{{< /example >}} {{< /example >}}
## Sass ## CSS
### Variables ### 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" >}} {{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
### Keyframes ### Keyframes