Skip to content

Commit 97fe211

Browse files
jelbournjelbourn
authored
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
1 parent a5d76ba commit 97fe211

File tree

6 files changed

+67
-74
lines changed

6 files changed

+67
-74
lines changed

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

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Component, ViewEncapsulation} from '@angular/core';
2-
import {AsyncPipe} from '@angular/common';
32
import {Observable} from 'rxjs/Observable';
43

54

@@ -8,7 +7,6 @@ import {Observable} from 'rxjs/Observable';
87
selector: 'tab-group-demo',
98
templateUrl: 'tab-group-demo.html',
109
styleUrls: ['tab-group-demo.css'],
11-
pipes: [AsyncPipe],
1210
encapsulation: ViewEncapsulation.None,
1311
})
1412
export class TabsDemo {

‎src/lib/grid-list/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,4 @@ Output:
112112
## TODO
113113

114114
- Grid tile headers and footers
115-
- Responsive sizing support
115+
- Responsive sizing support

‎src/lib/sidenav/sidenav-transitions.scss

+8-13
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,14 @@
33
*/
44
@import 'variables';
55

6+
md-sidenav {
7+
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
8+
}
69

7-
:host {
8-
> .md-sidenav-backdrop {
9-
&.md-sidenav-shown {
10-
transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
11-
}
12-
}
13-
14-
> md-content {
15-
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
16-
}
10+
.md-sidenav-content {
11+
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
12+
}
1713

18-
> md-sidenav {
19-
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
20-
}
14+
.md-sidenav-backdrop.md-sidenav-shown {
15+
transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
2116
}

‎src/lib/sidenav/sidenav.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33

44
<ng-content select="md-sidenav"></ng-content>
55

6-
<md-content [ngStyle]="_getStyles()">
6+
<div class="md-sidenav-content" [ngStyle]="_getStyles()">
77
<ng-content></ng-content>
8-
</md-content>
8+
</div>

‎src/lib/sidenav/sidenav.scss

+52-55
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,22 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
4242
}
4343
}
4444

45-
:host {
45+
md-sidenav-layout {
4646
// We need a stacking context here so that the backdrop and drawers are clipped to the
4747
// MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
48-
// We create another stacking context in the '<md-content>' and in each sidenav so that
48+
// We create another stacking context in the '.md-sidenav-content' and in each sidenav so that
4949
// the application content does not get messed up with our own CSS.
5050
@include md-stacking-context();
5151

5252
box-sizing: border-box;
5353
-webkit-overflow-scrolling: touch;
5454

55+
// Need this to take up space in the layout.
56+
display: block;
57+
58+
// Hide the sidenavs when they're closed.
59+
overflow: hidden;
60+
5561
// TODO(hansl): Update this with a more robust solution.
5662
&[fullscreen] {
5763
@include md-fullscreen();
@@ -60,78 +66,69 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
6066
overflow: hidden;
6167
}
6268
}
69+
}
6370

64-
// Need this to take up space in the layout.
65-
display: block;
66-
67-
// Hide the sidenavs when they're closed.
68-
overflow: hidden;
69-
70-
& > .md-sidenav-backdrop {
71-
@include md-fullscreen();
71+
.md-sidenav-backdrop {
72+
@include md-fullscreen();
7273

73-
display: block;
74+
display: block;
7475

75-
// Because of the new stacking context, the z-index stack is new and we can use our own
76-
// numbers.
77-
z-index: 2;
76+
// Because of the new stacking context, the z-index stack is new and we can use our own
77+
// numbers.
78+
z-index: 2;
7879

79-
// We use 'visibility: hidden | visible' because 'display: none' will not animate any
80-
// transitions, while visibility will interpolate transitions properly.
81-
// see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
82-
// section.
83-
visibility: hidden;
80+
// We use 'visibility: hidden | visible' because 'display: none' will not animate any
81+
// transitions, while visibility will interpolate transitions properly.
82+
// see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
83+
// section.
84+
visibility: hidden;
8485

85-
&.md-sidenav-shown {
86-
visibility: visible;
87-
background-color: $md-sidenav-backdrop-color;
88-
}
86+
&.md-sidenav-shown {
87+
visibility: visible;
88+
background-color: $md-sidenav-backdrop-color;
8989
}
90+
}
9091

91-
& > md-content {
92-
@include md-stacking-context();
92+
.md-sidenav-content {
93+
@include md-stacking-context();
9394

94-
display: block;
95-
height: 100%;
96-
overflow: auto;
97-
}
95+
display: block;
96+
height: 100%;
97+
overflow: auto;
98+
}
9899

99-
> md-sidenav {
100-
@include md-stacking-context();
100+
md-sidenav {
101+
@include md-stacking-context();
101102

102-
display: block;
103-
position: absolute;
104-
top: 0;
105-
bottom: 0;
106-
z-index: 3;
107-
min-width: 5%;
103+
display: block;
104+
position: absolute;
105+
top: 0;
106+
bottom: 0;
107+
z-index: 3;
108+
min-width: 5%;
108109

109-
// TODO(kara): revisit scrolling behavior for sidenavs
110-
overflow-y: auto;
110+
// TODO(kara): revisit scrolling behavior for sidenavs
111+
overflow-y: auto;
111112

112-
background-color: $md-sidenav-background-color;
113+
background-color: $md-sidenav-background-color;
113114

114-
@include md-sidenav-transition(0, -100%);
115+
@include md-sidenav-transition(0, -100%);
115116

116-
&.md-sidenav-push {
117-
background-color: $md-sidenav-push-background-color;
118-
}
117+
&.md-sidenav-push {
118+
background-color: $md-sidenav-push-background-color;
119+
}
119120

120-
&.md-sidenav-side {
121-
z-index: 1;
122-
}
121+
&.md-sidenav-side {
122+
z-index: 1;
123+
}
123124

124-
&.md-sidenav-end {
125-
right: 0;
125+
&.md-sidenav-end {
126+
right: 0;
126127

127-
@include md-sidenav-transition(0, 100%);
128-
}
128+
@include md-sidenav-transition(0, 100%);
129129
}
130-
}
131-
132130

133-
:host-context([dir='rtl']) {
134-
> md-sidenav {
131+
[dir='rtl'] & {
135132
@include md-sidenav-transition(0, 100%);
136133

137134
&.md-sidenav-end {

‎src/lib/sidenav/sidenav.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
QueryList,
1212
ChangeDetectionStrategy,
1313
EventEmitter,
14-
Renderer
14+
Renderer,
15+
ViewEncapsulation,
1516
} from '@angular/core';
1617
import {CommonModule} from '@angular/common';
1718
import {Dir} from '@angular2-material/core/rtl/dir';
@@ -41,6 +42,7 @@ export class MdDuplicatedSidenavError extends MdError {
4142
'(transitionend)': '_onTransitionEnd($event)',
4243
},
4344
changeDetection: ChangeDetectionStrategy.OnPush,
45+
encapsulation: ViewEncapsulation.None,
4446
})
4547
export class MdSidenav {
4648
/** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
@@ -233,6 +235,7 @@ export class MdSidenav {
233235
'sidenav.css',
234236
'sidenav-transitions.css',
235237
],
238+
encapsulation: ViewEncapsulation.None,
236239
})
237240
export class MdSidenavLayout implements AfterContentInit {
238241
@ContentChildren(MdSidenav) _sidenavs: QueryList<MdSidenav>;

0 commit comments

Comments
 (0)