Page MenuHomeWickedGov Phorge
Files F5969280

forms.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

forms.less
View Options

// Form elements and layouts
@import 'mediawiki.skin.variables.less';
/* stylelint-disable selector-class-pattern */
// --------------------------------------------------------------------------
// 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
// 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>
.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;
width: 100%;
}
// Give dropdown lists the same spacing as input fields for consistency.
// Values taken from .agora-field-styling() in mixins/form.less
select {
box-sizing: border-box;
padding: 0.35em 0.5em;
vertical-align: middle;
}
> label {
display: block;
color: @color-base;
box-sizing: border-box;
width: auto;
margin: 0 0 0.2em;
padding: 0;
font-size: 0.9em;
* {
font-weight: normal;
}
}
// Override input styling just for checkboxes and radio inputs.
input[ type='radio' ] {
display: inline;
box-sizing: content-box;
width: auto;
}
}
// --------------------------------------------------------------------------
// 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,
.mw-ui-vform .htmlform-tip {
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 {
color: @color-base;
font-size: 0.9em;
* {
font-weight: normal;
}
}

File Metadata

Mime Type
text/plain
Expires
Sat, Oct 3, 13:39 (1 d, 7 h ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
ef/79/d9d382747c22cc654c9c7abd47bc
Default Alt Text
forms.less (2 KB)

Event Timeline