// Form elements and layouts @import "mediawiki.mixins"; @import "mediawiki.ui/variables"; @import "mediawiki.ui/mixins"; // -------------------------------------------------------------------------- // Layouts // -------------------------------------------------------------------------- // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the // 'VForm' design, the form can't be narrower than this. @captchaContainerWidth: 290px; @defaultFormWidth: @captchaContainerWidth; // Forms // // Styleguide 5. // VForm // // Style a compact vertical stacked form ("VForm") and the elements in divs // within it. See button and inputs section on guidance of how and when to use them. // // Markup: //
//
This is a form example.
//
// // //
//
// //
//
// // Styleguide 5.1. .mw-ui-vform { .box-sizing(border-box); width: @defaultFormWidth; // MW currently doesn't use the type attribute everywhere on inputs. select, .mw-ui-button { display: block; .box-sizing(border-box); margin: 0; width: 100%; } // Give dropdown lists the same spacing as input fields for consistency. // Values taken from .agora-field-styling() in mixins/form.less select { padding: 0.35em 0.5em 0.35em 0.5em; vertical-align: middle; } > label { display: block; .box-sizing(border-box); .agora-label-styling(); width: auto; margin: 0 0 0.2em; padding: 0; } // Override input styling just for checkboxes and radio inputs. input[type="radio"] { display: inline; .box-sizing(content-box); width: auto; } // Styles for information boxes // // Regular HTMLForm uses .error class, some special pages like // SpecialUserlogin (login and create account) use .errorbox. // // Markup: //
//
An error occurred
//
A warning to be noted
//
Action successful!
//
A different kind of error
//
// //
//
// //
//
// // The value you specified is not a valid option. //
//
// //
//
// // Styleguide 5.2. .error, .errorbox, .warningbox, .successbox { .box-sizing(border-box); font-size: 0.9em; margin: 0 0 1em 0; padding: 0.5em; word-wrap: break-word; } // Colours taken from those for .errorbox in shared.css .error { color: #cc0000; border: 1px solid #fac5c5; background-color: #fae3e3; text-shadow: 0 1px #fae3e3; } // This specifies styling for individual field validation error messages. // Show them below the fields to prevent line break glitches, and leave // some space between the field and the error message box. .mw-ui-vform-field .error { display: block; margin-top: 5px; } } // -------------------------------------------------------------------------- // Elements // -------------------------------------------------------------------------- // A wrapper for a single form field: the / The label text // .mw-ui-radio-label { .agora-inline-label-styling(); }