fix(datepicker): ensure the element always blends in with it's parent

* Makes the datepicker component transparent so it always blends in with it's parent.
* Prevents the content around a datepicker from jumping when it gets opened.

Closes angular#7502.

src/components/datepicker/datePicker-theme.scss

@@ -1,15 +1,10 @@
 /** Theme styles for mdDatepicker. */
 
-md-datepicker.md-THEME_NAME-theme {
-  background: '{{background-hue-1}}';
-}
-
 .md-THEME_NAME-theme {
 
   .md-datepicker-input {
     @include input-placeholder-color('\'{{foreground-3}}\'');
     color: '{{foreground-1}}';
-    background: '{{background-color}}';
   }
 
   .md-datepicker-input-container {
@@ -45,11 +40,12 @@ md-datepicker.md-THEME_NAME-theme {
     }
   }
 
-  .md-datepicker-calendar {
-    background: '{{background-A100}}';
+  .md-datepicker-open .md-datepicker-input-container,
+  .md-datepicker-input-mask-opaque {
+    background: '{{background-hue-1}}';
   }
 
-  .md-datepicker-input-mask-opaque {
-    background: '{{background-color}}';
+  .md-datepicker-calendar {
+    background: '{{background-A100}}';
   }
 }

src/components/datepicker/datePicker.scss

@@ -90,8 +90,12 @@ md-datepicker {
   position: absolute;
   right: 0;
   left: 120px;
-
   height: 100%;
+
+  // The margin pulls it an extra pixel to the left, which gives it a slight overlap
+  // with the input container. This ensures that there are no gaps between the two
+  // elements.
+  margin-left: -1px;
 }
 
 // The calendar portion of the floating pane (vs. the input mask).
@@ -163,6 +167,10 @@ md-datepicker[disabled] {
 .md-datepicker-open {
   .md-datepicker-input-container {
     @include rtl-prop(margin-left, margin-right, -$md-datepicker-button-gap);
+
+    // The negative bottom margin prevents the content around the datepicker
+    // from jumping when it gets opened.
+    margin-bottom: -$md-datepicker-border-bottom-gap;
     border: none;
   }