feat(skin): additional skins

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

@@ -40,6 +40,7 @@ blurAdminApp.directive('trafficChart', function () {
 
       var ctx = document.getElementById('chart-area').getContext('2d');
       window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
+        segmentShowStroke: false,
         responsive: true,
         legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
         '<% for (var i=0; i<segments.length; i++){%>' +

src/assets/css/skins/_02_transparent.scss

@@ -1,6 +1,4 @@
 body.badmin-transparent {
-  .panel, .panel:hover {
-    border-color: rgba(80, 80, 80, 0.5);
-    background-color: rgba(0, 0, 0, 0.5);
-  }
+  @include overrideColors(#fff);
+  @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
 }

src/assets/css/skins/_04_peachy.scss

@@ -0,0 +1,6 @@
+body.badmin-peachy {
+  background-image: url(../img/peachy-bg.jpg);
+  .page-top {
+    background-color: rgba(0,0,0,.5);
+  }
+}

src/assets/css/skins/_05_material.scss

@@ -0,0 +1,3 @@
+body.badmin-material {
+  background: #039be6;
+}

src/assets/css/skins/_06_transblue.scss

@@ -5,8 +5,6 @@ body.badmin-transblue {
     background-color: rgba(0,0,0,.5);
   }
 
-  .panel, .panel:hover {
-    border-color: rgba(80, 80, 80, 0.5);
-    background-color: rgba(0, 0, 0, 0.5);
-  }
+  @include overrideColors(#fff);
+  @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
 }

src/assets/css/skins/skins.scss

@@ -1,3 +1,32 @@
+@mixin overrideColors($color) {
+  color: $color;
+
+  p,.pie-charts,.panel-heading>.dropdown .dropdown-toggle, .panel-title, .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a,.traffic-text span {
+    color: $color;
+  }
+  .traffic-text {
+    color: $warning;
+  }
+  .feed-message .message-time, .text-muted {
+    color: darken($color, 20);
+  }
+}
+
+@mixin overridePanelBg($color, $borderColor, $dropdownColor) {
+  .panel, .panel:hover {
+    border-color: $borderColor;
+    background-color: $color;
+  }
+
+  .progress {
+    background: $color;
+  }
+
+  .dropdown-menu {
+    background-color: $dropdownColor;
+  }
+}
+
 @import '02_transparent';
 @import '03_blue';
 @import '04_peachy';