refactor(theme): move back to the original blur

src/app/pages/components/mail/mail.html

@@ -1,4 +1,4 @@
-<div class="row mail-row">
+<div class="row mail-client-container transparent">
   <div class="col-md-12">
     <div ba-panel ba-panel-class="xmedium-panel mail-panel">
       <div class="letter-layout">

src/app/pages/dashboard/dashboardLineChart/DashboardLineChartCtrl.js

@@ -69,24 +69,24 @@
           id: 'g0',
           bullet: 'none',
           useLineColorForBulletBorder: true,
-          lineColor: layoutColors.primary,
+          lineColor: 'rgba(0, 0, 0, 0.3)',
           lineThickness: 1,
           negativeLineColor: layoutColors.danger,
           type: 'smoothedLine',
           valueField: 'value0',
-          fillAlphas: 0.5,
+          fillAlphas: 1,
           fillColorsField: 'lineColor'
         },
         {
           id: 'g1',
           bullet: 'none',
           useLineColorForBulletBorder: true,
-          lineColor: layoutColors.primary,
+          lineColor: 'rgba(0, 0, 0, 0.4)',
           lineThickness: 1,
           negativeLineColor: layoutColors.danger,
           type: 'smoothedLine',
           valueField: 'value',
-          fillAlphas: 0.3,
+          fillAlphas: 1,
           fillColorsField: 'lineColor'
         }
       ],

src/app/pages/dashboard/dashboardPieChart/DashboardPieChartCtrl.js

@@ -9,24 +9,25 @@
       .controller('DashboardPieChartCtrl', DashboardPieChartCtrl);
 
   /** @ngInject */
