From: Shahyar <shahyar@gmail.com>
Date: Wed, 30 Jul 2014 23:06:52 +0000 (-0400)
Subject: MediaWiki UI: Adjustments to mw-ui-input
X-Git-Tag: 1.31.0-rc.0~14550^2
X-Git-Url: http://git.cyclocoop.org/%28?a=commitdiff_plain;h=1de1666028891579fbc75d87ae29f36e54f0807f;p=lhc%2Fweb%2Fwiklou.git

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 25dba78b9d..f04aef30b6 100644
--- 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;
 	}
 }