From 9366c3e0f57e247378651b3038bb9b2689ed6fe4 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Fri, 22 Apr 2016 12:04:59 -0700
Subject: [PATCH] chore(demos): fix sidenav styles

---
 src/demo-app/demo-app.html |  6 +++---
 src/demo-app/demo-app.scss | 26 ++++++++++++++++++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index 4f7af4d95074..5f4a9f97ed5b 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -1,4 +1,4 @@
-<md-sidenav-layout>
+<md-sidenav-layout class="demo-root">
   <md-sidenav #start>
     <md-nav-list>
       <a md-list-item [routerLink]="['ButtonDemo']">Button</a>
@@ -17,9 +17,9 @@
       <a md-list-item [routerLink]="['SidenavDemo']">Sidenav</a>
       <a md-list-item [routerLink]="['ToolbarDemo']">Toolbar</a>
     </md-nav-list>
-    <button md-raised-button (click)="start.close()">CLOSE</button>
+    <button md-button (click)="start.close()">CLOSE</button>
   </md-sidenav>
-  <div class="demo-root">
+  <div>
 
     <md-toolbar color="primary">
       <i class="material-icons" (click)="start.open()">menu</i>
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index b4e456f75ec9..259085c6380d 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -1,7 +1,10 @@
 .demo-root {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
-  padding: 20px;
-  min-height: 1000px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 
   // Helps fonts on OSX looks more consistent with other systems
   // Isn't currently in button styles due to performance concerns
@@ -10,6 +13,21 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  md-sidenav {
+    width: 15%;
+
+    [md-button] {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      margin-bottom: 24px;
+    }
+  }
+
+  .demo-content {
+    padding: 32px;
+  }
+
   md-toolbar {
     i {
       padding: 20px;
@@ -30,9 +48,5 @@
   h1 {
     font-size: 20px;
   }
-
 }
 
-.demo-content {
-  padding: 15px;
-}