mediawiki.UI: Align .mw-ui-input appearance to design spec/OOjs UI

Aligning `.mw-ui-input` appearance to design specification
https://phabricator.wikimedia.org/M101 and implementation in OOjs UI.
Also improving `transition`, simplifying placeholder Less mixin and
adding W3C Selectors Level 4 `:placeholder-shown` pseudo-class.

Change-Id: I3e3299b3d8ff9b3ee58498e2e4dd2f2424ccde05

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 90e769e..8bddb3a 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -4,11 +4,6 @@
 @import "mediawiki.ui/variables";
 @import "mediawiki.ui/mixins";
 
-// Placeholder text styling helper
-.field-placeholder-styling() {
-       font-style: italic;
-       font-weight: normal;
-}
 // Text inputs
 //
 // Apply the mw-ui-input class to input and textarea fields.
@@ -27,45 +22,74 @@
 //
 // Styleguide 1.1.
 .mw-ui-input {
+       background-color: #fff;
        .box-sizing( border-box );
        display: block;
        width: 100%;
        border: 1px solid @colorFieldBorder;
        border-radius: @borderRadius;
        padding: 0.3em 0.3em 0.3em 0.6em;
+       // necessary for smooth transition
+       box-shadow: inset 0 0 0 0.1em #fff;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        vertical-align: middle;
 
-       // Placeholder text styling must be set individually for each browser @winter
-       &::-webkit-input-placeholder { // webkit
-               .field-placeholder-styling;
+       // Normalize & style placeholder text, see T139034
+       // Placeholder styles can't be grouped, otherwise they're ignored as invalid.
+
+       // Placeholder mixin
+       .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;
        }
-       &::-moz-placeholder { // FF 4-18
-               .field-placeholder-styling;
+       // Internet Explorer 10-11
+       &:-ms-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
+               .mixin-placeholder;
        }
-       &:-moz-placeholder { // FF >= 19
-               .field-placeholder-styling;
+       // 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;
        }
-       &:-ms-input-placeholder { // IE >= 10
-               .field-placeholder-styling;
+       // W3C Standard Selectors Level 4
+       &:placeholder-shown {
+               .mixin-placeholder;
        }
 
-       // Remove red outline from inputs which have required field and invalid content.
-       // This is a Firefox only issue
+       // Firefox: Remove red outline when `required` attribute set and invalid content.
        // See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
-       // This should be above :focus so focus behaviour takes preference
+       // This should come before `:focus` so latter rules take preference.
        &:invalid {
                box-shadow: none;
        }
 
+       &:hover {
+               border-color: @colorGray7;
+       }
+
        &:focus {
                border-color: @colorProgressive;
                box-shadow: inset 0 0 0 1px @colorProgressive;
                outline: 0;
        }
 
+       // `:not()` is used exclusively for `transition`s as both are not supported by IE < 9.
+       &:not( :disabled ) {
+               .transition( ~'color 100ms, border-color 100ms, box-shadow 100ms' );
+       }
+
        &:disabled {
                border-color: @colorGray14;
                color: @colorGray12;
@@ -76,7 +100,7 @@
                // Correct the odd appearance in Chrome and Safari 5
                -webkit-appearance: textfield;
 
-               // Remove proprietary clear button in IE 10-11
+               // Remove proprietary clear button in IE 10-11, Edge 12+
                &::-ms-clear {
                        display: none;
                }