diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-03-18 19:02:03 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-18 19:02:03 +0300 |
commit | 88bd287b27c8097ca02347038dbb0b321b71d169 (patch) | |
tree | cf93b2c4a4553027035a4261217138971379a4ae /scss/_progress.scss | |
parent | b165f35f7808b59f4e09ec518caa441e30830fbb (diff) |
Convert progress bars to CSS variables (#35962)
* Convert progress bars to CSS variables
* bundlewatch
Diffstat (limited to 'scss/_progress.scss')
-rw-r--r-- | scss/_progress.scss | 29 |
1 files changed, 20 insertions, 9 deletions
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 { |