fix(datepicker): Icon jumping upon open/close.

When the user opened/closed the datepicker in the inputs demo,
the icon would jump to the left. This was caused by two separate
issues:

1. The demo CSS overrode only the closed styles.
2. The browser would scroll the parent datepicker to the left upon
   focusing the down-triangle button so that it could be visible.
   You can easily reproduce this by tabbing to the down-triangle
   then checking the `<md-datepicker>`s `scrollLeft` style.

Fix by removing unnecessary demo CSS and adding proper padding/margin
to the datepicker so that the down-triangle has room to appear.

Fixes #4570. Closes #5703.

src/components/datepicker/datePicker.scss

@@ -2,11 +2,16 @@
 $md-datepicker-button-gap: 12px;  // Space between the text input and the calendar-icon button.
 $md-datepicker-border-bottom-gap: 5px;  // Space between input and the grey underline.
 $md-datepicker-open-animation-duration: 0.2s;
+$md-datepicker-triangle-button-width: 36px;
 
 md-datepicker {
   // Don't let linebreaks happen between the open icon-button and the input.
   white-space: nowrap;
   overflow: hidden;
+
+  // Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft
+  padding-right: $md-datepicker-triangle-button-width / 2;
+  margin-right: -$md-datepicker-triangle-button-width / 2;
 }
 
 .md-inline-form {
@@ -137,7 +142,7 @@ $md-date-arrow-size: 5px;
 // Only apply this high specifiy to the property we need to override.
 .md-datepicker-triangle-button.md-button.md-icon-button {
   height: 100%;
-  width: 36px;
+  width: $md-datepicker-triangle-button-width;
   position: absolute;
 }
 

src/components/input/demoBasicUsage/style.css

@@ -1,2 +1 @@
 .md-datepicker-button { width: 36px; }
-.md-datepicker-input-container { margin-left: 2px; }