Card fixes

src/_variables.scss

@@ -225,8 +225,10 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
 /* ==========  Card  ========== */
 
 $card-background-color: unquote("rgb(#{$color-white})") !default;
+$card-text-color: unquote("rgb(#{$color-black})") !default;
 $card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
 $card-supporting-text-text-color: $text-color-primary !default;
+$card-border-color: rgba(0,0,0,0.1) !default;
 
 /* ==========  Sliders ========== */
 
@@ -441,7 +443,7 @@ $card-width: 330px !default;
 $card-height: 200px !default;
 $card-font-size: 16px !default;
 $card-title-font-size: 24px !default;
-$card-horizontal-padding: 8px !default;
+$card-horizontal-padding: 16px !default;
 $card-vertical-padding: 16px !default;
 
 $card-title-perspective-origin-x: 165px !default;

src/card/README.md

@@ -118,6 +118,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
 | MDL class | Effect | Remarks |
 |-----------|--------|---------|
 | `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
+| `mdl-card--border` | Adds a border to the card section that it's applied to | Used on the "inner" divs |
 | `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
 | `mdl-card__title` | Defines div as a card title container | Required on "inner" title div |
 | `mdl-card__title-text` | Assigns appropriate text characteristics to card title | Required on head tag (H1 - H6) inside title div |

src/card/_card.scss

@@ -25,22 +25,22 @@
   position: relative;
   background: $card-background-color;
   border-radius: 2px;
+  box-sizing: border-box;
 }
 
 .mdl-card__media {
   background-color: $card-image-placeholder-color;
-  @if str_length($card-background-image-url) > 0 {
-  background-image: url($card-background-image-url);
-  }
   background-repeat: repeat;
   background-position: 50% 50%;
   background-size: cover;
   background-origin: padding-box;
   background-attachment: scroll;
+  box-sizing: border-box;
 }
 
 .mdl-card__title {
   align-items: center;
+  color: $card-text-color;
   display: block;
   display: flex;
   justify-content: stretch;
@@ -48,11 +48,16 @@
   padding: $card-vertical-padding $card-horizontal-padding;
   perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
   transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
+  box-sizing: border-box;
+
+  &.mdl-card--border {
+    border-bottom: 1px solid $card-border-color;
+  }
 }
 
 .mdl-card__title-text {
-  align-self: center;
+  align-self: flex-end;
-  color: black;
+  color: inherit;
   display: block;
   display: flex;
   font-size: $card-title-font-size;
@@ -84,6 +89,11 @@
   width: 100%;
   background-color: rgba(0,0,0,0);
   padding: 8px;
+  box-sizing: border-box;
+
+  &.mdl-card--border {
+    border-top: 1px solid $card-border-color;
+  }
 }