Fix date inputs heights in safari

scss/_reboot.scss

@@ -474,19 +474,6 @@ button,
   border-style: none;
 }
 
-// Remove the default appearance of temporal inputs to avoid a Mobile Safari
-// bug where setting a custom line-height prevents text from being vertically
-// centered within the input.
-// See https://bugs.webkit.org/show_bug.cgi?id=139848
-// and https://github.com/twbs/bootstrap/issues/11266
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: textfield;
-}
-
 // 1. Remove the default vertical scrollbar in IE.
 // 2. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 

scss/forms/_form-control.scss

@@ -15,6 +15,7 @@
   background-color: $input-bg;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;
+  appearance: none; // Fix appearance for date inputs in Safari
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -28,6 +29,11 @@
     border: 0;
   }
 
+  // Set the height of date inputs in Safari
+  &::-webkit-date-and-time-value {
+    height: if(unitless($input-line-height), $input-line-height * 1em, $input-line-height);
+  }
+
   // Customize the `:focus` state to imitate native WebKit styles.
   &:focus {
     color: $input-focus-color;