Create styles for actions and content

docs/src/pages/components/Dialog.vue

@@ -3,34 +3,39 @@
     <div slot="examples">
       <demo-example label="Default" height="500">
         <md-dialog ref="dialog1">
-          <div class="md-dialog-content">
-            <form>
-              <md-input-container>
-                <label>Test</label>
-                <md-input></md-input>
-              </md-input-container>
-            </form>
-          </div>
+          <md-dialog-content>
+            <h2 class="md-title">Use Google's location service?</h2>
 
-          <md-button class="md-primary" @click="closeDialog('dialog1')">Close</md-button>
+            <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
+          </md-dialog-content>
+
+          <md-dialog-actions>
+            <md-button class="md-primary" @click="closeDialog('dialog1')">Disagree</md-button>
+            <md-button class="md-primary" @click="closeDialog('dialog1')">Agree</md-button>
+          </md-dialog-actions>
         </md-dialog>
 
         <md-dialog md-open-from="#trigger" md-close-to="#trigger" ref="dialog2">
-          <div class="md-dialog-content">
+          <md-dialog-content>
+            <h2 class="md-title">Create new note</h2>
+
             <form>
               <md-input-container>
-                <label>Test</label>
-                <md-input></md-input>
+                <label>Note</label>
+                <md-textarea></md-textarea>
               </md-input-container>
             </form>
-          </div>
+          </md-dialog-content>
 
-          <md-button class="md-primary" @click="closeDialog('dialog2')">Close</md-button>
+          <md-dialog-actions>
+            <md-button class="md-primary" @click="closeDialog('dialog2')">Cancel</md-button>
+            <md-button class="md-primary" @click="closeDialog('dialog2')">Create</md-button>
+          </md-dialog-actions>
         </md-dialog>
 
         <md-button class="md-primary md-raised" @click="openDialog('dialog1')">Simple</md-button>
         <md-button class="md-fab md-fab-bottom-right" id="trigger" @click="openDialog('dialog2')">
-          <md-icon>add<md-icon>
+          <md-icon>add</md-icon>
         </md-button>
       </demo-example>
     </div>

src/components/mdDialog/index.js

@@ -1,8 +1,12 @@
 import mdDialog from './mdDialog.vue';
+import mdDialogContent from './mdDialogContent.vue';
+import mdDialogActions from './mdDialogActions.vue';
 import mdDialogTheme from './mdDialog.theme';
 
 export default function install(Vue) {
   Vue.component('md-dialog', Vue.extend(mdDialog));
+  Vue.component('md-dialog-content', Vue.extend(mdDialogContent));
+  Vue.component('md-dialog-actions', Vue.extend(mdDialogActions));
 
   Vue.material.styles.push(mdDialogTheme);
 }

src/components/mdDialog/mdDialog.scss

@@ -21,10 +21,6 @@
       transform: scale(1) !important;
       transition: $swift-ease-out;
       transition-property: opacity, transform;
-
-      > * {
-        opacity: 1;
-      }
     }
   }
 }
@@ -59,11 +55,39 @@
     transform-origin: top center;
   }
 
-  > * {
-    opacity: 0;
-    transition: $swift-ease-out;
-    transition-property: opacity;
-    transition-delay: .1s;
-    will-change: opacity;
+  .md-title {
+    margin: 0 0 20px;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.md-dialog-content {
+  padding: 24px;
+}
+
+.md-dialog-body {
+  margin: 0 -24px;
+  padding: 0 24px;
+  overflow: auto;
+}
+
+.md-dialog-actions {
+  min-height: 52px;
+  padding: 8px 8px 8px 24px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .md-button {
+    min-width: 64px;
+    margin: 0;
+    padding: 0 8px;
+
+    + .md-button {
+      margin-left: 8px;
+    }
   }
 }

src/components/mdDialog/mdDialogActions.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-dialog-actions">
+    <slot></slot>
+  </div>
+</template>

src/components/mdDialog/mdDialogContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="md-dialog-content">
+    <slot></slot>
+  </div>
+</template>