feat(card): align with 2018 material design spec

Aligns the card component with the latest Material Design spec. Also fixes an issue where the border radius wasn't being applied to the image inside the card.

Author: crisbeto

src/lib/card/_card-theme.scss

@@ -25,13 +25,16 @@
   .mat-card-title {
     font: {
       size: mat-font-size($config, headline);
-      weight: mat-font-weight($config, headline);
+      weight: mat-font-weight($config, title);
     }
   }
 
-  .mat-card-subtitle,
-  .mat-card-content,
   .mat-card-header .mat-card-title {
+    font-size: mat-font-size($config, title);
+  }
+
+  .mat-card-subtitle,
+  .mat-card-content {
     font-size: mat-font-size($config, body-1);
   }
 }

src/lib/card/card.scss

@@ -3,17 +3,16 @@
 @import '../../cdk/a11y/a11y';
 
 
-$mat-card-default-padding: 24px !default;
-$mat-card-mobile-padding: 24px 16px !default;
-$mat-card-border-radius: 2px !default;
+$mat-card-padding: 16px !default;
+$mat-card-border-radius: 4px !default;
 $mat-card-header-size: 40px !default;
 
 .mat-card {
   @include mat-elevation-transition;
-  @include mat-overridable-elevation(2);
+  @include mat-overridable-elevation(1);
   display: block;
   position: relative;
-  padding: $mat-card-default-padding;
+  padding: $mat-card-padding;
   border-radius: $mat-card-border-radius;
 
   .mat-divider-horizontal {
@@ -53,14 +52,19 @@ $mat-card-header-size: 40px !default;
   margin-bottom: 16px;
 }
 
-.mat-card-title, .mat-card-subtitle, .mat-card-content {
+.mat-card-title {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.mat-card-subtitle, .mat-card-content {
   @extend %mat-card-section-base;
 }
 
 .mat-card-actions {
   @extend %mat-card-section-base;
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-left: -$mat-card-padding / 2;
+  margin-right: -$mat-card-padding / 2;
   padding: 8px 0;
 }
 
@@ -70,8 +74,8 @@ $mat-card-header-size: 40px !default;
 }
 
 .mat-card-image {
-  width: calc(100% + 48px);
-  margin: 0 -24px 16px -24px;
+  width: calc(100% + #{$mat-card-padding * 2});
+  margin: 0 (-$mat-card-padding) 16px (-$mat-card-padding);
 }
 
 .mat-card-xl-image {
@@ -83,15 +87,15 @@ $mat-card-header-size: 40px !default;
 .mat-card-footer {
   // The negative margins pulls out the element, countering the padding
   // to get the footer to be flush against the side of the card.
-  $margin: -$mat-card-default-padding;
+  $margin: -$mat-card-padding;
 
   display: block;
   margin: 0 $margin $margin $margin;
 }
 
 .mat-card-actions {
   .mat-button, .mat-raised-button {
-    margin: 0 4px;
+    margin: 0 8px;
   }
 }
 
@@ -100,10 +104,14 @@ $mat-card-header-size: 40px !default;
 .mat-card-header {
   display: flex;
   flex-direction: row;
+
+  .mat-card-title {
+    margin-bottom: 12px;
+  }
 }
 
 .mat-card-header-text {
-  margin: 0 8px;
+  margin: 0 $mat-card-padding;
 }
 
 .mat-card-avatar {
@@ -115,52 +123,29 @@ $mat-card-header-size: 40px !default;
 
 // TITLE-GROUP STYLES
 
-// images grouped with title in title-group layout
-%mat-card-title-img {
-  margin: -8px 0;
-}
-
 .mat-card-title-group {
   display: flex;
   justify-content: space-between;
-  margin: 0 -8px;
 }
 
 .mat-card-sm-image {
-  @extend %mat-card-title-img;
   width: 80px;
   height: 80px;
 }
 
 .mat-card-md-image {
-  @extend %mat-card-title-img;
   width: 112px;
   height: 112px;
 }
 
 .mat-card-lg-image {
-  @extend %mat-card-title-img;
   width: 152px;
   height: 152px;
 }
 
 // MEDIA QUERIES
 
 @media ($mat-xsmall) {
-  .mat-card {
-    padding: $mat-card-mobile-padding;
-  }
-
-  .mat-card-actions {
-    margin-left: -8px;
-    margin-right: -8px;
-  }
-
-  .mat-card-image {
-    width: calc(100% + 32px);
-    margin: 16px -16px;
-  }
-
   .mat-card-title-group {
     margin: 0;
   }
@@ -169,16 +154,6 @@ $mat-card-header-size: 40px !default;
     margin-left: 0;
     margin-right: 0;
   }
-
-  .mat-card-header {
-    margin: -8px 0 0 0;
-  }
-
-  .mat-card-footer {
-    margin-left: -16px;
-    margin-right: -16px;
-  }
-
 }
 
 // FIRST/LAST CHILD ADJUSTMENTS
@@ -197,15 +172,17 @@ $mat-card-header-size: 40px !default;
 }
 
 // if main image is on top, need to place it flush against top
-// (by stripping card's default 24px padding)
+// (by stripping card's default padding)
 .mat-card-image:first-child {
-  margin-top: -24px;
+  margin-top: -$mat-card-padding;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 // actions panel on bottom should be 8px from bottom of card
-// so must strip 16px from default card padding of 24px
+// so must strip 16px from default card padding
 .mat-card > .mat-card-actions:last-child {
-  margin-bottom: -16px;
+  margin-bottom: -8px;
   padding-bottom: 0;
 }
 
@@ -217,6 +194,10 @@ $mat-card-header-size: 40px !default;
   margin-right: 0;
 }
 
+.mat-card-title {
+  margin-bottom: 8px;
+}
+
 // should be 12px space between titles and subtitles generally
 // default margin-bottom is 16px, so need to move lower title up 4px
 .mat-card-title:not(:first-child), .mat-card-subtitle:not(:first-child) {
@@ -230,13 +211,13 @@ $mat-card-header-size: 40px !default;
 }
 
 // xl image should always have 16px on top.
-// when it's the first el, it'll need to remove 8px from default card padding of 24px
+// when it's the first el, it'll need to remove 8px from default card padding
 .mat-card > .mat-card-xl-image:first-child {
   margin-top: -8px;
 }
 
 // xl image should always have 16px on bottom
-// when it's the last el, it'll need to remove 8px from default card padding of 24px
+// when it's the last el, it'll need to remove 8px from default card padding
 .mat-card > .mat-card-xl-image:last-child {
   margin-bottom: -8px;
 }