fix(sidenav): turn off view encapsulation and refactor css (#1114)

* fix(sidenav): turn off view encapsulation and refactor css

* undo readme weirdness

* reorder style

* use nesting for sidenav rtl

src/demo-app/tabs/tab-group-demo.ts

@@ -1,5 +1,4 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {AsyncPipe} from '@angular/common';
 import {Observable} from 'rxjs/Observable';
 
 
@@ -8,7 +7,6 @@ import {Observable} from 'rxjs/Observable';
   selector: 'tab-group-demo',
   templateUrl: 'tab-group-demo.html',
   styleUrls: ['tab-group-demo.css'],
-  pipes: [AsyncPipe],
   encapsulation: ViewEncapsulation.None,
 })
 export class TabsDemo {

src/lib/grid-list/README.md

@@ -112,4 +112,4 @@ Output:
 ## TODO
 
 - Grid tile headers and footers
-- Responsive sizing support
+- Responsive sizing support

src/lib/sidenav/sidenav-transitions.scss

@@ -3,19 +3,14 @@
  */
 @import 'variables';
 
+md-sidenav {
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+}
 
-:host {
-  > .md-sidenav-backdrop {
-    &.md-sidenav-shown {
-      transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
-    }
-  }
-
-  > md-content {
-    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
-  }
+.md-sidenav-content {
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+}
 
-  > md-sidenav {
-    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
-  }
+.md-sidenav-backdrop.md-sidenav-shown {
+  transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
 }

src/lib/sidenav/sidenav.html

@@ -3,6 +3,6 @@
 
 <ng-content select="md-sidenav"></ng-content>
 
-<md-content [ngStyle]="_getStyles()">
+<div class="md-sidenav-content" [ngStyle]="_getStyles()">
   <ng-content></ng-content>
-</md-content>
+</div>

src/lib/sidenav/sidenav.scss

@@ -42,16 +42,22 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   }
 }
 
-:host {
+md-sidenav-layout {
   // We need a stacking context here so that the backdrop and drawers are clipped to the
   // MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
-  // We create another stacking context in the '<md-content>' and in each sidenav so that
+  // We create another stacking context in the '.md-sidenav-content' and in each sidenav so that
   // the application content does not get messed up with our own CSS.
   @include md-stacking-context();
 
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
 
+  // Need this to take up space in the layout.
+  display: block;
+
+  // Hide the sidenavs when they're closed.
+  overflow: hidden;
+
   // TODO(hansl): Update this with a more robust solution.
   &[fullscreen] {
     @include md-fullscreen();
@@ -60,78 +66,69 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
       overflow: hidden;
     }
   }
+}
 
-  // Need this to take up space in the layout.
-  display: block;
-
-  // Hide the sidenavs when they're closed.
-  overflow: hidden;
-
-  & > .md-sidenav-backdrop {
-    @include md-fullscreen();
+.md-sidenav-backdrop {
+  @include md-fullscreen();
 
-    display: block;
+  display: block;
 
-    // Because of the new stacking context, the z-index stack is new and we can use our own
-    // numbers.
-    z-index: 2;
+  // Because of the new stacking context, the z-index stack is new and we can use our own
+  // numbers.
+  z-index: 2;
 
-    // We use 'visibility: hidden | visible' because 'display: none' will not animate any
-    // transitions, while visibility will interpolate transitions properly.
-    // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
-    // section.
-    visibility: hidden;
+  // We use 'visibility: hidden | visible' because 'display: none' will not animate any
+  // transitions, while visibility will interpolate transitions properly.
+  // see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
+  // section.
+  visibility: hidden;
 
-    &.md-sidenav-shown {
-      visibility: visible;
-      background-color: $md-sidenav-backdrop-color;
-    }
+  &.md-sidenav-shown {
+    visibility: visible;
+    background-color: $md-sidenav-backdrop-color;
   }
+}
 
-  & > md-content {
-    @include md-stacking-context();
+.md-sidenav-content {
+  @include md-stacking-context();
 
-    display: block;
-    height: 100%;
-    overflow: auto;
-  }
+  display: block;
+  height: 100%;
+  overflow: auto;
+}
 
-  > md-sidenav {
-    @include md-stacking-context();
+md-sidenav {
+  @include md-stacking-context();
 
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 3;
-    min-width: 5%;
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  min-width: 5%;
 
-    // TODO(kara): revisit scrolling behavior for sidenavs
-    overflow-y: auto;
+  // TODO(kara): revisit scrolling behavior for sidenavs
+  overflow-y: auto;
 
-    background-color: $md-sidenav-background-color;
+  background-color: $md-sidenav-background-color;
 
-    @include md-sidenav-transition(0, -100%);
+  @include md-sidenav-transition(0, -100%);
 
-    &.md-sidenav-push {
-      background-color: $md-sidenav-push-background-color;
-    }
+  &.md-sidenav-push {
+    background-color: $md-sidenav-push-background-color;
+  }
 
-    &.md-sidenav-side {
-      z-index: 1;
-    }
+  &.md-sidenav-side {
+    z-index: 1;
+  }
 
-    &.md-sidenav-end {
-      right: 0;
+  &.md-sidenav-end {
+    right: 0;
 
-      @include md-sidenav-transition(0, 100%);
-    }
+    @include md-sidenav-transition(0, 100%);
   }
-}
-
 
-:host-context([dir='rtl']) {
-  > md-sidenav {
+  [dir='rtl'] & {
     @include md-sidenav-transition(0, 100%);
 
     &.md-sidenav-end {

src/lib/sidenav/sidenav.ts

@@ -11,7 +11,8 @@ import {
     QueryList,
     ChangeDetectionStrategy,
     EventEmitter,
-    Renderer
+    Renderer,
+    ViewEncapsulation,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Dir} from '@angular2-material/core/rtl/dir';
@@ -41,6 +42,7 @@ export class MdDuplicatedSidenavError extends MdError {
     '(transitionend)': '_onTransitionEnd($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdSidenav {
   /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
@@ -233,6 +235,7 @@ export class MdSidenav {
     'sidenav.css',
     'sidenav-transitions.css',
   ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdSidenavLayout implements AfterContentInit {
   @ContentChildren(MdSidenav) _sidenavs: QueryList<MdSidenav>;