tweak progress bar

fkhadra · Dec 6, 2023 · 89390ec · 89390ec
1 parent deb09a8
commit 89390ec
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/scss/_progressBar.scss b/scss/_progressBar.scss
@@ -43,8 +43,8 @@
     border-bottom-left-radius: var(--toastify-toast-bd-radius);
   }
 
-  &--background {
-    opacity: 0.1;
+  &--bg {
+    opacity: var(--toastify-color-progress-bgo);
     width: 100%;
     height: 100%;
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -56,4 +56,5 @@ $rt-mobile: 'only screen and (max-width : 480px)' !default;
   --toastify-color-progress-success: var(--toastify-color-success);
   --toastify-color-progress-warning: var(--toastify-color-warning);
   --toastify-color-progress-error: var(--toastify-color-error);
+  --toastify-color-progress-bgo: 0.2;
 }
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -127,7 +127,7 @@ export function ProgressBar({
   return (
     <div className={`${Default.CSS_NAMESPACE}__progress-bar--wrp`}>
       <div
-        className={`${Default.CSS_NAMESPACE}__progress-bar--background ${Default.CSS_NAMESPACE}__progress-bar-theme--${theme} ${Default.CSS_NAMESPACE}__progress-bar--${type}`}
+        className={`${Default.CSS_NAMESPACE}__progress-bar--bg ${Default.CSS_NAMESPACE}__progress-bar-theme--${theme} ${Default.CSS_NAMESPACE}__progress-bar--${type}`}
       />
       <div
         role="progressbar"