1 // Form elements and layouts
3 @import 'mediawiki.mixins';
4 @import 'mediawiki.ui/variables';
6 // --------------------------------------------------------------------------
8 // --------------------------------------------------------------------------
10 // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
11 // 'VForm' design, the form can't be narrower than this.
12 @captchaContainerWidth: 290px;
13 @defaultFormWidth: @captchaContainerWidth;
21 // Style a compact vertical stacked form ("VForm") and the elements in divs
22 // within it. See button and inputs section on guidance of how and when to use them.
25 // <form class="mw-ui-vform">
26 // <div class="mw-ui-vform-field">This is a form example.</div>
27 // <div class="mw-ui-vform-field">
28 // <label>Username </label>
29 // <input class="mw-ui-input" value="input">
31 // <div class="mw-ui-vform-field">
32 // <button class="mw-ui-button mw-ui-progressive">Button in vform</button>
38 .box-sizing( border-box );
39 width: @defaultFormWidth;
41 // MW currently doesn't use the type attribute everywhere on inputs.
45 .box-sizing( border-box );
50 // Give dropdown lists the same spacing as input fields for consistency.
51 // Values taken from .agora-field-styling() in mixins/form.less
53 padding: 0.35em 0.5em;
54 vertical-align: middle;
60 .box-sizing( border-box );
71 // Override input styling just for checkboxes and radio inputs.
72 input[ type='radio' ] {
74 .box-sizing( content-box );
78 // Styles for information boxes
80 // Regular HTMLForm uses .error class, some special pages like
81 // SpecialUserlogin (login and create account) use .errorbox.
84 // <form class="mw-ui-vform">
85 // <div class="errorbox">An error occurred</div>
86 // <div class="warningbox">A warning to be noted</div>
87 // <div class="successbox">Action successful!</div>
88 // <div class="error">A different kind of error</div>
89 // <div class="error">
90 // <ul><li>There are problems with some of your input.</li></ul>
92 // <div class="mw-ui-vform-field">
93 // <input type="text" value="input" class="mw-ui-input">
95 // <div class="mw-ui-vform-field">
97 // <option value="1">Option 1</option>
98 // <option value="2">Option 2</option>
100 // <span class="error">The value you specified is not a valid option.</span>
102 // <div class="mw-ui-vform-field">
103 // <button class="mw-ui-button">Button in vform</button>
113 .box-sizing( border-box );
117 word-wrap: break-word;
120 // Colours taken from those for .errorbox in shared.css
122 color: @colorErrorText;
123 border: 1px solid #fac5c5;
124 background-color: #fae3e3;
127 // Colours taken from those for .warningbox in shared.css
129 color: @colorWarningText;
130 border: 1px solid #fde29b;
131 background-color: #fdf1d1;
134 // This specifies styling for individual field validation error messages.
135 // Show them below the fields to prevent line break glitches, and leave
136 // some space between the field and the error message box.
137 .mw-ui-vform-field .error {
143 // --------------------------------------------------------------------------
145 // --------------------------------------------------------------------------
147 // A wrapper for a single form field: the <input> / <select> / <button> element,
148 // help text, labels, associated error/warning/success messages, and so on.
149 // Elements with this class are generated by HTMLFormField in core MediaWiki.
151 // (We use a broad definition of 'field' here: a purely textual information
152 // block is also a "field".)
160 // Apply mw-ui-label to individual elements to style them.
161 // You generally don't need to use this class if <label> is within an Agora
162 // form container such as mw-ui-vform