fix(card): md-action-bar renamed to .md-actions

-Margins adjusted on Card and Dialog action buttons
-Alt text added to images in card demos

Closes #2472

Author: Marcy Sutton

src/components/card/card.js

@@ -26,13 +26,17 @@ angular.module('material.components.card', [
  * container will wrap text content and provide padding. An `<md-card-footer>` element can be
  * optionally included to put content flush against the bottom edge of the card.
  *
+ * Action buttons can be included in an element with the `.md-actions` class, also used in `md-dialog`.
+ * You can then position buttons using layout attributes.
+ *
  * Cards have constant width and variable heights; where the maximum height is limited to what can
  * fit within a single view on a platform, but it can temporarily expand as needed.
  *
  * @usage
+ * ###Card with optional footer
  * <hljs lang="html">
  * <md-card>
- *  <img src="card-image.png" class="md-card-image">
+ *  <img src="card-image.png" class="md-card-image" alt="image caption">
  *  <md-card-content>
  *    <h2>Card headline</h2>
  *    <p>Card content</p>
@@ -43,6 +47,21 @@ angular.module('material.components.card', [
  * </md-card>
  * </hljs>
  *
+ * ###Card with actions
+ * <hljs lang="html">
+ * <md-card>
+ *  <img src="card-image.png" class="md-card-image" alt="image caption">
+ *  <md-card-content>
+ *    <h2>Card headline</h2>
+ *    <p>Card content</p>
+ *  </md-card-content>
+ *  <div class="md-actions" layout="row" layout-align="end center">
+ *    <md-button>Action 1</md-button>
+ *    <md-button>Action 2</md-button>
+ *  </div>
+ * </md-card>
+ * </hljs>
+ *
  */
 function mdCardDirective($mdTheming) {
   return {

src/components/card/card.scss

@@ -1,12 +1,11 @@
-$card-margin: 8px !default;
 $card-padding: 16px !default;
 $card-box-shadow: $whiteframe-shadow-z1 !default;
 
 md-card {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  margin: $card-margin;
+  margin: $baseline-grid;
 
   box-shadow: $card-box-shadow;
 
@@ -18,12 +17,14 @@ md-card {
   md-card-content {
     padding: $card-padding;
   }
-  md-action-bar {
+  .md-actions {
     margin: 0;
 
     .md-button {
-      margin-bottom: $card-margin;
-      margin-top: $card-margin;
+      margin-bottom: $baseline-grid;
+      margin-top: $baseline-grid;
+      margin-right: $baseline-grid * .5;
+      margin-left: $baseline-grid * .5;
     }
   }
   md-card-footer {

src/components/card/demoBasicUsage/index.html

@@ -12,10 +12,10 @@ <h2 class="md-title">Paracosm</h2>
           two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
         </p>
       </md-card-content>
-      <md-action-bar layout="row" layout-align="end center">
+      <div class="md-actions" layout="row" layout-align="end center">
         <md-button>Action 1</md-button>
         <md-button>Action 2</md-button>
-      </md-action-bar>
+      </div>
     </md-card>
 
     <md-card>

src/components/dialog/dialog.scss

@@ -54,14 +54,19 @@ md-dialog {
     box-sizing: border-box;
     align-items: center;
     justify-content: flex-end;
-    padding: $baseline-grid;
+    margin-bottom: 0;
+    padding-right: $baseline-grid;
     padding-left: $baseline-grid * 3;
-    min-height: $baseline-grid * 5;
+    min-height: $baseline-grid * 6.5;
 
     > * {
       margin-left: $baseline-grid / 2;
       margin-right: 0;
     }
+    .md-button {
+      margin-bottom: $baseline-grid;
+      margin-top: $baseline-grid;
+    }
   }
   &.md-content-overflow .md-actions {
     border-top: 1px solid;