1 // Form elements and layouts
3 // --------------------------------------------------------------------------
5 // --------------------------------------------------------------------------
7 // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
8 // 'VForm' design, the form can't be narrower than this.
9 $captchaContainerWidth: 290px;
10 $defaultFormWidth: $captchaContainerWidth;
12 // Style a compact vertical stacked form ("VForm") and the elements in divs
15 @include box-sizing(border-box);
17 width: $defaultFormWidth;
25 // MW currently doesn't use the type attribute everywhere on inputs.
29 @include box-sizing(border-box);
35 @include agora-field-styling; // mixins/_forms.scss
40 @include box-sizing(border-box);
41 @include agora-label-styling;
47 // Override input styling just for checkboxes and radio inputs.
48 input[type="checkbox"],
51 @include box-sizing(content-box);
58 // --------------------------------------------------------------------------
60 // --------------------------------------------------------------------------
62 // Apply mw-ui-input to individual input fields to style them.
63 // You generally don't need to use this class if <input> is within an Agora
64 // form container such as mw-ui-vform
66 @include agora-field-styling; // mixins/_forms.scss
69 // Apply mw-ui-label to individual elements to style them.
70 // You generally don't need to use this class if <label> is within an Agora
71 // form container such as mw-ui-vform
73 @include agora-label-styling; // mixins/_forms.scss
76 // Nesting an input checkbox or radio button inside a label with this class
77 // improves alignment, e.g.
78 // <label class="mw-ui-checkbox-label">
79 // <input type="checkbox">The label text
81 .mw-ui-checkbox-label, .mw-ui-radio-label {
82 @include agora-inline-label-styling;