Add Card Dashboard

gilbertocoelho · Mar 24, 2015 · 18b3274 · 18b3274
1 parent d4dea6d
commit 18b3274
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 154 deletions.
diff --git a/css/scss/style.scss b/css/scss/style.scss
@@ -11,13 +11,10 @@ body {
 :focus {
   outline: none;
 }
-.row {
-  margin-right: 0;
-  margin-left: 0;
-}
 
 // Navbar 
 .navbar {
+  z-index: 10001;
   & > .container, & > .container-fluid {
     .navbar-brand {
       margin-left: -10px;
@@ -44,12 +41,17 @@ body {
 }
 // Side Menu Lib
 .content-container {
+
+  margin-right: 0;
+  margin-left: 0;
   .side-menu {
+    z-index: 10000;
     position: fixed;
     width: 50px;
     height: 100%;
     -webkit-transition: all 0.25s;
     transition: all 0.25s;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
 
     .navbar-header {
       width: 100%;
@@ -136,13 +138,18 @@ body {
   margin-right: -15px;
 }
 
+.page-title {
+  font-family: 'Lato', sans-serif;
+}
+
 /* Main body section */
 .content-container .side-body {
   margin-left: 60px;
 }
 .content-container.expanded .side-body {
   margin-left: 260px;
 }
+
 /* small screen */
 @media (max-width: 768px) {
   .side-menu {
@@ -334,4 +341,39 @@ body {
   #dropdown .panel-body .navbar-nav {
     margin: 0;
   }
+}
+
+/* Card */
+.card {
+  background-color: #FFF;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+  .card-body {
+    padding: 5px;
+  }
+}
+
+.card.summary-inline {
+  .card-body {
+    padding: 20px;
+    .icon {
+    }
+    .content {
+      float: right;
+
+      .title {
+        font-family: 'Lato', sans-serif;
+        margin-top: -0.3em;
+        font-size: 3.5em;
+        text-align: right;
+      }
+
+      .sub-title {
+        font-family: 'Lato', sans-serif;
+        font-size: 0.8em;
+        text-align: right;
+        margin-top: -10px;
+      }
+    }
+  }
 }
diff --git a/css/scss/themes.scss b/css/scss/themes.scss
@@ -5,6 +5,10 @@
   $theme-menu-bg-color: #D4D4D4;
   $theme-inverse-color: #3E4651;
   $theme-primary-color: #F64747;
+  $theme-success-color: #00B16A;
+  $theme-warning-color: #FF9704;
+  $theme-blue-color: #22A7F0;
+
 
   $white-color: #FFF;
 
@@ -73,4 +77,25 @@
 
     }
   }
+
+  // Card
+  .card.red {
+    background-color: $theme-primary-color;
+    color: $white-color;
+  }
+
+  .card.yellow {
+    background-color: $theme-warning-color;
+    color: $white-color;
+  }
+
+  .card.green {
+    background-color: $theme-success-color;
+    color: $white-color;
+  }
+
+  .card.blue {
+    background-color: $theme-blue-color;
+    color: $white-color;
+  }
 }