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

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