feat(sidenav): add fullscreen mode

angular · Apr 25, 2016 · aa6c740 · aa6c740
1 parent 2f3e9db
commit aa6c740
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/components/sidenav/sidenav.scss b/src/components/sidenav/sidenav.scss
@@ -42,6 +42,15 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   }
 }
 
+/* This mixin ensures a sidenav element spans the whole viewport. */
+@mixin md-sidenav-fullscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 
 :host {
   // We need a stacking context here so that the backdrop and drawers are clipped to the
@@ -52,18 +61,18 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
 
   box-sizing: border-box;
 
+  &[fullscreen] {
+    @include md-sidenav-fullscreen();
+  }
+
   // Need this to take up space in the layout.
   display: block;
 
   // Hide the sidenavs when they're closed.
   overflow-x: hidden;
 
   & > .md-sidenav-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @include md-sidenav-fullscreen();
 
     display: block;
 

diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
@@ -1,4 +1,4 @@
-<md-sidenav-layout class="demo-root">
+<md-sidenav-layout class="demo-root" fullscreen>
   <md-sidenav #start>
     <md-nav-list>
       <a md-list-item [routerLink]="['ButtonDemo']">Button</a>

diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
@@ -1,10 +1,5 @@
 .demo-root {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
-  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