From 71194873cc9effa2677bba3df3224de665e32ff6 Mon Sep 17 00:00:00 2001
From: Seifeldin Mahjoub <seifsayed@gmail.com>
Date: Wed, 26 Aug 2020 00:45:10 +0200
Subject: [PATCH] chore: use color mixin in progress

---
 src/components/_progress.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/_progress.scss b/src/components/_progress.scss
index d2e4df5..934c09a 100644
--- a/src/components/_progress.scss
+++ b/src/components/_progress.scss
@@ -1,6 +1,7 @@
 .progress {
   @include border-style(5);
-  border: 2px solid $primary;
+  @include color('border-color', 'primary');
+  border: 2px solid;
   box-shadow: $shadow-hover;
   height: 1.2rem;
   overflow: hidden;
@@ -9,8 +10,9 @@
   .bar {
     @include border-style(5);
     @include transition;
-    background-color: $primary-light;
-    border-right: 2px solid $primary;
+    @include color('background-color', 'primary-light');
+    @include color('border-color', 'primary');
+    border-right: 2px solid;
     display: flex;
     flex-direction: column;
     font-size: 0.6rem;
@@ -25,7 +27,7 @@
 
     @each $colorName, $color, $color-light in $colors {
       &.#{$colorName} {
-        background-color: $color-light;
+        @include color('background-color', #{$colorName}-light);
   
         &.striped {
           @include striped-background($color-light);