MediaWiki UI: Adjustments to mw-ui-input

Correcting slight issues with mw-ui-input with
focus behaviour and vertical alignment

Use negative margin to ensure that when input element is
focused that all 4 border sides are shown rather than just
3.

Change-Id: I9d51fcd1781a9a615e3b41e6988e19021466a9d1

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 25dba78..f04aef3 100644 (file)
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -34,6 +34,7 @@
        width: 100%;
        padding: .3em .3em .3em .6em;
        display: block;
+       vertical-align: middle;
        // Override user agent stylesheet properties. Instead use parent element.
        color: inherit;
        font-family: inherit;
@@ -97,8 +98,14 @@ textarea.mw-ui-input {
 .mw-ui-input-large {
        margin-top: 0;
        margin-bottom: 0;
+
+       // When two large inputs are together, we make them flush by hiding one of the borders
        & + .mw-ui-input-large {
-               border-top-width: 0;
+               margin-top: -1px;
+       }
+       // When focusing, make the input relative to raise it above any attached inputs to unhide its borders
+       &:focus {
+               position: relative;
        }
 }