-// Form elements and layouts
-
-@import "mediawiki.mixins";
-@import "mediawiki.ui/mixins/utilities";
-@import "mediawiki.ui/mixins/forms";
-
-// --------------------------------------------------------------------------
-// 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 section on guidance of how and when to use mw-ui-constructive.
-//
-// 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 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.
- input,
- select,
- .mw-ui-button {
- display: block;
- .box-sizing(border-box);
- margin: 0;
- width: 100%;
- }
-
- // We exclude buttons because they'll generally use mw-ui-button.
- // Otherwise, we'll unintentionally override that.
- input:not([type=button]):not([type=submit]):not([type=file]) {
- .agora-field-styling(); // mixins/forms.less
- }
-
- // 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="checkbox"],
- 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.1.
- .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 skins/common/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-div .error, /* for backwards-compatibility, remove before 1.24 */
- .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-div, /* for backwards-compatibility, remove before 1.24 */
-.mw-ui-vform-field {
- display: block;
- margin: 0 0 15px;
- padding: 0;
- width: 100%;
-}
-
-// Apply mw-ui-input to individual input fields to style them.
-// You generally don't need to use this class if <input> is within an Agora
-// form container such as mw-ui-vform
-.mw-ui-input {
- .agora-field-styling(); // mixins/forms.less
-}
-
-// 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 checkbox or radio button inside a label with this class
-// improves alignment, e.g.
-// <label class="mw-ui-checkbox-label">
-// <input type="checkbox">The label text
-// </label>
-.mw-ui-checkbox-label, .mw-ui-radio-label {
- .agora-inline-label-styling();
-}