X-Git-Url: https://git.cyclocoop.org/%242?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Finputs.less;h=6996ab87106f388e7e81b4c1cc4e9cb5fd1f0e53;hb=6f02681dd82948e62831b3f6ac6df66145fbf98e;hp=25dba78b9d20f2102966744a9e22522cd958db3b;hpb=46343ca0dd56a8299f1a4078f45a7efe26de1213;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 25dba78b9d..6996ab8710 100644
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -11,7 +11,7 @@
 }
 // Inputs
 //
-// When using an input or textarea apply the mw-ui-input class.
+// Apply the mw-ui-input class to input and textarea fields.
 //
 // Styleguide 1.
 
@@ -22,8 +22,8 @@
 // When focused a progressive highlight appears to the left of the field.
 //
 // Markup:
-// <input value="input" class="mw-ui-input" value="input">
-// <textarea class="mw-ui-input">textarea</textarea>
+// <input class="mw-ui-input" placeholder="Enter your name">
+// <textarea class="mw-ui-input">Text here</textarea>
 //
 // Styleguide 1.1.
 .mw-ui-input {
@@ -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;
@@ -72,7 +73,7 @@ textarea.mw-ui-input {
 // Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input.
 //
 // Markup:
-// <input value="input" class="mw-ui-input mw-ui-input-inline" value="input">
+// <input class="mw-ui-input mw-ui-input-inline">
 // <button class="mw-ui-button mw-ui-constructive">go</button>
 //
 // Styleguide 1.2.
@@ -84,21 +85,27 @@ textarea.mw-ui-input {
 // mw-ui-input-large
 //
 // Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you
-// want to draw more attention to one instance. For example add topic / reply to post forms.
-// Currently in draft status and subject to change. When used on an input, the text is styled
-// in a large font. When used alongside another mw-ui-input large they are pushed together to seem like
-// one contiguous input.
+// want to draw attention to one instance. For example, replying with a subject line and more text.
+// Currently in draft status and subject to change. When used on an input field, the text is styled
+// in a large font. When used alongside another mw-ui-input large they are pushed together to form one
+// contiguous block.
 //
 // Markup:
-// <input value="input" class="mw-ui-input mw-ui-input-large" value="input">
-// <textarea class="mw-ui-input mw-ui-input-large">textarea</textarea>
+// <input value="input" class="mw-ui-input mw-ui-input-large" value="input" placeholder="Enter subject">
+// <textarea class="mw-ui-input mw-ui-input-large" placeholder="Provide additional details"></textarea>
 //
 // Styleguide 1.3.
 .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;
 	}
 }