X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Finputs.less;h=76500be415d997e234b0c7c3dafd21c4be3cb7ed;hb=0ab1808578a42cb7d26cf0350a12443663fa6fc4;hp=76fee23e21dbcdae7fc807b640b651154946c9af;hpb=a303296f2730d6279a249bde77f3e0b9b42e494f;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 76fee23e21..76500be415 100644
--- 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,75 @@
 //
 // 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;
+	// 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 +101,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;
 		}
@@ -84,7 +109,7 @@
 		// Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X
 		&::-webkit-search-cancel-button,
 		&::-webkit-search-decoration {
-	 		-webkit-appearance: none;
+			-webkit-appearance: none;
 		}
 	}
 }
@@ -99,7 +124,7 @@ textarea.mw-ui-input {
 //
 // Markup:
 // <input class="mw-ui-input mw-ui-input-inline">
-// <button class="mw-ui-button mw-ui-constructive">Submit</button>
+// <button class="mw-ui-button mw-ui-progressive">Submit</button>
 //
 // Styleguide 1.2.
 input[type="number"],