Switch to actually-Safari-specific CSS hack when fixing vertical alignment of tempora...

See http://browserbu.gs/css-hacks/webkit-full-page-media/
Fixes #17308

[skip sauce]
[skip validator]

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 06c6207d10936fa44e1ab305120710bc2754b90e..b736c3699d8bafd46ab0f9d9ecef24973aa717d4 100644 (file)
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -396,6 +396,7 @@ linters:
   SelectorFormat:
     enabled: true
     convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
+    ignored_types: ["element"]
 
   Shorthand:
     enabled: true

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 0d5e364ec68495606838da5b0565693c8d334d1c..6de81fcf8b76820658a49129bd54a3ff821c2b00 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -92,26 +92,28 @@
 //
 // Note that as of 8.3, iOS doesn't support `week`.
 
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  input[type="date"],
-  input[type="time"],
-  input[type="datetime-local"],
-  input[type="month"] {
-    &.form-control {
-      line-height: $input-height;
-    }
+// SCSS-Lint exemption until https://github.com/brigade/scss-lint/pull/672 gets merged
+// scss-lint:disable PseudoElement
+_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  &.form-control {
+    line-height: $input-height;
+  }
 
-    &.input-sm,
-    .input-group-sm &.form-control {
-      line-height: $input-height-sm;
-    }
+  &.input-sm,
+  .input-group-sm &.form-control {
+    line-height: $input-height-sm;
+  }
 
-    &.input-lg,
-    .input-group-lg &.form-control {
-      line-height: $input-height-lg;
-    }
+  &.input-lg,
+  .input-group-lg &.form-control {
+    line-height: $input-height-lg;
   }
 }
+// scss-lint:enable PseudoElement
 
 
 // Static form control text