From: Volker E <volker.e@wikimedia.org>
Date: Sun, 9 Oct 2016 21:37:52 +0000 (-0700)
Subject: mediawiki.UI: Align .mw-ui-input appearance to design spec/OOjs UI
X-Git-Tag: 1.31.0-rc.0~5159
X-Git-Url: http://git.heureux-cyclage.org/?a=commitdiff_plain;h=0c6d39c5150c04feab8ffc8f92805fb0a84d559c;p=lhc%2Fweb%2Fwiklou.git

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 90e769e349..8bddb3a169 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,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;
 		}