fix(dashboard): move progress bar colors to variables

trpansh · May 13, 2016 · f0b6c1b · f0b6c1b
1 parent 72c112b
commit f0b6c1b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html
@@ -1,5 +1,4 @@
-<div class="channels-block">
-
+<div class="channels-block transparent">
   <div class="chart-bg"></div>
   <div class="traffic-chart" id="trafficChart">
     <div class="canvas-holder">

diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss
@@ -504,7 +504,7 @@ label.custom-input-danger {
 }
 
 .progress {
-  background: rgba(black, 0.15);
+  background: $progress-background;
 }
 
 .progress-bar-primary {

diff --git a/src/sass/theme/conf/_colorScheme.scss b/src/sass/theme/conf/_colorScheme.scss
@@ -18,6 +18,8 @@ $bootstrap-panel-text: #7d7d7d;
 $bootstrap-panel-bg: #ffffff;
 $mail-box: whitesmoke;
 $auth-panel-background: rgba(#000000, 0.55);
+$progress-background: rgba(#000000, 0.15);
+$progress-default: #ffffff;
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;

diff --git a/src/sass/theme/dashboard/_trafficChart.scss b/src/sass/theme/dashboard/_trafficChart.scss
@@ -3,6 +3,24 @@
   position: relative;
 }
 
+.channels-block.transparent {
+  .traffic-chart canvas{
+    border: 10px solid rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
+    border-radius: 150px;
+  }
+
+  .chart-bg{
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    left: 60px;
+    top: 60px;
+    background-color: rgba(0,0,0,0.35);
+    border-radius: 100px;
+  }
+}
+
 .channels-info {
   display: inline-block;
   width: calc(100% - 370px);
@@ -97,11 +115,11 @@
   border-radius: 0;
   width: 100%;
   margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: $progress-background;
   box-shadow: none;
   .progress-bar{
     height: 4px;
-    background-color: $default-text;
+    background-color: $progress-default;
     box-shadow: none;
   }
 }
@@ -116,22 +134,6 @@
   left: -45px;
 }
 
-.traffic-chart canvas{
-  border: 10px solid rgba(0,0,0,0.35);
-  box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
-  border-radius: 150px;
-}
-
-.chart-bg{
-  position: absolute;
-  width: 180px;
-  height: 180px;
-  left: 60px;
-  top: 60px;
-  background-color: rgba(0,0,0,0.35);
-  border-radius: 100px;
-}
-
 @media (max-width: $resM) {
   div.channels-info{
     display: block;