clean up card styles. add new vars

diff --git a/scss/_card.scss b/scss/_card.scss
index b3d6e39615fbd330a70fefc080d68c2115c19cf5..03a2aa814e3beb1632b96c2400d8be7853b474ca 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -2,15 +2,19 @@
 // Base styles
 //
 
-$card-spacer-x:      1.25rem;
-$card-spacer-y:      .75rem;
-$card-border-width:  .0625rem;
-$card-border-radius: .25rem;
+$card-spacer-x:            1.25rem;
+$card-spacer-y:            .75rem;
+$card-border-width:        .0625rem;
+$card-border-radius:       .25rem;
+$card-border-color:        #e5e5e5;
+$card-border-radius-inner: ($card-border-radius - $card-border-width);
+
+$card-cap-bg: #f5f5f5;
 
 .card {
   position: relative;
   margin-bottom: $card-spacer-y;
-  border: $card-border-width solid #e5e5e5;
+  border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
 
@@ -73,19 +77,21 @@ $card-border-radius: .25rem;
 
 .card-header {
   padding: $card-spacer-y $card-spacer-x;
-  border-bottom: $card-border-width solid #eee;
+  background-color: $card-cap-bg;
+  border-bottom: $card-border-width solid $card-border-color;
 
   &:first-child {
-    @include border-radius($card-border-radius $card-border-radius 0 0);
+    @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
   }
 }
 
 .card-footer {
   padding: $card-spacer-y $card-spacer-x;
-  border-top: $card-border-width solid #eee;
+  background-color: $card-cap-bg;
+  border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
-    @include border-radius(0 0 $card-border-radius $card-border-radius);
+    @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
   }
 }
 
@@ -233,6 +239,7 @@ $card-border-radius: .25rem;
       flex: 1 0 0;
     } @else {
       display: table-cell;
+      vertical-align: top;
     }
 
     + .card {
@@ -241,34 +248,31 @@ $card-border-radius: .25rem;
     }
 
     // Handle rounded corners
-    &:first-child {
-      .card-img-top {
-        @if $enable-rounded {
+    @if $enable-rounded {
+      &:first-child {
+        .card-img-top {
           border-top-right-radius: 0;
         }
-      }
-      .card-img-bottom {
-        @if $enable-rounded {
+        .card-img-bottom {
           border-bottom-right-radius: 0;
         }
       }
-    }
-    &:last-child {
-      .card-img-top {
-        @if $enable-rounded {
+      &:last-child {
+        .card-img-top {
           border-top-left-radius: 0;
         }
-      }
-      .card-img-bottom {
-        @if $enable-rounded {
+        .card-img-bottom {
           border-bottom-left-radius: 0;
         }
       }
-    }
-    &:not(:first-child):not(:last-child) {
-      .card-img-top,
-      .card-img-bottom {
-        @include border-radius(0);
+
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+
+        .card-img-top,
+        .card-img-bottom {
+          border-radius: 0;
+        }
       }
     }
   }