Current File : //www/varak.net/wiki.varak.net/resources/src/mediawiki.ui/components/forms.less
// 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 5.
// 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-progressive">Button in vform</button>
// </div>
// </form>
//
// Styleguide 5.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;
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 5.2.
.error,
.warning,
.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: @colorErrorText;
border: 1px solid #fac5c5;
background-color: #fae3e3;
}
// Colours taken from those for .warningbox in shared.css
.warning {
color: @colorWarningText;
border: 1px solid #fde29b;
background-color: #fdf1d1;
}
// 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();
}
// 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();
}
Mini Shell