From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 22 Aug 2014 20:33:20 +0000 (-0700)
Subject: Change css rule order
X-Git-Tag: 1.31.0-rc.0~14321
X-Git-Url: http://git.cyclocoop.org/%28?a=commitdiff_plain;h=e8405c330b4a40fc1e150738b5c6b2fbd3649d9b;p=lhc%2Fweb%2Fwiklou.git

Change css rule order

:invalid is incorrectly overriding a :focus:invalid element
correct the order and add a note about this.

Change-Id: I4ee1a4634840b2251e294dfb704c1f5e3b730f7d
---

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 0a50e107ab..acf11575e6 100644
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -56,19 +56,20 @@
 		.field-placeholder-styling;
 	}
 
-	&:focus {
-		box-shadow: inset .45em 0 0 #5088f7;
-		border-color: @colorGrayDark;
-		// Remove focus glow on input[type="search"]
-		outline: 0;
-	}
-
 	// Remove red outline from inputs which have required field and invalid content.
 	// This is a Firefox only issue
 	// See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
+	// This should be above :focus so focus behaviour takes preference
 	&:invalid {
 		box-shadow: none;
 	}
+
+	&:focus {
+		box-shadow: inset .45em 0 0 #5088f7;
+		border-color: @colorGrayDark;
+		// Remove focus glow on input[type="search"]
+		outline: 0;
+	}
 }
 
 textarea.mw-ui-input {