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

   1 // Form elements and layouts
   2
   3 @import "mediawiki.mixins";
   4 @import "../../mixins/utilities";
   5 @import "../../mixins/forms";
   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 3.
  19
  20 // VForm
  21 //
  22 // Style a compact vertical stacked form ("VForm") and the elements in divs
  23 // within it. See button section on guidance of how and when to use mw-ui-constructive.
  24 //
  25 // Markup:
  26 // <form class="mw-ui-vform">
  27 //   <div class="mw-ui-vform-div">This is a form example.</div>
  28 //   <div class="mw-ui-vform-div">
  29 //     <label>Username </label>
  30 //     <input value="input">
  31 //   </div>
  32 //   <div>
  33 //     <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
  34 //   </div>
  35 // </form>
  36 //
  37 // Styleguide 3.1.
  38 .mw-ui-vform {
  39         .box-sizing(border-box);
  40
  41         width: @defaultFormWidth;
  42
  43         // Immediate divs in a vform are block and spaced-out.
  44         // XXX: We shouldn't depend on the tag name here...
  45         & > div {
  46                 display: block;
  47                 margin: 0 0 15px 0;
  48                 padding: 0;
  49                 width: 100%;
  50         }
  51
  52         // MW currently doesn't use the type attribute everywhere on inputs.
  53         input,
  54         select,
  55         .mw-ui-button {
  56                 display: block;
  57                 .box-sizing(border-box);
  58                 margin: 0;
  59                 width: 100%;
  60         }
  61
  62         // We exclude buttons because they'll generally use mw-ui-button.
  63         // Otherwise, we'll unintentionally override that.
  64         input:not([type=button]):not([type=submit]):not([type=file]) {
  65                 .agora-field-styling(); // mixins/forms.less
  66         }
  67
  68         // Give dropdown lists the same spacing as input fields for consistency.
  69         // Values taken from .agora-field-styling() in mixins/form.less
  70         select {
  71                 padding: 0.35em 0.5em 0.35em 0.5em;
  72                 vertical-align: middle;
  73         }
  74
  75         label {
  76                 display: block;
  77                 .box-sizing(border-box);
  78                 .agora-label-styling();
  79                 width: auto;
  80                 margin: 0 0 0.2em;
  81                 padding: 0;
  82         }
  83
  84         // Override input styling just for checkboxes and radio inputs.
  85         input[type="checkbox"],
  86         input[type="radio"] {
  87                 display: inline;
  88                 .box-sizing(content-box);
  89                 width: auto;
  90         }
  91
  92
  93         // Styles for information boxes
  94         //
  95         // Regular HTMLForm uses .error class, some special pages like
  96         // SpecialUserlogin (login and create account) use .errorbox.
  97         //
  98         // Markup:
  99         // <form class="mw-ui-vform">
 100         //   <div class="errorbox">An error occurred</div>
 101         //   <div class="warningbox">A warning to be noted</div>
 102         //   <div class="successbox">Action successful!</div>
 103         //   <div class="error">A different kind of error</div>
 104         //   <div class="error">
 105         //     <ul><li>There are problems with some of your input.</li></ul>
 106         //   </div>
 107         //   <div class="mw-ui-vform-div">
 108         //     <input type="text" value="input" class="mw-ui-input">
 109         //   </div>
 110         //   <div class="mw-ui-vform-div">
 111         //     <select>
 112         //       <option value="1">Option 1</option>
 113         //       <option value="2">Option 2</option>
 114         //     </select>
 115         //     <span class="error">The value you specified is not a valid option.</span>
 116         //   </div>
 117         //   <div>
 118         //     <button class="mw-ui-button">Button in vform</button>
 119         //   </div>
 120         // </form>
 121         //
 122         // Styleguide 3.1.
 123         .error,
 124         .errorbox,
 125         .warningbox,
 126         .successbox {
 127                 .box-sizing(border-box);
 128                 font-size: 0.9em;
 129                 margin: 0 0 1em 0;
 130                 padding: 0.5em;
 131                 word-wrap: break-word;
 132         }
 133
 134         // Colours taken from those for .errorbox in skins/common/shared.css
 135         .error {
 136                 color: #cc0000;
 137                 border: 1px solid #fac5c5;
 138                 background-color: #fae3e3;
 139                 text-shadow: 0 1px #fae3e3;
 140         }
 141
 142         // This specifies styling for individual field validation error messages.
 143         // Show them below the fields to prevent line break glitches, and leave
 144         // some space between the field and the error message box.
 145         .mw-ui-vform-div .error {
 146                 display: block;
 147                 margin-top: 5px;
 148         }
 149
 150 }
 151
 152 // --------------------------------------------------------------------------
 153 // Elements
 154 // --------------------------------------------------------------------------
 155
 156 // Apply this to individual elements to style them.
 157 // You generally don't need to use this class on divs within an Agora
 158 // form container such as mw-ui-vform
 159 // XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
 160 // XXX: What is this even for?
 161 .mw-ui-vform-div {
 162         display: block;
 163         margin: 0 0 15px;
 164         padding: 0;
 165         width: 100%;
 166 }
 167
 168 // Apply mw-ui-input to individual input fields to style them.
 169 // You generally don't need to use this class if <input> is within an Agora
 170 // form container such as mw-ui-vform
 171 .mw-ui-input {
 172         .agora-field-styling(); // mixins/forms.less
 173 }
 174
 175 // Apply mw-ui-label to individual elements to style them.
 176 // You generally don't need to use this class if <label> is within an Agora
 177 // form container such as mw-ui-vform
 178 .mw-ui-label {
 179         .agora-label-styling(); // mixins/forms.less
 180 }
 181
 182 // Nesting an input checkbox or radio button inside a label with this class
 183 // improves alignment, e.g.
 184 //      <label class="mw-ui-checkbox-label">
 185 //              <input type="checkbox">The label text
 186 //      </label>
 187 .mw-ui-checkbox-label, .mw-ui-radio-label {
 188         .agora-inline-label-styling();
 189 }