chore(demos): fix sidenav styles

angular · Apr 22, 2016 · 9366c3e · 9366c3e
1 parent a9e1fa5
commit 9366c3e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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;
-}