From 0d1ea3ec65ff7f17639dcbda21d55239f171fb42 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Wed, 24 Aug 2016 17:32:51 -0700 Subject: [PATCH 1/4] fix(sidenav): turn off view encapsulation and refactor css --- src/demo-app/tabs/tab-group-demo.ts | 2 - src/lib/grid-list/README.md | 2 +- src/lib/sidenav/sidenav-transitions.scss | 21 ++-- src/lib/sidenav/sidenav.html | 4 +- src/lib/sidenav/sidenav.scss | 117 +++++++++++------------ src/lib/sidenav/sidenav.ts | 5 +- 6 files changed, 72 insertions(+), 79 deletions(-) diff --git a/src/demo-app/tabs/tab-group-demo.ts b/src/demo-app/tabs/tab-group-demo.ts index 12765490200a..3fc5d0953386 100644 --- a/src/demo-app/tabs/tab-group-demo.ts +++ b/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 { diff --git a/src/lib/grid-list/README.md b/src/lib/grid-list/README.md index 2562565dd788..4ab1548b9933 100644 --- a/src/lib/grid-list/README.md +++ b/src/lib/grid-list/README.md @@ -112,4 +112,4 @@ Output: ## TODO - Grid tile headers and footers -- Responsive sizing support \ No newline at end of file +- Responsive sizing support diff --git a/src/lib/sidenav/sidenav-transitions.scss b/src/lib/sidenav/sidenav-transitions.scss index f4c5d20c8234..0d5e1e7ac700 100644 --- a/src/lib/sidenav/sidenav-transitions.scss +++ b/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; } diff --git a/src/lib/sidenav/sidenav.html b/src/lib/sidenav/sidenav.html index 5528a1a26e0b..fe7f020b5642 100644 --- a/src/lib/sidenav/sidenav.html +++ b/src/lib/sidenav/sidenav.html @@ -3,6 +3,6 @@ - +
- +
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index 6432b1b7611a..ed5a0a10c2e3 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/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 '' 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,85 +66,76 @@ $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; +[dir='rtl'] md-sidenav { + @include md-sidenav-transition(0, 100%); - & > .md-sidenav-backdrop { - @include md-fullscreen(); + &.md-sidenav-end { + left: 0; + right: auto; - display: block; + @include md-sidenav-transition(0, -100%); + } +} - // Because of the new stacking context, the z-index stack is new and we can use our own - // numbers. - z-index: 2; +.md-sidenav-backdrop { + @include md-fullscreen(); - // 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; + display: block; - &.md-sidenav-shown { - visibility: visible; - background-color: $md-sidenav-backdrop-color; - } - } + // Because of the new stacking context, the z-index stack is new and we can use our own + // numbers. + z-index: 2; - & > md-content { - @include md-stacking-context(); + // 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; - display: block; - height: 100%; - overflow: auto; + &.md-sidenav-shown { + visibility: visible; + background-color: $md-sidenav-backdrop-color; } +} - > md-sidenav { - @include md-stacking-context(); +.md-sidenav-content { + @include md-stacking-context(); - display: block; - position: absolute; - top: 0; - bottom: 0; - z-index: 3; - min-width: 5%; + display: block; + height: 100%; + overflow: auto; +} - // TODO(kara): revisit scrolling behavior for sidenavs - overflow-y: auto; +md-sidenav { + @include md-stacking-context(); - background-color: $md-sidenav-background-color; + display: block; + position: absolute; + top: 0; + bottom: 0; + z-index: 3; + min-width: 5%; - @include md-sidenav-transition(0, -100%); + // TODO(kara): revisit scrolling behavior for sidenavs + overflow-y: auto; - &.md-sidenav-push { - background-color: $md-sidenav-push-background-color; - } + background-color: $md-sidenav-background-color; - &.md-sidenav-side { - z-index: 1; - } + @include md-sidenav-transition(0, -100%); - &.md-sidenav-end { - right: 0; + &.md-sidenav-push { + background-color: $md-sidenav-push-background-color; + } - @include md-sidenav-transition(0, 100%); - } + &.md-sidenav-side { + z-index: 1; } -} + &.md-sidenav-end { + right: 0; -:host-context([dir='rtl']) { - > md-sidenav { @include md-sidenav-transition(0, 100%); - - &.md-sidenav-end { - left: 0; - right: auto; - - @include md-sidenav-transition(0, -100%); - } } } diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index cfd8b9056eec..8f6ade53603f 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/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; From 5163a559ee1747f3ed2f91a5faed12e2a5043a1e Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Wed, 24 Aug 2016 17:39:26 -0700 Subject: [PATCH 2/4] undo readme weirdness --- src/lib/grid-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/grid-list/README.md b/src/lib/grid-list/README.md index 4ab1548b9933..2562565dd788 100644 --- a/src/lib/grid-list/README.md +++ b/src/lib/grid-list/README.md @@ -112,4 +112,4 @@ Output: ## TODO - Grid tile headers and footers -- Responsive sizing support +- Responsive sizing support \ No newline at end of file From 346a7fe346fa90a8d8112b665ca1c86822d50baf Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Wed, 24 Aug 2016 17:58:21 -0700 Subject: [PATCH 3/4] reorder style --- src/lib/sidenav/sidenav.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index ed5a0a10c2e3..46e3f84d86ab 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/src/lib/sidenav/sidenav.scss @@ -68,17 +68,6 @@ md-sidenav-layout { } } -[dir='rtl'] md-sidenav { - @include md-sidenav-transition(0, 100%); - - &.md-sidenav-end { - left: 0; - right: auto; - - @include md-sidenav-transition(0, -100%); - } -} - .md-sidenav-backdrop { @include md-fullscreen(); @@ -139,3 +128,14 @@ md-sidenav { @include md-sidenav-transition(0, 100%); } } + +[dir='rtl'] md-sidenav { + @include md-sidenav-transition(0, 100%); + + &.md-sidenav-end { + left: 0; + right: auto; + + @include md-sidenav-transition(0, -100%); + } +} From 538a9a8d4e57ceb617c25582594192e620b218a2 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Wed, 24 Aug 2016 17:59:24 -0700 Subject: [PATCH 4/4] use nesting for sidenav rtl --- src/lib/grid-list/README.md | 2 +- src/lib/sidenav/sidenav.scss | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/grid-list/README.md b/src/lib/grid-list/README.md index 2562565dd788..4ab1548b9933 100644 --- a/src/lib/grid-list/README.md +++ b/src/lib/grid-list/README.md @@ -112,4 +112,4 @@ Output: ## TODO - Grid tile headers and footers -- Responsive sizing support \ No newline at end of file +- Responsive sizing support diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index 46e3f84d86ab..4baa30963961 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/src/lib/sidenav/sidenav.scss @@ -127,15 +127,15 @@ md-sidenav { @include md-sidenav-transition(0, 100%); } -} -[dir='rtl'] md-sidenav { - @include md-sidenav-transition(0, 100%); + [dir='rtl'] & { + @include md-sidenav-transition(0, 100%); - &.md-sidenav-end { - left: 0; - right: auto; + &.md-sidenav-end { + left: 0; + right: auto; - @include md-sidenav-transition(0, -100%); + @include md-sidenav-transition(0, -100%); + } } }