From 88bd287b27c8097ca02347038dbb0b321b71d169 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Fri, 18 Mar 2022 09:02:03 -0700
Subject: Convert progress bars to CSS variables (#35962)

* Convert progress bars to CSS variables

* bundlewatch
---
 scss/_progress.scss | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

(limited to 'scss/_progress.scss')

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 {
-- 
cgit v1.2.3