From be05565bdde0d4182f2e755319ab5a05fa765f3c Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Thu, 19 May 2016 13:25:59 +0300
Subject: [PATCH] traffic chart bg position fix

---
 .../dashboard/trafficChart/trafficChart.scss  | 133 ++++++++++--------
 1 file changed, 72 insertions(+), 61 deletions(-)

diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.scss b/src/app/pages/dashboard/trafficChart/trafficChart.scss
index 9bdecd43..63fc384a 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.scss
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.scss
@@ -6,22 +6,20 @@
 }
 
 .ng2, .blur {
-  .channels-block {
-    .traffic-chart canvas{
-      border: 15px solid rgba(0,0,0,0.2);
-      //box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
-      border-radius: 150px;
-    }
+  .traffic-chart canvas {
+    border: 15px solid rgba(0, 0, 0, 0.2);
+    //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.4);
-      border-radius: 100px;
-    }
+  .chart-bg {
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    left: 60px;
+    top: 60px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 100px;
   }
 }
 
@@ -31,6 +29,7 @@
   margin-left: 70px;
   margin-top: -20px;
 }
+
 .small-container {
   .channels-info {
     display: none;
@@ -43,7 +42,7 @@
     font-size: 18px;
     opacity: 0.9;
   }
-  .channel-number{
+  .channel-number {
     display: inline-block;
     float: right;
   }
@@ -121,17 +120,17 @@
   margin-bottom: 0;
   background-color: $progress-background;
   box-shadow: none;
-  .progress-bar{
+  .progress-bar {
     height: 4px;
     background-color: $progress-default;
     box-shadow: none;
   }
 }
 
-.legend-color{
+.legend-color {
   width: 30px;
   height: 30px;
-  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
   position: relative;
   top: 27px;
   border-radius: 15px;
@@ -139,60 +138,72 @@
 }
 
 @media (max-width: $resM) {
-  div.channels-info{
-    display: block;
-    width: calc(100% - 88px);
-    margin-top: -65px;
-    margin-bottom: 10px;
-  }
-  .card.medium-card.traffic-panel{
+
+  .card.medium-card.traffic-panel {
     height: auto;
   }
-  .traffic-chart{
-    position: inherit;
-    float: none;
-    margin: 0 auto;
-  }
-  .chart-bg{
-    left: calc(50% - 90px);
+
+  .channels-block {
+    div.channels-info {
+      display: block;
+      width: calc(100% - 88px);
+      margin-top: -65px;
+      margin-bottom: 10px;
+    }
+    .traffic-chart {
+      position: inherit;
+      float: none;
+      margin: 0 auto;
+    }
+    .chart-bg {
+      left: calc(50% - 90px);
+    }
   }
 }
 
-@media (max-width: 1465px) and (min-width: 1199px){
-  .channels-info{
-    display: none;
-  }
-  .traffic-chart{
-    position: inherit;
-    float: none;
-    margin: 0 auto;
-  }
-  .chart-bg{
-    left: calc(50% - 90px);
+@media (max-width: 1465px) and (min-width: 1199px) {
+
+  .channels-block {
+    .channels-info {
+      display: none;
+    }
+    .traffic-chart {
+      position: inherit;
+      float: none;
+      margin: 0 auto;
+    }
+
+    .chart-bg {
+      left: calc(50% - 90px);
+    }
   }
 }
 
+@media (max-width: 380px) {
 
-@media (max-width: 380px){
+  .channels-block {
+    .traffic-chart {
+      width: 240px;
+    }
 
-  .traffic-chart{
-    width: 240px;
-  }
+    .canvas-holder {
+      width: 240px;
+      height: 240px;
+    }
 
-  .canvas-holder{
-    width: 240px;
-    height: 240px;
-  }
-
-  .chart-bg {
-    top: 30px;
+    .chart-bg {
+      top: 30px;
+    }
   }
 }
-@media (max-width: 320px){
-  .chart-bg {
-    left: 50px;
-    top: 50px;
-    width: 142px;
-    height: 142px;
+
+@media (max-width: 320px) {
+  .channels-block {
+    .chart-bg {
+      left: 50px;
+      top: 50px;
+      width: 142px;
+      height: 142px;
+    }
   }
 }