Merge branch 'archwiki'

# Conflicts:
#	skins/ArchLinux.php
#	skins/ArchLinux/archlogo.gif

1 files changed, 166 insertions, 0 deletions

diff --git a/resources/src/mediawiki.ui/components/forms.less b/resources/src/mediawiki.ui/components/forms.less
new file mode 100644
index 00000000..592a3098
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -0,0 +1,166 @@
+// Form elements and layouts
+
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+// --------------------------------------------------------------------------
+// Layouts
+// --------------------------------------------------------------------------
+
+// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
+// 'VForm' design, the form can't be narrower than this.
+@captchaContainerWidth: 290px;
+@defaultFormWidth: @captchaContainerWidth;
+
+// Forms
+//
+// Styleguide 3.
+
+// VForm
+//
+// Style a compact vertical stacked form ("VForm") and the elements in divs
+// within it. See button and inputs section on guidance of how and when to use them.
+//
+// Markup:
+// <form class="mw-ui-vform">
+//   <div class="mw-ui-vform-field">This is a form example.</div>
+//   <div class="mw-ui-vform-field">
+//     <label>Username </label>
+//     <input class="mw-ui-input" value="input">
+//   </div>
+//   <div class="mw-ui-vform-field">
+//     <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
+//   </div>
+// </form>
+//
+// Styleguide 3.1.
+.mw-ui-vform {
+	.box-sizing(border-box);
+
+	width: @defaultFormWidth;
+
+	// MW currently doesn't use the type attribute everywhere on inputs.
+	select,
+	.mw-ui-button {
+		display: block;
+		.box-sizing(border-box);
+		margin: 0;
+		width: 100%;
+	}
+
+	// Give dropdown lists the same spacing as input fields for consistency.
+	// Values taken from .agora-field-styling() in mixins/form.less
+	select {
+		padding: 0.35em 0.5em 0.35em 0.5em;
+		vertical-align: middle;
+	}
+
+	> label {
+		display: block;
+		.box-sizing(border-box);
+		.agora-label-styling();
+		width: auto;
+		margin: 0 0 0.2em;
+		padding: 0;
+	}
+
+	// Override input styling just for checkboxes and radio inputs.
+	input[type="radio"] {
+		display: inline;
+		.box-sizing(content-box);
+		width: auto;
+	}
+
+
+	// Styles for information boxes
+	//
+	// Regular HTMLForm uses .error class, some special pages like
+	// SpecialUserlogin (login and create account) use .errorbox.
+	//
+	// Markup:
+	// <form class="mw-ui-vform">
+	//   <div class="errorbox">An error occurred</div>
+	//   <div class="warningbox">A warning to be noted</div>
+	//   <div class="successbox">Action successful!</div>
+	//   <div class="error">A different kind of error</div>
+	//   <div class="error">
+	//     <ul><li>There are problems with some of your input.</li></ul>
+	//   </div>
+	//   <div class="mw-ui-vform-field">
+	//     <input type="text" value="input" class="mw-ui-input">
+	//   </div>
+	//   <div class="mw-ui-vform-field">
+	//     <select>
+	//       <option value="1">Option 1</option>
+	//       <option value="2">Option 2</option>
+	//     </select>
+	//     <span class="error">The value you specified is not a valid option.</span>
+	//   </div>
+	//   <div class="mw-ui-vform-field">
+	//     <button class="mw-ui-button">Button in vform</button>
+	//   </div>
+	// </form>
+	//
+	// Styleguide 3.2.
+	.error,
+	.errorbox,
+	.warningbox,
+	.successbox {
+		.box-sizing(border-box);
+		font-size: 0.9em;
+		margin: 0 0 1em 0;
+		padding: 0.5em;
+		word-wrap: break-word;
+	}
+
+	// Colours taken from those for .errorbox in shared.css
+	.error {
+		color: #cc0000;
+		border: 1px solid #fac5c5;
+		background-color: #fae3e3;
+		text-shadow: 0 1px #fae3e3;
+	}
+
+	// This specifies styling for individual field validation error messages.
+	// Show them below the fields to prevent line break glitches, and leave
+	// some space between the field and the error message box.
+	.mw-ui-vform-field .error {
+		display: block;
+		margin-top: 5px;
+	}
+
+}
+
+// --------------------------------------------------------------------------
+// Elements
+// --------------------------------------------------------------------------
+
+// A wrapper for a single form field: the <input> / <select> / <button> element,
+// help text, labels, associated error/warning/success messages, and so on.
+// Elements with this class are generated by HTMLFormField in core MediaWiki.
+//
+// (We use a broad definition of 'field' here: a purely textual information
+// block is also a "field".)
+.mw-ui-vform-field {
+	display: block;
+	margin: 0 0 15px;
+	padding: 0;
+	width: 100%;
+}
+
+// Apply mw-ui-label to individual elements to style them.
+// You generally don't need to use this class if <label> is within an Agora
+// form container such as mw-ui-vform
+.mw-ui-label {
+	.agora-label-styling(); // mixins/forms.less
+}
+
+// Nesting an input  inside a label with this class
+// improves alignment, e.g.
+//	<label class="mw-ui-radio-label">
+//		<input type="radio">The label text
+//	</label>
+.mw-ui-radio-label {
+	.agora-inline-label-styling();
+}