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 0a50e10..acf1157 100644 (file)
--- 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 {