refactor: restyle transparent skin

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

@@ -46,17 +46,9 @@
     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++){%>' +
-      '<li class="clearfix">' +
-      '<span style="background-color:<%=segments[i].fillColor%>"></span>' +
-      '<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
-      '</li><%}%>' +
-      '</ul>'
+      percentageInnerCutout : 64,
+      responsive: true
     });
 
-    var legend = window.myDoughnut.generateLegend();
-    $('.traffic-legend').html(legend);
   }
 })();

src/app/pages/dashboard/trafficChart/trafficChart.html

@@ -1,6 +1,7 @@
 <div class="channels-block" track-width="smallContainerWidth" min-width="640"
      ng-class="{'small-container': smallContainerWidth}">
 
+  <div class="chart-bg"></div>
   <div class="traffic-chart" id="trafficChart">
     <div class="canvas-holder">
       <canvas id="chart-area" width="300" height="300"></canvas>
@@ -15,34 +16,54 @@
   <div class="channels-info">
     <div>
       <div class="channels-info-item">
-        <p>Direct Traffic</p>
-        <span class="text-muted channel-change">70% growth in last mont</span>
+        <div class="legend-color successLight"></div>
+        <p>Direct Traffic<span class="channel-number">+70%</span></p>
         <div class="progress progress-sm channel-progress">
-          <div class="progress-bar progress-bar-success" role="progressbar"
+          <div class="progress-bar " role="progressbar"
                aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
           </div>
         </div>
       </div>
 
       <div class="channels-info-item">
-        <p>Search engines</p>
-        <span class="text-muted channel-change">42% growth in last month</span>
+        <div class="legend-color danger"></div>
+        <p>Search engines<span class="channel-number">+22%</span></p>
         <div class="progress progress-sm channel-progress">
-          <div class="progress-bar progress-bar-danger" role="progressbar"
+          <div class="progress-bar " role="progressbar"
                aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
           </div>
         </div>
       </div>
 
       <div class="channels-info-item">
-        <p>Ad Campaigns</p>
-        <span class="text-muted channel-change">87% growth in last mont</span>
+        <div class="legend-color primary"></div>
+        <p>Ad Campaigns<span class="channel-number">+87%</span></p>
         <div class="progress progress-sm channel-progress">
-          <div class="progress-bar progress-bar-primary" role="progressbar"
+          <div class="progress-bar " role="progressbar"
                aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
           </div>
         </div>
       </div>
+
+      <div class="channels-info-item">
+        <div class="legend-color successDark"></div>
+        <p>Referral<span class="channel-number">+38%</span></p>
+        <div class="progress progress-sm channel-progress">
+          <div class="progress-bar " role="progressbar"
+               aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
+          </div>
+        </div>
+      </div>
+
+      <div class="channels-info-item">
+        <div class="legend-color warning"></div>
+        <p>Ohter<span class="channel-number">+17%</span></p>
+        <div class="progress progress-sm channel-progress">
+          <div class="progress-bar " role="progressbar"
+               aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 

src/app/pages/ui/alerts/alerts.html

@@ -5,7 +5,7 @@
          ba-panel
          ba-panel-title="Basic"
          ba-panel-class="with-scroll">
-      <div>
+      <div class="default-color">
         <div class="alert bg-success">
           <strong>Well done!</strong> You successfully read this important alert message.
         </div>

src/app/pages/ui/grid/baseGrid.html

@@ -134,7 +134,7 @@
 <h4 class="grid-h">Responsive column resets</h4>
 <div class="row show-grid">
   <div class="col-xs-6 col-sm-3">
-    <div>.col-xs-6 .col-sm-3 <p>Resize your viewport or check it out on your phone for an example.</p></div>
+    <div>.col-xs-6 .col-sm-3 <p class="default-color">Resize your viewport or check it out on your phone for an example.</p></div>
   </div>
   <div class="col-xs-6 col-sm-3">
     <div>.col-xs-6 .col-sm-3</div>

src/app/pages/ui/typography/typography.html

@@ -55,14 +55,14 @@
         </p>
       </div>
       <div class="section-block upper-text bold-text">
-        <p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
           quis
           ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
           ornare
           nulla. </p>
       </div>
       <div class="section-block bold-text">
-        <p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
           quis
           ullam-corper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
           ornare

src/app/tplSkin/tplSkin.constants.js

@@ -8,6 +8,13 @@
   var SKIN_CLASS_PREFIX = 'badmin';
 
   var ADMIN_STYLES = [
+    {
+      name: 'Transparent (beta)',
+      bodyClass: SKIN_CLASS_PREFIX + '-transparent',
+      panelType: "panel-blur",
+      thumbnailUrl: 'assets/img/app/skin-thumbnails/02_transparent.jpg',
+      chartColorProfile: 'transparent'
+    },
     {
       name: 'Default',
       bodyClass: '',
@@ -42,13 +49,6 @@
       panelType: "panel-blur",
       thumbnailUrl: 'assets/img/app/skin-thumbnails/06_transblue.jpg',
       chartColorProfile: 'transparent'
-    },
-    {
-      name: 'Transparent (beta)',
-      bodyClass: SKIN_CLASS_PREFIX + '-transparent',
-      panelType: "panel-blur",
-      thumbnailUrl: 'assets/img/app/skin-thumbnails/02_transparent.jpg',
-      chartColorProfile: 'transparent'
     }
   ];
 

src/app/tplSkin/tplSkinManager.service.js

@@ -43,6 +43,8 @@
     function _addSkinBodyClass(skin) {
       angular.element($document[0].body).addClass(skin.bodyClass);
     }
+
+    this.setActiveSkin(activeSkin);
   }
 
 })();

src/sass/app/_grid.scss

