fix(datepicker): prevent scrolling within a dialog

* Fixes the datepicker not blocking scrolling when it is used within a dialog.
* Moves the `.md-scroll-mask` z-index to the SASS files since the old value was being set with JS for no apparent reason and made it harder to override.
* Adds a variable for the datepicker's z-index, since it was using the one for the menu.

Fixes #8177.

Closes #8292

Author: crisbeto

src/components/datepicker/datePicker.js

@@ -464,11 +464,14 @@
   /** Position and attach the floating calendar to the document. */
   DatePickerCtrl.prototype.attachCalendarPane = function() {
     var calendarPane = this.calendarPane;
+    var body = document.body;
+
     calendarPane.style.transform = '';
     this.$element.addClass('md-datepicker-open');
+    angular.element(body).addClass('md-datepicker-is-showing');
 
     var elementRect = this.inputContainer.getBoundingClientRect();
-    var bodyRect = document.body.getBoundingClientRect();
+    var bodyRect = body.getBoundingClientRect();
 
     // Check to see if the calendar pane would go off the screen. If so, adjust position
     // accordingly to keep it within the viewport.
@@ -533,6 +536,7 @@
   /** Detach the floating calendar pane from the document. */
   DatePickerCtrl.prototype.detachCalendarPane = function() {
     this.$element.removeClass('md-datepicker-open');
+    angular.element(document.body).removeClass('md-datepicker-is-showing');
     this.calendarPane.classList.remove('md-pane-open');
     this.calendarPane.classList.remove('md-datepicker-pos-adjusted');
 

src/components/datepicker/datePicker.scss

@@ -54,13 +54,16 @@ md-datepicker {
   }
 }
 
+.md-datepicker-is-showing .md-scroll-mask {
+  z-index: $z-index-calendar-pane - 1;
+}
 
 // Floating pane that contains the calendar at the bottom of the input.
 .md-datepicker-calendar-pane {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: $z-index-menu;
+  z-index: $z-index-calendar-pane;
 
   border-width: 1px;
   border-style: solid;

src/core/style/structure.scss

@@ -152,14 +152,16 @@ input {
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: $z-index-scroll-mask;
+
   > .md-scroll-mask-bar {
     display: block;
     position: absolute;
     background-color: #fafafa;
     right: 0;
     top: 0;
     bottom: 0;
-    z-index: $z-index-scroll-mask;
+    z-index: $z-index-scroll-mask-bar;
     box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3)
   }
 }

src/core/style/variables.scss

@@ -83,10 +83,12 @@ $whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opac
 $z-index-toast: 105 !default;
 $z-index-tooltip: 100 !default;
 $z-index-menu: 100 !default;
+$z-index-calendar-pane: 100 !default;
 $z-index-select: 90 !default;
 $z-index-dialog: 80 !default;
 $z-index-bottom-sheet: 70 !default;
-$z-index-scroll-mask: 65 !default;
+$z-index-scroll-mask: 50 !default;
+$z-index-scroll-mask-bar: 65 !default;
 $z-index-sidenav: 60 !default;
 $z-index-backdrop: 50 !default;
 $z-index-fab: 20 !default;

src/core/util/util.js

@@ -198,11 +198,10 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
       // Creates a virtual scrolling mask to absorb touchmove, keyboard, scrollbar clicking, and wheel events
       function disableElementScroll(element) {
         element = angular.element(element || body)[0];
-        var zIndex = 50;
         var scrollMask = angular.element(
           '<div class="md-scroll-mask">' +
           '  <div class="md-scroll-mask-bar"></div>' +
-          '</div>').css('z-index', zIndex);
+          '</div>');
         element.appendChild(scrollMask[0]);
 
         scrollMask.on('wheel', preventDefault);