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;
15 // Style a compact vertical stacked form ("VForm") and the elements in divs
18 .box-sizing(border-box);
20 width: @defaultFormWidth;
22 // Immediate divs in a vform are block and spaced-out.
29 // MW currently doesn't use the type attribute everywhere on inputs.
33 .box-sizing(border-box);
38 // We exclude these because they'll generally use mw-ui-button.
39 // Otherwise, we'll unintentionally override that.
40 input:not([type=button]):not([type=submit]):not([type=file]), {
41 .agora-field-styling(); // mixins/forms.less
46 .box-sizing(border-box);
47 .agora-label-styling();
53 // Override input styling just for checkboxes and radio inputs.
54 input[type="checkbox"],
57 .box-sizing(content-box);
63 // HTMLForm uses error, SpecialUserlogin (login and create account) uses
65 // TODO move errorbox from mediawiki.special.vforms.css into here.
67 .box-sizing(border-box);
72 border: 1px solid #fac5c5;
73 background-color: #fae3e3;
74 text-shadow: 0 1px #fae3e3;
75 word-wrap: break-word;
79 // --------------------------------------------------------------------------
81 // --------------------------------------------------------------------------
83 // Apply this to individual elements to style them.
84 // You generally don't need to use this class on divs within an Agora
85 // form container such as mw-ui-vform
86 // XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
94 // Apply mw-ui-input to individual input fields to style them.
95 // You generally don't need to use this class if <input> is within an Agora
96 // form container such as mw-ui-vform
98 .agora-field-styling(); // mixins/forms.less
101 // Apply mw-ui-label to individual elements to style them.
102 // You generally don't need to use this class if <label> is within an Agora
103 // form container such as mw-ui-vform
105 .agora-label-styling(); // mixins/forms.less
108 // Nesting an input checkbox or radio button inside a label with this class
109 // improves alignment, e.g.
110 // <label class="mw-ui-checkbox-label">
111 // <input type="checkbox">The label text
113 .mw-ui-checkbox-label, .mw-ui-radio-label {
114 .agora-inline-label-styling();