diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components/forms.less')
| -rw-r--r-- | resources/src/mediawiki.ui/components/forms.less | 166 |
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(); +} |