resources/src/mediawiki.ui/components/forms.less

   1 // Form elements and layouts
   2
   3 @import 'mediawiki.mixins';
   4 @import 'mediawiki.ui/variables';
   5
   6 /* stylelint-disable selector-class-pattern */
   7
   8 // --------------------------------------------------------------------------
   9 // Layouts
  10 // --------------------------------------------------------------------------
  11
  12 // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
  13 // 'VForm' design, the form can't be narrower than this.
  14 @captchaContainerWidth: 290px;
  15 @defaultFormWidth: @captchaContainerWidth;
  16
  17 // Forms
  18 //
  19 // Styleguide 5.
  20
  21 // VForm
  22 //
  23 // Style a compact vertical stacked form ("VForm") and the elements in divs
  24 // within it. See button and inputs section on guidance of how and when to use them.
  25 //
  26 // Markup:
  27 // <form class="mw-ui-vform">
  28 //   <div class="mw-ui-vform-field">This is a form example.</div>
  29 //   <div class="mw-ui-vform-field">
  30 //     <label>Username </label>
  31 //     <input class="mw-ui-input" value="input">
  32 //   </div>
  33 //   <div class="mw-ui-vform-field">
  34 //     <button class="mw-ui-button mw-ui-progressive">Button in vform</button>
  35 //   </div>
  36 // </form>
  37 //
  38 // Styleguide 5.1.
  39 .mw-ui-vform {
  40         .box-sizing( border-box );
  41         width: @defaultFormWidth;
  42
  43         // MW currently doesn't use the type attribute everywhere on inputs.
  44         select,
  45         .mw-ui-button {
  46                 display: block;
  47                 .box-sizing( border-box );
  48                 margin: 0;
  49                 width: 100%;
  50         }
  51
  52         // Give dropdown lists the same spacing as input fields for consistency.
  53         // Values taken from .agora-field-styling() in mixins/form.less
  54         select {
  55                 padding: 0.35em 0.5em;
  56                 vertical-align: middle;
  57         }
  58
  59         > label {
  60                 display: block;
  61                 color: @colorText;
  62                 .box-sizing( border-box );
  63                 width: auto;
  64                 margin: 0 0 0.2em;
  65                 padding: 0;
  66                 font-size: 0.9em;
  67
  68                 * {
  69                         font-weight: normal;
  70                 }
  71         }
  72
  73         // Override input styling just for checkboxes and radio inputs.
  74         input[ type='radio' ] {
  75                 display: inline;
  76                 .box-sizing( content-box );
  77                 width: auto;
  78         }
  79
  80         // Styles for information boxes
  81         //
  82         // Regular HTMLForm uses .error class, some special pages like
  83         // SpecialUserlogin (login and create account) use .errorbox.
  84         //
  85         // Markup:
  86         // <form class="mw-ui-vform">
  87         //   <div class="errorbox">
  88         //     <ul><li>An error occurred. There are problems with some of your input.</li></ul>
  89         //   </div>
  90         //   <div class="warningbox">A warning to be noted</div>
  91         //   <div class="successbox">Action successful!</div>
  92         //   <div class="mw-ui-vform-field">
  93         //     <input type="text" value="input" class="mw-ui-input">
  94         //   </div>
  95         //   <div class="mw-ui-vform-field">
  96         //     <select>
  97         //       <option value="1">Option 1</option>
  98         //       <option value="2">Option 2</option>
  99         //     </select>
 100         //     <span class="error">The value you specified is not a valid option.</span>
 101         //   </div>
 102         //   <div class="mw-ui-vform-field">
 103         //     <button class="mw-ui-button">Button in vform</button>
 104         //   </div>
 105         // </form>
 106         //
 107         // Styleguide 5.2.
 108         .errorbox,
 109         .warningbox,
 110         .successbox {
 111                 .box-sizing( border-box );
 112                 font-size: 0.9em;
 113                 margin: 0 0 1em 0;
 114                 padding: 0.5em 1em;
 115                 word-wrap: break-word;
 116         }
 117
 118         // This specifies styling for individual field validation error messages.
 119         // Show them below the fields to prevent line break glitches, and leave
 120         // some space between the field and the error message box.
 121         .mw-ui-vform-field {
 122                 .errorbox,
 123                 .warningbox {
 124                         margin-top: 5px;
 125                 }
 126         }
 127 }
 128
 129 // --------------------------------------------------------------------------
 130 // Elements
 131 // --------------------------------------------------------------------------
 132
 133 // A wrapper for a single form field: the <input> / <select> / <button> element,
 134 // help text, labels, associated error/warning/success messages, and so on.
 135 // Elements with this class are generated by HTMLFormField in core MediaWiki.
 136 //
 137 // (We use a broad definition of 'field' here: a purely textual information
 138 // block is also a "field".)
 139 .mw-ui-vform-field {
 140         display: block;
 141         margin: 0 0 15px;
 142         padding: 0;
 143         width: 100%;
 144 }
 145
 146 // Apply mw-ui-label to individual elements to style them.
 147 // You generally don't need to use this class if <label> is within an Agora
 148 // form container such as mw-ui-vform
 149 .mw-ui-label {
 150         color: @colorText;
 151         font-size: 0.9em;
 152
 153         * {
 154                 font-weight: normal;
 155         }
 156 }