-  function DashboardPieChartCtrl($scope, $element, $window, $timeout, layoutColors) {
+  function DashboardPieChartCtrl($scope, $timeout, layoutColors) {
+    var pieColor = 'rgba(255, 255, 255, 0.4)';
     $scope.charts = [{
-      color: layoutColors.border,
+      color: pieColor,
       description: 'New Visits',
       stats: '57,820',
       icon: 'person',
     }, {
-      color: layoutColors.border,
+      color: pieColor,
       description: 'Purchases',
       stats: '$ 89,745',
       icon: 'money',
     }, {
-      color: layoutColors.border,
+      color: pieColor,
       description: 'Active Users',
       stats: '178,391',
       icon: 'face',
     }, {
-      color: layoutColors.border,
+      color: pieColor,
       description: 'Returned',
       stats: '32,592',
       icon: 'refresh',

src/app/pages/dashboard/dashboardTodo/dashboardTodo.html

@@ -1,7 +1,8 @@
-<input type="text" value="" class="form-control task-todo" placeholder="Task to do.." ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
+<div class="task-todo-container transparent">
-<i ng-click="addToDoItem('',true)" class="add-item-icon ion-plus-round"></i>
+  <input type="text" value="" class="form-control task-todo" placeholder="Task to do.." ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
-<div class="box-shadow-border"></div>
+  <i ng-click="addToDoItem('',true)" class="add-item-icon ion-plus-round"></i>
-<ul class="todo-list" ui-sortable ng-model="todoList">
+  <div class="box-shadow-border"></div>
+  <ul class="todo-list" ui-sortable ng-model="todoList">
     <li ng-repeat="item in todoList" ng-if="!item.deleted" ng-init="activeItem=false"
         ng-class="{checked: isChecked, active: activeItem}"
         ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
@@ -13,4 +14,5 @@
       </label>
       <i class="remove-todo ion-ios-close-empty" ng-click="item.deleted = true"></i>
     </li>
-</ul>
+  </ul>
+</div>

src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js

@@ -13,14 +13,7 @@
     var palette = layoutColors.bgColorPalette;
     $scope.doughnutData = [
       {
-        value: 1000,
+        value: 2000,
-        color: palette.gossip,
-        highlight: palette.gossipDark,
-        label: 'Ad Campaigns',
-        percentage: 17,
-        order: 0,
-      },{
-        value: 1400,
         color: palette.white,
         highlight: palette.whiteDark,
         label: 'Other',
@@ -47,9 +40,49 @@
         label: 'Direct Traffic',
         percentage: 38,
         order: 2,
+      }, {
+        value: 400,
+        color: palette.gossip,
+        highlight: palette.gossipDark,
+        label: 'Ad Campaigns',
+        percentage: 17,
+        order: 0,
       },
     ];
 
+    /*
+    *       {
+     value: 2000,
+     color: layoutColors.defaultCharts,
+     highlight: "#f1f1f1",
+     label: 'Ad Campaigns'
+     },
+     {
+     value: 1500,
+     color: layoutColors.primaryCharts,
+     highlight: "#136775",
+     label: 'Search engines'
+     },
+     {
+     value: 1000,
+     color: layoutColors.infoCharts,
+     highlight: "#13998a",
+     label: 'Direct Traffic'
+     },
+     {
+     value: 1200,
+     color: layoutColors.successCharts,
+     highlight: "#94d7a1",
+     label: 'Referral Traffic'
+     },
+     {
+     value: 400,
+     color: layoutColors.warningCharts,
+     highlight: "#dcfcc4",
+     label: 'Other'
+     }
+    * */
+
     var ctx = document.getElementById('chart-area').getContext('2d');
     window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
       segmentShowStroke: false,

src/app/theme/components/baPanel/baPanel.directive.js

@@ -15,7 +15,7 @@
   function baPanel(baPanel) {
     return angular.extend({}, baPanel, {
       template: function(el, attrs) {
-        var res = '<div  class="panel {{panelType}} full-invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
+        var res = '<div  class="panel panel-blur full-invisible ' + (attrs.baPanelClass || '') + '" zoom-in ba-panel-blur>';
         res += baPanel.template(el, attrs);
         res += '</div>';
         return res;

src/app/theme/theme.constants.js

@@ -8,8 +8,8 @@
   var IMAGES_ROOT = 'assets/img/';
 
   var basic = {
-    default: '#ffffff',
+    default: 'rgba(#000000, 0.2)',
-    defaultText: '#666666',
+    defaultText: '#ffffff',
     border: '#dddddd',
     borderDark: '#aaaaaa',
   };
@@ -29,7 +29,7 @@
     surfieGreen: '#0e8174',
     silverTree: '#6eba8c',
     gossip: '#b9f2a1',
-    white: '#10c4b5',
+    white: '#ffffff',
   };
 
   angular.module('BlurAdmin.theme')

src/sass/app/_alerts.scss

@@ -1,5 +1,5 @@
 .alert{
-  color: $default;
+  color: $default-text;
   font-size: 13px;
   font-weight: $font-light;
   strong{

src/sass/app/_email.scss

@@ -10,28 +10,21 @@
 }
 
 .mail-navigation-container {
-  float: left;
-  position: relative;
-  height: 550px;
-  transition: width 0.5s;
   color: $default-text;
   width: 200px;
-  overflow: hidden;
-  padding: 0;
   .mail-navigation {
     cursor: pointer;
     font-weight: $font-light;
     font-size: 16px;
     text-align: left;
     padding: 10px 10px 10px 30px;
-    margin-left: 0;
     transition: 0.8s padding ease;
     .new-mails {
       position: absolute;
       left: 150px;
       padding: 1px 6px;
       border: 1px solid;
-      background-color: transparent;
+      background-color: $primary-light;
       margin-top: -2px;
       font-size: 12px;
       margin-right: 5px;
@@ -39,29 +32,26 @@
       transition: 0.8s left ease;
     }
     &.active {
-      background: rgba(black, 0.2);
+      background-color: $primary-light;
-      color: white;
-      transition: background-color .5s ease;
       &:hover {
-        background-color: rgba(black, 0.3);
+        background-color: $primary-light;
       }
       .new-mails {
-        background-color: transparent;
+        color: $primary-light;
-        color: $default;
+        background-color: $default;
       }
+      transition: background-color .2s ease, 0.8s padding ease;
     }
     &:hover {
-      background-color: rgba(black, 0.1);
+      background-color: $border-light;
     }
   }
   .compose-button {
     margin: 7px 0;
-    text-align: center;
     .btn {
       width: 140px;
       font-weight: $font-light;
-      border: $border 2px solid;
+      background-color: $dribble-color;
-      background-color: transparent;
     }
   }
 }
@@ -134,17 +124,12 @@
   }
 }
 
-.message-container, .side-message-navigation {
+.message-container, .side-message-navigation, .mail-navigation-container {
   float: left;
   padding: 0 15px;
   position: relative;
   height: 550px;
   transition: width 0.5s;
-  width: calc(100% - 200px);
-  border-bottom-right-radius: 5px;
-  border-top-right-radius: 5px;
-  border-left: 1px solid rgba(0, 0, 0, 0.12);
-  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.12);
 }
 
 .side-message-navigation {
@@ -769,7 +754,41 @@
   }
 }
 
-body.badmin-transparent {
+.mail-client-container.transparent {
+  .mail-navigation-container {
+    overflow: hidden;
+    width: 200px;
+    padding: 0;
+    .mail-navigation {
+      margin-left: 0;
+      .new-mails {
+        background-color: transparent;
+      }
+      &.active {
+        background: rgba(white, 0.2);
+        color: white;
+        transition: background-color .5s ease;
+        .new-mails {
+          background-color: transparent;
+          color: $default-text;
+        }
+        &:hover {
+          background-color: rgba(white, 0.3);
+        }
+      }
+      &:hover {
+        background-color: rgba(black, 0.1);
+      }
+    }
+  }
+
+  .message-container, .side-message-navigation{
+    width: calc(100% - 200px);
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    border-left: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
+  }
 
   .side-message-navigation {
     overflow: hidden;
@@ -799,13 +818,13 @@ body.badmin-transparent {
   .compose-button {
     text-align: center;
     .btn {
-      border: $border 2px solid;
+      border: $default-text 2px solid;
       background-color: transparent;
     }
   }
 
   .side-message-navigation .side-message-navigation-item {
-    border-bottom: 1px solid $border;
+    border-bottom: 1px solid rgba($border, 0.2);
     &.work, &.study, &.family, &.friend {
       border-left: none;
     }

src/sass/app/_form.scss

@@ -61,10 +61,6 @@ textarea.form-control {
   height: 96px;
 }
 
-.modal-form-btn {
-  text-align: center;
-}
-
 .form-inline {
   .form-group {
     input {
@@ -86,17 +82,6 @@ textarea.form-control {
   }
 }
 
-.modal-content {
-  border-radius: 5px;
-  border: none;
-  color: $default-text;
-  .modal-header {
-    color: $default;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-}
-
 @mixin setSwitchBorder($color) {
   .bootstrap-switch.bootstrap-switch-on {
     border-color: $color;
@@ -447,7 +432,7 @@ label.custom-input-danger {
     color: $default-text;
     border-color: $input-border;
     &:focus, &:hover {
-      background: $default;
+      background: $default-text;
       box-shadow: none;
       outline: 0 !important;
     }
@@ -518,6 +503,10 @@ label.custom-input-danger {
   }
 }
 
+.progress {
+  background: rgba(black, 0.15);
+}
+
 .progress-bar-primary {
   background-color: $primary;
 }

src/sass/app/_grid.scss

@@ -5,7 +5,7 @@
     color: $default-text;
     text-align: center;
     font-size: 18px;
-    background-color: $border-light;
+    background-color: rgba(255, 255, 255, 0.3);
     padding: 12px 5px;
   }
 }

src/sass/app/_modals.scss

@@ -1,3 +1,15 @@
+
+.modal-content {
+  border-radius: 5px;
+  border: none;
+  color: $dropdown-text;
+  .modal-header {
+    color: $default-text;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+}
+
 .modal-buttons {
   margin-top: -12px;
   margin-right: -22px;
@@ -24,10 +36,10 @@
       color: $github-color;
       background-color: transparent;
       border: 1px solid $input-border;
-      @include placeholderStyle($default-text, 0.9);
+      @include placeholderStyle($dropdown-text, 0.9);
     }
     .modal-body p, .modal-body div, .modal-body span{
-      color: $default-text;
+      color: $dropdown-text;
     }
   }
   .modal-header {
@@ -62,7 +74,7 @@
 }
 
 .modal-content .modal-header .modal-title{
-  color: $default-text;
+  color: $dropdown-text;
 }
 
 .message-modal {
@@ -91,7 +103,7 @@
 
 @mixin message-modal-color($color) {
   .modal-header {
-    color: $default-text;
+    color: $dropdown-text;
     background: $color;
   }
 }

src/sass/theme/_buttons.scss

@@ -70,7 +70,7 @@ button.btn.btn-default {
   @include buttonColor(transparent, $border);
   &:active, &:target {
     background-color: rgba(0, 0, 0, 0.2);
-    color: $default;
+    color: $default-text;
   }
 }
 
@@ -138,7 +138,7 @@ button.btn.btn-inverse {
     @include buttonGroupColor($primary);
   }
   button.btn.btn-default {
-    @include buttonGroupColor($default);
+    @include buttonGroupColor($default-text);
   }
   button.btn.btn-danger {
     @include buttonGroupColor($danger);
@@ -255,3 +255,24 @@ button.progress-button {
   padding: 8px 14px;
   font-size: 16px;
 }
+
+.dropdown button.btn.btn-default.dropdown-toggle {
+  color: $default-text;
+  border: 1px solid $border;
+  background-color: transparent;
+  &:focus, &:active {
+    background-color: $default;
+  }
+}
+
+.bootstrap-select {
+  .dropdown-toggle:focus {
+    outline: none !important;
+  }
+  button.btn-default:focus {
+    color: $default;
+  }
+  .btn {
+    transition: none;
+  }
+}

src/sass/theme/_layout.scss

@@ -15,8 +15,8 @@ html, body {
 body {
   font: 14px/16px $font-family;
   color: $default-text;
-  background-color: $body-bg;
+  //background-color: $body-bg;
-  //@include main-background();
+  @include main-background();
 }
 
 &.mobile{
@@ -29,8 +29,8 @@ body {
     bottom: 0;
     right: 0;
     background-attachment: inherit;
-    background-color: $body-bg;
+    //background-color: $body-bg;
-    //@include main-background();
+    @include main-background();
   }
 }
 

src/sass/theme/_table.scss

@@ -3,7 +3,7 @@
   & > thead {
     & > tr {
       & > th {
-        border-bottom: 1px solid $border;
+        border-bottom: 1px solid rgba($border, 0.2);
         white-space: nowrap;
         &:first-child {
           text-align: center;
@@ -22,7 +22,7 @@
       & > td {
         padding: 0px 8px;
         line-height: 35px;
-        border-top: 1px solid $border;
+        border-top: 1px solid rgba($border, 0.2);
         &:first-child {
           text-align: center;
         }

src/sass/theme/bootstrap-overrides/_panel.scss

@@ -2,14 +2,14 @@ $panel-title-height: 44px;
 $panel-heading-font-size: 16px;
 
 .panel {
-  @include scrollbars(.4em, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.5));
+  @include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7));
   color: $default-text;
+  background-color: $default;
   border: none;
   border-radius: 5px;
-  background-color: $default;
   position: relative;
   margin-bottom: 24px;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
   &.animated {
     animation-duration: 0.5s;
   }
@@ -40,8 +40,15 @@ $panel-heading-font-size: 16px;
   }
 }
 
-.panel {
+.panel.panel-blur {
-  background-color: $default;
+  $blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
+  background: url($blurredBgUrl);
+  transition: none;
+  background-attachment: fixed;
+}
+
+.panel-white {
+  background-color: white;
 }
 
 .panel > .panel-body {

src/sass/theme/bootstrap-overrides/_tabs.scss

@@ -129,11 +129,11 @@
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   border-bottom: 1px solid rgba(0, 0, 0, .01);
-  background-color: $primary-light;
+  background-color: rgba(0, 0, 0, 0.2);
   a {
-    color: $default;
+    color: $default-text;
     &:hover {
-      color: $default;
+      color: $default-text;
     }
   }
   & > li > a {
@@ -141,16 +141,16 @@
     margin-bottom: 0;
     border-radius: 0;
     border: none;
-    color: $default;
+    color: $default-text;
     &:hover {
       border: none;
-      color: $default;
+      color: $default-text;
-      background-color: rgba(0, 0, 0, .05);
+      background-color: rgba(0, 0, 0, 0.2);
     }
   }
   & > li.active > a {
-    color: $default;
+    color: $default-text;
-    background-color: rgba(0, 0, 0, .25);
+    background-color: rgba(0, 0, 0, 0.25);
   }
   > li:first-of-type a {
     border-top-left-radius: 5px;

src/sass/theme/components/_msgCenter.scss

@@ -27,7 +27,7 @@
       margin-left: 0;
     }
     & > a {
-      color: $default;
+      color: $sidebar-text;
       text-decoration: none;
       font-size: 13px;
       position: relative;
@@ -35,7 +35,7 @@
         display: inline-block;
         min-width: 10px;
         padding: 2px 4px 2px 4px;
-        color: $default;
+        color: $sidebar-text;
         vertical-align: baseline;
         white-space: nowrap;
         text-align: center;
@@ -125,7 +125,7 @@
       margin-left: 12px;
       text-decoration: none;
       &:hover {
-        color: $default-text;
+        color: $dropdown-text;
       }
     }
   }
@@ -138,7 +138,7 @@
       padding: 10px 12px;
       display: block;
       text-decoration: none;
-      color: $default-text;
+      color: $dropdown-text;
       font-size: 12px;
       &:first-child {
         border-top: none;
@@ -199,7 +199,7 @@
     font-size: 12px;
     text-decoration: none;
     &:hover {
-      color: $default-text;
+      color: $dropdown-text;
     }
   }
 
@@ -211,7 +211,7 @@
       text-align: left;
       border: none;
       text-decoration: none;
-      color: $default-text;
+      color: $dropdown-text;
       padding: 4px 16px 4px 20px;
       &.signout {
         border-top: 1px solid $default;

src/sass/theme/components/_pageTop.scss

@@ -9,12 +9,12 @@
   padding: 0 32px 0 40px;
 
   &.scrolled {
-    //background-color: rgba($sidebar, 0.9)
+    background-color: rgba(black, 0.85)
   }
 }
 
 a.al-logo {
-  color: $default;
+  color: $sidebar-text;
   display: block;
   font-size: 24px;
   font-family: $font-family;
@@ -55,7 +55,7 @@ a.al-logo {
 }
 
 a.refresh-data {
-  color: $default;
+  color: $sidebar-text;
   font-size: 13px;
   text-decoration: none;
   font-weight: $font-normal;
@@ -74,7 +74,7 @@ a.collapse-menu-link {
   display: block;
   text-decoration: none;
   line-height: 42px;
-  color: $default;
+  color: $sidebar-text;
   padding: 0;
   float: left;
   margin: 11px 0 0 25px;
@@ -107,7 +107,7 @@ a.collapse-menu-link {
 
 .search {
   text-shadow: none;
-  color: $default;
+  color: $sidebar-text;
   font-size: 13px;
   line-height: 25px;
   transition: all 0.5s ease;

src/sass/theme/components/_sidebar.scss

@@ -38,9 +38,9 @@ $angle-right: "\f101";
   &.selected:not(.with-sub-menu) {
     background-color: $primary;
     a.al-sidebar-list-link {
-      color: $default;
+      color: $sidebar-text;
       b {
-        color: $default;
+        color: $sidebar-text;
       }
     }
   }
@@ -67,7 +67,7 @@ a.al-sidebar-list-link {
   text-shadow: none;
   font-size: 13px;
   text-decoration: none;
-  color: $default;
+  color: $sidebar-text;
   line-height: 42px;
   white-space: nowrap;
   overflow: hidden;
@@ -96,7 +96,7 @@ a.al-sidebar-list-link {
     top: 12px;
     padding: 0;
     text-align: center;
-    color: #cccccc;
+    color: $sidebar-text;
     transition: transform 0.2s linear;
   }
 }
@@ -136,7 +136,7 @@ a.al-sidebar-list-link {
       text-shadow: none;
       font-size: 13px;
       text-decoration: none;
-      color: $default;
+      color: $sidebar-text;
       padding-left: 52px;
       height: auto;
       line-height: 29px;
@@ -148,7 +148,7 @@ a.al-sidebar-list-link {
       border: none;
       background-color: $primary;
       &:hover {
-        color: $default;
+        color: $sidebar-text;
       }
     }
 

src/sass/theme/conf/_colorScheme.scss

@@ -1,13 +1,15 @@
-$default: #ffffff;
+$default: rgba(#000000, 0.2);
 $body-bg: #F0F3F4;
-$default-text: #666666;
+$default-text: #ffffff;
-$help-text: #949494;
+$help-text: #eeeeee;
 $disabled: #dddddd;
 $disabled-bg: tint($disabled, 15%);
-$border: #d6d6d6;
+$border: #ffffff;
-$border-light: tint($border, 15%);
+$border-light: $border;// tint
-$input-border: shade($border, 5%);
+$input-border: $border;// shade
-$sidebar: #1C2B36;
+$sidebar: rgba(#000000, 0.5);
+$sidebar-text: #ffffff;
+$dropdown-text: #7d7d7d;
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;

src/sass/theme/dashboard/_calendar.scss

@@ -330,7 +330,7 @@ div.blurCalendar{
 .fc-event,
 .fc-event:hover,
 .ui-widget .fc-event {
-  color: $default;
+  color: $default-text;
   text-decoration: none;
 }
 
@@ -730,7 +730,7 @@ a.fc-more {
 }
 
 .fc-head{
-  color: $default;
+  color: $default-text;
   background-color: $primary;
   td, th{
     border:none;

src/sass/theme/dashboard/_popularApp.scss

@@ -9,7 +9,7 @@
     height: 260px;
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
-    border-bottom: 1px solid $border;
+    background: rgba(0, 0, 0, 0.5);
     img {
       max-width: 85%;
       position: absolute;

src/sass/theme/dashboard/_todo.scss

@@ -96,3 +96,99 @@ label.todo-checkbox {
 .add-item-icon {
   display: none;
 }
+
+.task-todo-container.transparent {
+  .todo-panel.panel {
+    color: white;
+    opacity: 0.9;
+  }
+  input.task-todo {
+    color: white;
+    width: calc(100% - 25px);
+    border-radius: 0;
+    border: none;
+    background: transparent;
+    &:focus {
+      outline: none;
+      background-color: transparent;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    }
+  }
+  .add-item-icon {
+    display: block;
+    float: right;
+    margin-top: -45px;
+    margin-right: 5px;
+    font-size: 25px;
+    cursor: pointer;
+  }
+
+  ul.todo-list {
+    li {
+      margin: 0;
+      border: none;
+      font-weight: $font-light;
+
+      .blur-container{
+        height: 40px;
+        position: absolute;
+        width: calc(100% + 40px);;
+        top: 0;
+        left: -25px;
+        overflow-y: hidden;
+      }
+      &:hover{
+        .blur-container{
+          box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+        }
+        .blur-box {
+          height: 100%;
+          background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
+          -webkit-filter: blur(3px);
+        }
+      }
+      i.remove-todo {
+        color: white;
+        opacity: 0.4;
+        &:hover {
+          color: white;
+          opacity: 0.95;
+        }
+      }
+      i.mark {
+        min-width: 40px;
+        display: none;
+      }
+      label.todo-checkbox > span {
+        &:before {
+          position: absolute;
+          color: white;
+          content: '\f10c';
+          float: none;
+          margin-right: 6px;
+          transition: none;
+        }
+      }
+      &.checked {
+        label.todo-checkbox > span {
+          &:before {
+            margin-right: 0;
+            position: absolute;
+            content: '';
+            background-size: contain;
+            background: url($images-root + "app/todo/check-icon.png") no-repeat;
+          }
+        }
+      }
+    }
+  }
+
+  .box-shadow-border{
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    width: calc(100% + 44px);
+    margin-left: -22px;
+  }
+
+}

src/sass/theme/dashboard/_trafficChart.scss

@@ -67,10 +67,6 @@
   height: 300px;
   position: relative;
   float: left;
-  //canvas{
-  //  border: 10px solid rgba(0, 0, 0, 0.34902);
-  //  border-radius: 180px;
-  //}
 }
 
 .traffic-text {
@@ -101,11 +97,11 @@
   border-radius: 0;
   width: 100%;
   margin-bottom: 0;
-  background-color: $border-light;
+  background-color: rgba(0, 0, 0, 0.25);
   box-shadow: none;
   .progress-bar{
     height: 4px;
-    background-color: $input-border;
+    background-color: $default-text;
     box-shadow: none;
   }
 }
@@ -121,17 +117,19 @@
 }
 
 .traffic-chart canvas{
-  border: 10px solid $default;
+  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;
-  border-radius: 100px;
   width: 180px;
   height: 180px;
   left: 60px;
   top: 60px;
+  background-color: rgba(0,0,0,0.35);
+  border-radius: 100px;
 }
 
 @media (max-width: $resM) {