inputs.less: Use .mw-ui-input-inline for type="number"

[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 6996ab8..4969bfe 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -56,8 +56,16 @@
                .field-placeholder-styling;
        }
 
+       // 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;
+               box-shadow: inset .45em 0 0 @colorProgressive;
                border-color: @colorGrayDark;
                // Remove focus glow on input[type="search"]
                outline: 0;
@@ -77,6 +85,7 @@ textarea.mw-ui-input {
 // <button class="mw-ui-button mw-ui-constructive">go</button>
 //
 // Styleguide 1.2.
+input[type="number"],
 .mw-ui-input-inline {
        display: inline-block;
        width: auto;