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">An error occurred</div>
  88         //   <div class="warningbox">A warning to be noted</div>
  89         //   <div class="successbox">Action successful!</div>
  90         //   <div class="error">A different kind of error</div>
  91         //   <div class="error">
  92         //     <ul><li>There are problems with some of your input.</li></ul>
  93         //   </div>
  94         //   <div class="mw-ui-vform-field">
  95         //     <input type="text" value="input" class="mw-ui-input">
  96         //   </div>
  97         //   <div class="mw-ui-vform-field">
  98         //     <select>
  99         //       <option value="1">Option 1</option>
 100         //       <option value="2">Option 2</option>
 101         //     </select>
 102         //     <span class="error">The value you specified is not a valid option.</span>
 103         //   </div>
 104         //   <div class="mw-ui-vform-field">
 105         //     <button class="mw-ui-button">Button in vform</button>
 106         //   </div>
 107         // </form>
 108         //
 109         // Styleguide 5.2.
 110         .error,
 111         .warning,
 112         .errorbox,
 113         .warningbox,
 114         .successbox {
 115                 .box-sizing( border-box );
 116                 font-size: 0.9em;
 117                 margin: 0 0 1em 0;
 118                 padding: 0.5em 1em;
 119                 word-wrap: break-word;
 120         }
 121
 122         // Colours taken from those for .errorbox in shared.css
 123         .error {
 124                 background-color: @backgroundColorError;
 125                 color: @colorTextEmphasized;
 126                 border: 1px solid @borderColorError;
 127         }
 128
 129         // Colours taken from those for .warningbox in shared.css
 130         .warning {
 131                 background-color: @backgroundColorWarning;
 132                 color: @colorTextEmphasized;
 133                 border: 1px solid @borderColorWarning;
 134         }
 135
 136         // This specifies styling for individual field validation error messages.
 137         // Show them below the fields to prevent line break glitches, and leave
 138         // some space between the field and the error message box.
 139         .mw-ui-vform-field {
 140                 .error,
 141                 .warning {
 142                         display: block;
 143                         margin-top: 5px;
 144                 }
 145         }
 146 }
 147
 148 // --------------------------------------------------------------------------
 149 // Elements
 150 // --------------------------------------------------------------------------
 151
 152 // A wrapper for a single form field: the <input> / <select> / <button> element,
 153 // help text, labels, associated error/warning/success messages, and so on.
 154 // Elements with this class are generated by HTMLFormField in core MediaWiki.
 155 //
 156 // (We use a broad definition of 'field' here: a purely textual information
 157 // block is also a "field".)
 158 .mw-ui-vform-field {
 159         display: block;
 160         margin: 0 0 15px;
 161         padding: 0;
 162         width: 100%;
 163 }
 164
 165 // Apply mw-ui-label to individual elements to style them.
 166 // You generally don't need to use this class if <label> is within an Agora
 167 // form container such as mw-ui-vform
 168 .mw-ui-label {
 169         color: @colorText;
 170         font-size: 0.9em;
 171
 172         * {
 173                 font-weight: normal;
 174         }
 175 }