From e73c560b87d6fac616f29d7bba1ceb86401632ae Mon Sep 17 00:00:00 2001
From: Topher Fangio <topher@profoundry.us>
Date: Thu, 12 Nov 2015 11:59:33 -0600
Subject: [PATCH] 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     | 7 ++++++-
 src/components/input/demoBasicUsage/style.css | 1 -
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss
index 2dd97270208..ef83b984fef 100644
--- a/src/components/datepicker/datePicker.scss
+++ b/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;
 }
 
diff --git a/src/components/input/demoBasicUsage/style.css b/src/components/input/demoBasicUsage/style.css
index f831e784518..7770523bd80 100644
--- a/src/components/input/demoBasicUsage/style.css
+++ b/src/components/input/demoBasicUsage/style.css
@@ -1,2 +1 @@
 .md-datepicker-button { width: 36px; }
-.md-datepicker-input-container { margin-left: 2px; }
\ No newline at end of file