1 // Form elements and layouts
3 @import "mediawiki.mixins";
4 @import "../../mixins/utilities";
5 @import "../../mixins/forms";
7 // --------------------------------------------------------------------------
9 // --------------------------------------------------------------------------
11 // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
12 // 'VForm' design, the form can't be narrower than this.
13 @captchaContainerWidth: 290px;
14 @defaultFormWidth: @captchaContainerWidth;
22 // Style a compact vertical stacked form ("VForm") and the elements in divs
23 // within it. See button section on guidance of how and when to use mw-ui-constructive.
26 // <form class="mw-ui-vform">
27 // <div class="mw-ui-vform-field">This is a form example.</div>
28 // <div class="mw-ui-vform-field">
29 // <label>Username </label>
30 // <input value="input">
32 // <div class="mw-ui-vform-field">
33 // <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
39 .box-sizing(border-box);
41 width: @defaultFormWidth;
43 // MW currently doesn't use the type attribute everywhere on inputs.
48 .box-sizing(border-box);
53 // We exclude buttons because they'll generally use mw-ui-button.
54 // Otherwise, we'll unintentionally override that.
55 input:not([type=button]):not([type=submit]):not([type=file]) {
56 .agora-field-styling(); // mixins/forms.less
59 // Give dropdown lists the same spacing as input fields for consistency.
60 // Values taken from .agora-field-styling() in mixins/form.less
62 padding: 0.35em 0.5em 0.35em 0.5em;
63 vertical-align: middle;
68 .box-sizing(border-box);
69 .agora-label-styling();
75 // Override input styling just for checkboxes and radio inputs.
76 input[type="checkbox"],
79 .box-sizing(content-box);
84 // Styles for information boxes
86 // Regular HTMLForm uses .error class, some special pages like
87 // SpecialUserlogin (login and create account) use .errorbox.
90 // <form class="mw-ui-vform">
91 // <div class="errorbox">An error occurred</div>
92 // <div class="warningbox">A warning to be noted</div>
93 // <div class="successbox">Action successful!</div>
94 // <div class="error">A different kind of error</div>
95 // <div class="error">
96 // <ul><li>There are problems with some of your input.</li></ul>
98 // <div class="mw-ui-vform-field">
99 // <input type="text" value="input" class="mw-ui-input">
101 // <div class="mw-ui-vform-field">
103 // <option value="1">Option 1</option>
104 // <option value="2">Option 2</option>
106 // <span class="error">The value you specified is not a valid option.</span>
108 // <div class="mw-ui-vform-field">
109 // <button class="mw-ui-button">Button in vform</button>
118 .box-sizing(border-box);
122 word-wrap: break-word;
125 // Colours taken from those for .errorbox in skins/common/shared.css
128 border: 1px solid #fac5c5;
129 background-color: #fae3e3;
130 text-shadow: 0 1px #fae3e3;
133 // This specifies styling for individual field validation error messages.
134 // Show them below the fields to prevent line break glitches, and leave
135 // some space between the field and the error message box.
136 .mw-ui-vform-div .error, /* for backwards-compatibility, remove before 1.24 */
137 .mw-ui-vform-field .error {
144 // --------------------------------------------------------------------------
146 // --------------------------------------------------------------------------
148 // A wrapper for a single form field: the <input> / <select> / <button> element,
149 // help text, labels, associated error/warning/success messages, and so on.
150 // Elements with this class are generated by HTMLFormField in core MediaWiki.
152 // (We use a broad definition of 'field' here: a purely textual information
153 // block is also a "field".)
154 .mw-ui-vform-div, /* for backwards-compatibility, remove before 1.24 */
162 // Apply mw-ui-input to individual input fields to style them.
163 // You generally don't need to use this class if <input> is within an Agora
164 // form container such as mw-ui-vform
166 .agora-field-styling(); // mixins/forms.less
169 // Apply mw-ui-label to individual elements to style them.
170 // You generally don't need to use this class if <label> is within an Agora
171 // form container such as mw-ui-vform
173 .agora-label-styling(); // mixins/forms.less
176 // Nesting an input checkbox or radio button inside a label with this class
177 // improves alignment, e.g.
178 // <label class="mw-ui-checkbox-label">
179 // <input type="checkbox">The label text
181 .mw-ui-checkbox-label, .mw-ui-radio-label {
182 .agora-inline-label-styling();