1 // Form elements and layouts
3 // --------------------------------------------------------------------------
5 // --------------------------------------------------------------------------
7 // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
8 // 'vform' stacked div design, the form can't be narrower than this.
9 $captchaContainerWidth: 290px;
10 $defaultFormWidth: $captchaContainerWidth;
13 @include box-sizing(border-box);
15 width: $defaultFormWidth;
23 // MW currently doesn't use the type attribute everywhere on inputs
28 @include box-sizing(border-box);
34 @include agora-field-styling; // mixins/_forms.scss
38 @include agora-label-styling;
44 &.mw-ui-checkbox-label, &.mw-ui-radio-label {
45 @include agora-inline-label-styling;
49 // Override the above styling just for checkboxes and radio inputs
50 input[type="checkbox"],
53 @include box-sizing(content-box);
60 // --------------------------------------------------------------------------
62 // --------------------------------------------------------------------------
64 // Apply mw-ui-input to fields individually to style them
65 // You don't need to use this if <input> is within a Agora form container
67 @include agora-field-styling; // mixins/_forms.scss
70 // Default label styling is mw-ui-block-label
71 .mw-ui-block-label, .mw-ui-formlist div label {
72 @include agora-label-styling; // mixins/_forms.scss
75 // Checkbox and radio button label alignment hack
76 // <label class="mw-ui-checkbox-label">
77 // <input type="checkbox" />Label
80 .mw-ui-checkbox-label, .mw-ui-radio-label {
81 @include agora-inline-label-styling;