@@ -1,8 +1,8 @@
-.show-grid [class^=col-] {
-
+.show-grid div[class^=col-]{
   padding: 10px;
   box-sizing: border-box;
   div {
+    color: $default-text;
     text-align: center;
     font-size: 18px;
     background-color: $border-light;;

src/sass/app/_typography.scss

@@ -186,7 +186,6 @@ h5 {
     padding-top: 1px;
     li {
       margin-top: 5px;
-      color: $default-text;
       font-size: 14px;
       ul, ol {
         padding-left: 20px;

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

@@ -9,7 +9,7 @@ $panel-heading-font-size: 16px;
   position: relative;
   //transition: all 0.2s ease;
   margin-bottom: 24px;
-
+  box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.25);
   /*&:hover {
     background: $panel-bg-hover;
   }*/
@@ -56,6 +56,8 @@ $panel-heading-font-size: 16px;
 
 .panel-title {
   font-weight: $font-normal;
+  text-transform: uppercase;
+  opacity: 0.9;
   //text-transform: uppercase;
 }
 

src/sass/theme/components/_contentTop.scss

@@ -4,13 +4,15 @@
 }
 
 h1.al-title {
-  font-weight: $font-normal;
+  font-weight: $font-bold;
   color: #ffffff;
   float: left;
   width: auto;
   margin: 0;
   padding: 0;
-  font-size: 30px;
+  font-size: 24px;
+  text-transform: uppercase;
+  opacity: 0.9;
 }
 
 .al-breadcrumb {

src/sass/theme/conf/_mixins.scss

@@ -78,9 +78,22 @@
 }
 
 @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, .form-group label {
+  p,
+  h1,h2,h3,h4,h5,h6,
+  .pie-chart-item,
+  .panel-heading>.dropdown .dropdown-toggle,
+  .panel-title,
+  ol.blur span,
+  ul.blur,
+  .popular-app-cost,
+  .popular-app-info,
+  .panel-title>.small,
+  .panel-title>.small>a,
+  .panel-title>a,
+  .panel-title>small,
+  .panel-title>small>a,
+  .traffic-text span,
+  .form-group label {
     color: $color;
   }
   .traffic-text {

src/sass/theme/dashboard/_popularApp.scss

@@ -8,7 +8,8 @@
     background: #2d2d2d;
     padding: 30px 0;
     height: 260px;
-
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
     img {
       max-width: 60%;
       max-height: 70%;

src/sass/theme/dashboard/_trafficChart.scss

@@ -5,7 +5,9 @@
 
 .channels-info {
   display: inline-block;
-  width: calc(100% - 500px);
+  width: calc(100% - 370px);
+  margin-left: 70px;
+  margin-top: -20px;
 }
 .small-container {
   .channels-info {
@@ -14,14 +16,19 @@
 }
 
 .channels-info-item {
-  margin-bottom: 19px;
   p {
     margin-bottom: 9px;
+    font-size: 18px;
+    opacity: 0.9;
+  }
+  .channel-number{
+    display: inline-block;
+    float: right;
   }
 }
 
 .traffic-chart {
-  width: 500px;
+  width: 300px;
   position: relative;
   min-height: 300px;
   float: left;
@@ -60,6 +67,10 @@
   height: 300px;
   position: relative;
   float: left;
+  //canvas{
+  //  border: 10px solid rgba(0, 0, 0, 0.34902);
+  //  border-radius: 180px;
+  //}
 }
 
 .traffic-text {
@@ -75,7 +86,7 @@
   //color: $danger;
   span {
     display: block;
-    font-size: 12px;
+    font-size: 18px;
     color: $default-text;
   }
 }
@@ -86,10 +97,40 @@
 }
 
 .channel-progress {
-  height: 16px;
+  height: 4px;
   border-radius: 0;
   width: 100%;
   margin-bottom: 0;
+  background-color: rgba(0, 0, 0, 0.25);
+  .progress-bar{
+    height: 4px;
+    background-color: white;
+  }
+}
+
+.legend-color{
+  width: 30px;
+  height: 30px;
+  box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.25);
+  position: relative;
+  top: 27px;
+  border-radius: 15px;
+  left: -45px;
+  &.successDark{
+    background-color: $success-dark;
+  }
+  &.successLight{
+    background-color: $success-light;
+  }
+  &.danger{
+    background-color: $danger-bg;
+  }
+  &.primary{
+    background-color: $primary-bg;
+  }
+  &.warning{
+    background-color: $warning-bg;
+  }
 }
 
 @mixin doughnut-size($size) {
@@ -133,6 +174,21 @@
   }
 }
 
+.traffic-chart canvas{
+  border: 10px solid rgba(0,0,0,0.0);
+  border-radius: 150px;
+}
+
+.chart-bg{
+  background-color: $primary-dark;
+  position: absolute;
+  border-radius: 100px;
+  width: 180px;
+  height: 180px;
+  left: 60px;
+  top: 60px;
+}
+
 @media (max-width: $resMin) {
   @include doughnut-size(200px);
 }

src/sass/theme/skins/_02_transparent.scss

@@ -1,4 +1,26 @@
 body.badmin-transparent {
   @include overrideColors(#fff);
   @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
+  .default-color{
+    color: $default-text;
+  }
+  .traffic-chart canvas{
+    border: 10px solid rgba(0,0,0,0.35);
+    border-radius: 150px;
+  }
+  .panel.panel-blur{
+    border-radius: 5px;
+    .panel-heading{
+      border-bottom: 1px solid rgba(0,0,0,0.12);
+      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    }
+  }
+  .popular-app-img {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+  .popular-app-cost{
+    border-bottom: 1px solid rgba(0,0,0,0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  }
 }