Fixes calendar vendor styling in chrome being too damn tall #2704

RELEASE-NOTES.md

@@ -26,6 +26,7 @@
 - **Embed** - Remove accidental `console.log` statements in js #2760
 - **Transition** - Transition callbacks now all have the correct `this` set. #2758
 - **Form / Input** - Fixes `::placeholder` text color for `ui error input`, modifies form error placeholder color to distinguish from form value error color #2786
+- **Form** - Date input and other special input in chrome now are the same height as normal input (adds custom vendor shadow dom styling) #2704
 
 **Additional Bugs**
 - **Build Tools** - Fixes issue on `win` platform where packaged theme would not correctly update when using watch due to regExp not matching windows path separators.

src/definitions/collections/form.less

@@ -95,6 +95,12 @@
   vertical-align: top;
 }
 
+/* Set max height on unusual input */
+.ui.form ::-webkit-datetime-edit,
+.ui.form ::-webkit-inner-spin-button {
+  height: @inputLineHeight;
+}
+
 .ui.form input:not([type]),
 .ui.form input[type="date"],
 .ui.form input[type="datetime-local"],

src/themes/default/collections/form.variables

@@ -27,6 +27,7 @@
 /* Input */
 @inputFont: @pageFont;
 @inputWidth: 100%;
+@maxInputHeight: (2 * @inputVerticalPadding) + @inputLineHeight;
 @inputFontSize: 1em;
 @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
 @inputBorder: 1px solid @borderColor;