1 // Form elements and layouts
3 @import "../../mixins/utilities";
4 @import "../../mixins/forms";
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 section on guidance of how and when to use mw-ui-constructive.
25 // <form class="mw-ui-vform">
26 // <div class="mw-ui-vform-div">This is a form example.</div>
28 // <label>Username </label>
29 // <input value="input">
32 // <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
38 .box-sizing(border-box);
40 width: @defaultFormWidth;
42 // Immediate divs in a vform are block and spaced-out.
49 // MW currently doesn't use the type attribute everywhere on inputs.
53 .box-sizing(border-box);
58 // We exclude these because they'll generally use mw-ui-button.
59 // Otherwise, we'll unintentionally override that.
60 input:not([type=button]):not([type=submit]):not([type=file]), {
61 .agora-field-styling(); // mixins/forms.less
66 .box-sizing(border-box);
67 .agora-label-styling();
73 // Override input styling just for checkboxes and radio inputs.
74 input[type="checkbox"],
77 .box-sizing(content-box);
83 // Styles for information boxes
85 // Regular HTMLForm uses .error class, some special pages like
86 // SpecialUserlogin (login and create account) use .errorbox.
89 // <form class="mw-ui-vform">
90 // <div class="errorbox">An error occurred</div>
91 // <div class="warningbox">A warning to be noted</div>
92 // <div class="successbox">Action successful!</div>
93 // <div class="error">A different kind of error</div>
95 // <input type="text" value="input" class="mw-ui-input">
98 // <button class="mw-ui-button">Button in vform</button>
104 .box-sizing(border-box);
109 border: 1px solid #fac5c5;
110 background-color: #fae3e3;
111 text-shadow: 0 1px #fae3e3;
112 word-wrap: break-word;
118 .box-sizing(border-box);
122 word-wrap: break-word;
127 // --------------------------------------------------------------------------
129 // --------------------------------------------------------------------------
131 // Apply this to individual elements to style them.
132 // You generally don't need to use this class on divs within an Agora
133 // form container such as mw-ui-vform
134 // XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
142 // Apply mw-ui-input to individual input fields to style them.
143 // You generally don't need to use this class if <input> is within an Agora
144 // form container such as mw-ui-vform
146 .agora-field-styling(); // mixins/forms.less
149 // Apply mw-ui-label to individual elements to style them.
150 // You generally don't need to use this class if <label> is within an Agora
151 // form container such as mw-ui-vform
153 .agora-label-styling(); // mixins/forms.less
156 // Nesting an input checkbox or radio button inside a label with this class
157 // improves alignment, e.g.
158 // <label class="mw-ui-checkbox-label">
159 // <input type="checkbox">The label text
161 .mw-ui-checkbox-label, .mw-ui-radio-label {
162 .agora-inline-label-styling();