From 43aaef82100f5d98c9a235c14ee4b7db36d2809d Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Thu, 6 Jul 2017 17:28:58 +0300
Subject: [PATCH] fix(dashboard): improve status cards styles

---
 .../status-cards/status-cards.component.scss  | 145 ++++++++++++------
 .../status-cards/status-cards.component.ts    |   2 +-
 2 files changed, 97 insertions(+), 50 deletions(-)

diff --git a/src/app/pages/dashboard/status-cards/status-cards.component.scss b/src/app/pages/dashboard/status-cards/status-cards.component.scss
index 8367a791..10e96acf 100644
--- a/src/app/pages/dashboard/status-cards/status-cards.component.scss
+++ b/src/app/pages/dashboard/status-cards/status-cards.component.scss
@@ -6,69 +6,116 @@
     flex-direction: row;
     align-items: center;
     height: 6rem;
-    box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
     overflow: visible;
     cursor: pointer;
+    color: nga-theme(card-fg-heading);
 
-    position: relative;
-    &::before {
-      position: absolute;
-      content: '';
-      height: calc(100% + 3px);
-      width: 100%;
-      left: 0;
-      top: 0;
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: nga-theme(card-border-radius);
+    $bevel: btn-hero-bevel(nga-theme(card-bg));
+    $shadow: btn-hero-shadow();
+    box-shadow: $bevel, $shadow;
+    transition: all 0.1s ease-out;
+
+    $border-radius: nga-theme(card-border-radius);
+    .icon-container {
+      font-size: 4em;
+      padding: 0.5rem 1.75rem;
+      border-radius: $border-radius 0 0 $border-radius;
+      transition: all 0.1s ease-out, color 0s;
+
+      &.primary {
+        @include btn-hero-primary-gradient();
+        @include btn-hero-primary-bevel-glow-shadow();
+      }
+      &.success {
+        @include btn-hero-success-gradient();
+        @include btn-hero-success-bevel-glow-shadow();
+      }
+      &.info {
+        @include btn-hero-info-gradient();
+        @include btn-hero-info-bevel-glow-shadow();
+      }
+      &.warning {
+        @include btn-hero-warning-gradient();
+        @include btn-hero-warning-bevel-glow-shadow();
+      }
     }
 
-    &.on {
-      box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
+    &:hover {
+      background: lighten(nga-theme(card-bg), 5%);
 
       .icon-container {
-        box-shadow: none;
+        &.primary {
+          background-image: btn-hero-primary-light-gradient();
+        }
         &.success {
-          box-shadow: inset 0 5px 9px 0 #00967d,
-                            0 4px 10px 0 rgba(33, 7, 77, 0.5),
-                            0 2px 12px 0 rgba(35, 255, 181, 0.6);
+          background-image: btn-hero-success-light-gradient();
+        }
+        &.info {
+          background-image: btn-hero-info-light-gradient();
+        }
+        &.warning {
+          background-image: btn-hero-warning-light-gradient();
         }
       }
-      &::before {
-        display: none;
+    }
+
+    &:active {
+      box-shadow: none;
+      background: nga-theme(card-bg);
+
+      .icon-container {
+        &.primary, &.success, &.info, &.warning {
+          box-shadow: none;
+        }
+        &.primary {
+          background-image: btn-hero-primary-dark-gradient();
+        }
+        &.success {
+          background-image: btn-hero-success-dark-gradient();
+        }
+        &.info {
+          background-image: btn-hero-info-dark-gradient();
+        }
+        &.warning {
+          background-image: btn-hero-warning-dark-gradient();
+        }
       }
     }
-  }
 
-  .icon-container {
-    font-size: 4em;
-    padding: 0.5rem 1.75rem;
-    color: nga-theme(card-foreground);
-    border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
+    &.off {
+      color: nga-theme(card-fg);
 
-    &.primary {
-      @include btn-hero-primary();
-    }
-    &.success {
-      @include btn-hero-success();
-    }
-    &.info {
-      @include btn-hero-info();
-    }
-    &.warning {
-      @include btn-hero-warning();
-    }
-  }
+      .icon-container {
+        &.primary, &.success, &.info, &.warning {
+          box-shadow: none;
+          background-image: linear-gradient(to right, transparent, transparent);
+        }
+      }
 
-  .details {
-    margin-left: 1.5rem;
-  }
-  .title {
-    font-size: 1.5rem;
-  }
-  .status {
-    font-size: 1.125rem;
-    font-weight: nga-theme(font-weight-light);
-    text-transform: uppercase;
-    color: nga-theme(card-foreground-secondary);
+      .details {
+        border-left: 1px solid nga-theme(separator);
+      }
+      .status {
+        color: nga-theme(card-fg);
+      }
+    }
+
+    .details {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+      padding-left: 1.5rem;
+      border-left: 1px solid transparent;
+    }
+    .title {
+      font-size: 1.5rem;
+    }
+    .status {
+      font-size: 1.125rem;
+      font-weight: nga-theme(font-weight-light);
+      text-transform: uppercase;
+      color: nga-theme(card-fg-heading);
+    }
   }
 }
diff --git a/src/app/pages/dashboard/status-cards/status-cards.component.ts b/src/app/pages/dashboard/status-cards/status-cards.component.ts
index 54db995e..8cf0a500 100644
--- a/src/app/pages/dashboard/status-cards/status-cards.component.ts
+++ b/src/app/pages/dashboard/status-cards/status-cards.component.ts
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   template: `
     <div class="row">
       <div class="col-lg-3" *ngFor="let card of statusCards">
-        <nga-card (click)="card.on = !card.on" [ngClass]="{'on': card.on}">
+        <nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
           <div class="icon-container {{card.type}}">
             <i class="{{card.icon}}"></i>
           </div>