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

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