From c2070e75d6a0e73cf82ba6cddc338f4cd2d7dbe6 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 26 Aug 2017 17:44:46 +0200
Subject: [PATCH] fix(drawer): backdrop not transitioning on close

Fixes the drawer backdrop not animating away on close. Also moves the drawer transitions together with all the other transitions since we don't exclude the `drawer-transitions.scss` from tests anymore.
---
 src/lib/sidenav/drawer-transitions.scss | 16 ----------------
 src/lib/sidenav/drawer.scss             | 16 ++++++++++++++++
 src/lib/sidenav/drawer.spec.ts          |  1 +
 src/lib/sidenav/drawer.ts               |  5 +----
 src/lib/sidenav/sidenav.ts              |  5 +----
 5 files changed, 19 insertions(+), 24 deletions(-)
 delete mode 100644 src/lib/sidenav/drawer-transitions.scss

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',
   },