Make generic placeholder pseudo-class browser-prefix mixin

Change-Id: I96686bb53cee1a833db8f4d0b691d5e4a1b82885

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index da35ac2..4cca1a6 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -123,6 +123,35 @@
        order: @order;
 }
 
+/* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */
+.mixin-placeholder( @rules ) {
+       // WebKit, Blink, Edge
+       &::-webkit-input-placeholder {
+               @rules();
+       }
+       // Internet Explorer 10-11
+       &:-ms-input-placeholder {
+               @rules();
+       }
+       // Firefox 19-
+       &::-moz-placeholder {
+               @rules();
+       }
+       // Firefox 4-18
+       &:-moz-placeholder {
+               @rules();
+       }
+       // W3C Standard Selectors Level 4
+       &::placeholder {
+               @rules();
+       }
+       // For inputs that use jquery.placeholder.js e.g. IE9
+       &.placeholder {
+               @rules();
+       }
+}
+/* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */
+
 // Screen Reader Helper Mixin
 .mixin-screen-reader-text() {
        display: block;

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 87ce7be..2346325 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -38,36 +38,14 @@
        vertical-align: middle;
 
        // Normalize & style placeholder text, see T139034
-       // Placeholder styles can't be grouped, otherwise they're ignored as invalid.
-
-       // Placeholder mixin
-       .mixin-placeholder() {
+       /* stylelint-disable indentation */
+       .mixin-placeholder( {
                color: @colorGray7;
-               font-style: italic;
-       }
-       // Firefox 4-18
-       &:-moz-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-               .mixin-placeholder;
-               opacity: 1;
-       }
-       // Firefox 19-
-       &::-moz-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-               .mixin-placeholder;
                opacity: 1;
-       }
-       // Internet Explorer 10-11
-       &:-ms-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-               .mixin-placeholder;
-       }
-       // WebKit, Blink, Edge
-       // Don't set `opacity < 1`, see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/
-       &::-webkit-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-               .mixin-placeholder;
-       }
-       // W3C Standard Selectors Level 4
-       &:placeholder-shown {
-               .mixin-placeholder;
-       }
+               // TODO: Is italic necessary? T147808
+               font-style: italic;
+       } );
+       /* stylelint-enable indentation */
 
        // Firefox: Remove red outline when `required` attribute set and invalid content.
        // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid