Make generic placeholder pseudo-class browser-prefix mixin

[lhc/web/wiklou.git] / resources / src / mediawiki.ui / components / inputs.less

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 90e769e..2346325 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,53 @@
 //
 // Styleguide 1.1.
 .mw-ui-input {
+       background-color: #fff;
+       color: @colorGray1;
        .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;
-       }
-       &::-moz-placeholder { // FF 4-18
-               .field-placeholder-styling;
-       }
-       &:-moz-placeholder { // FF >= 19
-               .field-placeholder-styling;
-       }
-       &:-ms-input-placeholder { // IE >= 10
-               .field-placeholder-styling;
-       }
+       // Normalize & style placeholder text, see T139034
+       /* stylelint-disable indentation */
+       .mixin-placeholder( {
+               color: @colorGray7;
+               opacity: 1;
+               // TODO: Is italic necessary? T147808
+               font-style: italic;
+       } );
+       /* stylelint-enable indentation */
 
-       // 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 +79,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;
                }