fix(form-field): native date/time input taller than text input (#13321)

crisbeto · jelbourn · commit 92a5f0e0f28c · 2018-09-27T07:09:55.000-07:00
Fixes the `type="date"` and `type="time"` inputs inside a form field making the field taller than a `type="input"`. Fixes #13317.
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
@@ -76,6 +76,14 @@
     }
   }
 
+  // Reduce the size of the native buttons in a date/time input,
+  // because they can increase the height of the input (see #13317).
+  &::-webkit-inner-spin-button,
+  &::-webkit-calendar-picker-indicator,
+  &::-webkit-clear-button {
+    font-size: 0.75em;
+  }
+
   @include input-placeholder {
     // Delay the transition until the label has animated about a third of the way through, in
     // order to prevent the placeholder from overlapping for a split second.

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,14 @@`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`
	`79`	`+ // Reduce the size of the native buttons in a date/time input,`
	`80`	`+ // because they can increase the height of the input (see #13317).`
	`81`	`+ &::-webkit-inner-spin-button,`
	`82`	`+ &::-webkit-calendar-picker-indicator,`
	`83`	`+ &::-webkit-clear-button {`
	`84`	`+ font-size: 0.75em;`
	`85`	`+ }`
	`86`	`+`
`79`	`87`	`@include input-placeholder {`
`80`	`88`	`// Delay the transition until the label has animated about a third of the way through, in`
`81`	`89`	`// order to prevent the placeholder from overlapping for a split second.`