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.
43 // XXX: We shouldn't depend on the tag name here...
51 // MW currently doesn't use the type attribute everywhere on inputs.
55 .box-sizing(border-box);
60 // We exclude these because they'll generally use mw-ui-button.
61 // Otherwise, we'll unintentionally override that.
62 input:not([type=button]):not([type=submit]):not([type=file]), {
63 .agora-field-styling(); // mixins/forms.less
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>
96 // <input type="text" value="input" class="mw-ui-input">
99 // <button class="mw-ui-button">Button in vform</button>
105 .box-sizing(border-box);
110 border: 1px solid #fac5c5;
111 background-color: #fae3e3;
112 text-shadow: 0 1px #fae3e3;
113 word-wrap: break-word;
119 .box-sizing(border-box);
123 word-wrap: break-word;
128 // --------------------------------------------------------------------------
130 // --------------------------------------------------------------------------
132 // Apply this to individual elements to style them.
133 // You generally don't need to use this class on divs within an Agora
134 // form container such as mw-ui-vform
135 // XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
136 // XXX: What is this even for?
144 // Apply mw-ui-input to individual input fields to style them.
145 // You generally don't need to use this class if <input> is within an Agora
146 // form container such as mw-ui-vform
148 .agora-field-styling(); // mixins/forms.less
151 // Apply mw-ui-label to individual elements to style them.
152 // You generally don't need to use this class if <label> is within an Agora
153 // form container such as mw-ui-vform
155 .agora-label-styling(); // mixins/forms.less
158 // Nesting an input checkbox or radio button inside a label with this class
159 // improves alignment, e.g.
160 // <label class="mw-ui-checkbox-label">
161 // <input type="checkbox">The label text
163 .mw-ui-checkbox-label, .mw-ui-radio-label {
164 .agora-inline-label-styling();