cards components

scss/_variables.scss

@@ -220,6 +220,9 @@ $card-active-border-color: $blue !default;
 $card-status-size: 2px !default;
 $card-group-margin: 1.5rem !default;
 
+$card-shadow: rgba($dark, .04) 0 2px 4px 0;
+$card-shadow-hover: rgba($dark, .08) 0 2px 12px 0;
+
 //close
 $close-font-weight: 400 !default;
 $close-font-size: 1.5rem !default;
@@ -239,6 +242,9 @@ $breadcrumb-variants: (
   bullets: '\02022',
 ) !default;
 
+//nav
+$nav-link-padding-y: .25rem !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;

scss/ui/_avatars.scss

@@ -11,7 +11,7 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: $body-bg no-repeat center/cover;
+  background: $gray-200 no-repeat center/cover;
   border-radius: 50%;
 
   .icon {
@@ -56,7 +56,6 @@
   }
 
   a.avatar {
-
     &:hover {
       z-index: 1;
     }
@@ -67,5 +66,9 @@
   .avatar {
     margin-right: -.5em !important;
     box-shadow: 0 0 0 2px #fff;
+
+    @at-root .card-footer & {
+      box-shadow: 0 0 0 2px $card-cap-bg;
+    }
   }
 }

scss/ui/_cards.scss

@@ -1,6 +1,16 @@
 .card {
   margin-bottom: $card-group-margin;
-  box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0;
+  box-shadow: $card-shadow;
+
+  @at-root a#{&} {
+    color: inherit;
+    transition: .3s box-shadow;
+
+    &:hover {
+      text-decoration: none;
+      box-shadow: $card-shadow-hover;
+    }
+  }
 }
 
 .card-group {
@@ -9,8 +19,27 @@
 
 .card-inactive {
   box-shadow: none;
-  opacity: .8;
   pointer-events: none;
+
+  .card-body {
+    opacity: .64;
+  }
+}
+
+.card-active {
+  position: relative;
+  background-color: rgba($primary, .03);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border: 1px solid $primary;
+    border-radius: inherit;
+  }
 }
 
 .card-link {
@@ -35,6 +64,23 @@
   }
 }
 
+.card-stacked {
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: 5px;
+    right: 5px;
+    border: 1px solid $card-border-color;
+    border-radius: $card-border-radius $card-border-radius 0 0;
+    background: $card-bg;
+    z-index: -1;
+    height: 5px
+  }
+}
+
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
@@ -65,20 +111,23 @@
 .card-header {
   display: flex;
   align-items: center;
-  min-height: 3.5rem;
   background: transparent;
 }
 
 .card-header-tabs {
+  flex: 1;
   margin: (- $card-spacer-y) (- $card-spacer-x);
 }
 
+.card-header-pills {
+  flex: 1;
+}
+
 .card-footer {
   color: $text-muted;
 }
 
 .card-progress {
-  height: 4px;
 
   &:last-child {
     border-radius: 0 0 2px 2px;
@@ -103,7 +152,7 @@
   }
 
   .card-header & {
-    margin: 0;
+    margin: -.125rem 0;
   }
 }
 
@@ -158,7 +207,7 @@ Card status
   right: auto;
   bottom: 0;
   height: 100%;
-  width: 2px;
+  width: $card-status-size;
   border-radius: $card-border-radius 0 0 $card-border-radius;
 }
 
@@ -167,7 +216,7 @@ Card status
   bottom: 0;
   width: 100%;
   top: initial;
-  height: 2px;
+  height: $card-status-size;
   border-radius: 0 0 $card-border-radius $card-border-radius;
 }
 
@@ -231,21 +280,6 @@ Card chart
   z-index: 1;
   height: 3.5rem;
 }
-/*
-Card Aside
-*/
-.card-aside {
-  flex-direction: row;
-}
-
-.card-aside-column {
-  min-width: 5rem;
-  width: 30%;
-  flex: 0 0 30%;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  background: no-repeat center/cover;
-}
 
 /*
 Card profile

scss/ui/_empty.scss

@@ -1,7 +1,7 @@
 .empty {
   text-align: center;
   color: $text-muted;
-  padding: 2rem 1rem;
+  padding: 2rem 3rem;
   height: 100%;
 
   display: flex;
@@ -18,7 +18,7 @@
 
   .empty-title,
   .empty-subtitle {
-    margin: 0 0 .25rem;
+    margin: 0 0 .5rem;
   }
 
   .empty-action {

scss/ui/_nav.scss

@@ -1,11 +1,11 @@
+
 .nav-tabs {
   .icon {
     color: $text-muted;
   }
 
   .nav-link {
-    padding-right: $card-spacer-x;
-    padding-left: $card-spacer-x;
+    padding: $card-spacer-y $card-spacer-x;
     line-height: 20px;
     color: $text-muted;
     cursor: pointer;
@@ -24,6 +24,7 @@
     }
 
     &.active {
+      color: $body-color;
       background: inherit;
       border-color: transparent;
       border-bottom-color: $primary;