diff --git a/src/lib/sidenav/drawer-transitions.scss b/src/lib/sidenav/drawer-transitions.scss deleted file mode 100644 index 7be6e763b610..000000000000 --- a/src/lib/sidenav/drawer-transitions.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Separate transitions to be able to disable them in unit tests by omitting this file. -@import '../core/style/variables'; - -.mat-drawer-transition { - .mat-drawer-content { - transition: { - duration: $swift-ease-out-duration; - timing-function: $swift-ease-out-timing-function; - property: margin-left, margin-right; - } - } - - .mat-drawer-backdrop.mat-drawer-shown { - transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function; - } -} diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss index d3efaa66d351..27c36d83265c 100644 --- a/src/lib/sidenav/drawer.scss +++ b/src/lib/sidenav/drawer.scss @@ -65,6 +65,14 @@ $mat-drawer-over-drawer-z-index: 4; visibility: visible; } + .mat-drawer-transition & { + transition: { + duration: $swift-ease-out-duration; + timing-function: $swift-ease-out-timing-function; + property: background-color, visibility; + } + } + @include cdk-high-contrast { opacity: 0.5; } @@ -76,6 +84,14 @@ $mat-drawer-over-drawer-z-index: 4; display: block; height: 100%; overflow: auto; + + .mat-drawer-transition & { + transition: { + duration: $swift-ease-out-duration; + timing-function: $swift-ease-out-timing-function; + property: transform, margin-left, margin-right; + } + } } .mat-drawer { diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts index d858a6a2d8a1..e6472233c223 100644 --- a/src/lib/sidenav/drawer.spec.ts +++ b/src/lib/sidenav/drawer.spec.ts @@ -36,6 +36,7 @@ describe('MdDrawer', () => { let drawer = fixture.debugElement.query(By.directive(MdDrawer)); let drawerBackdropElement = fixture.debugElement.query(By.css('.mat-drawer-backdrop')); + drawerBackdropElement.nativeElement.style.transition = 'none'; fixture.debugElement.query(By.css('.open')).nativeElement.click(); fixture.detectChanges(); diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index 3d306303fac0..a59f70784022 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -360,10 +360,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy { moduleId: module.id, selector: 'md-drawer-container, mat-drawer-container', templateUrl: 'drawer-container.html', - styleUrls: [ - 'drawer.css', - 'drawer-transitions.css', - ], + styleUrls: ['drawer.css'], host: { 'class': 'mat-drawer-container', }, diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index aff0a5b25137..7b141c84c096 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -109,10 +109,7 @@ export class MdSidenav extends MdDrawer { moduleId: module.id, selector: 'md-sidenav-container, mat-sidenav-container', templateUrl: 'sidenav-container.html', - styleUrls: [ - 'drawer.css', - 'drawer-transitions.css', - ], + styleUrls: ['drawer.css'], host: { 'class': 'mat-drawer-container mat-sidenav-container', },