[Summary view] [Print] [Text view]

   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 3.
  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-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      // 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 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  
  76      // Styles for information boxes
  77      //
  78      // Regular HTMLForm uses .error class, some special pages like
  79      // SpecialUserlogin (login and create account) use .errorbox.
  80      //
  81      // Markup:
  82      // <form class="mw-ui-vform">
  83      //   <div class="errorbox">An error occurred</div>
  84      //   <div class="warningbox">A warning to be noted</div>
  85      //   <div class="successbox">Action successful!</div>
  86      //   <div class="error">A different kind of error</div>
  87      //   <div class="error">
  88      //     <ul><li>There are problems with some of your input.</li></ul>
  89      //   </div>
  90      //   <div class="mw-ui-vform-field">
  91      //     <input type="text" value="input" class="mw-ui-input">
  92      //   </div>
  93      //   <div class="mw-ui-vform-field">
  94      //     <select>
  95      //       <option value="1">Option 1</option>
  96      //       <option value="2">Option 2</option>
  97      //     </select>
  98      //     <span class="error">The value you specified is not a valid option.</span>
  99      //   </div>
 100      //   <div class="mw-ui-vform-field">
 101      //     <button class="mw-ui-button">Button in vform</button>
 102      //   </div>
 103      // </form>
 104      //
 105      // Styleguide 3.2.
 106      .error,
 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: #cc0000;
 120          border: 1px solid #fac5c5;
 121          background-color: #fae3e3;
 122          text-shadow: 0 1px #fae3e3;
 123      }
 124  
 125      // This specifies styling for individual field validation error messages.
 126      // Show them below the fields to prevent line break glitches, and leave
 127      // some space between the field and the error message box.
 128      .mw-ui-vform-field .error {
 129          display: block;
 130          margin-top: 5px;
 131      }
 132  
 133  }
 134  
 135  // --------------------------------------------------------------------------
 136  // Elements
 137  // --------------------------------------------------------------------------
 138  
 139  // A wrapper for a single form field: the <input> / <select> / <button> element,
 140  // help text, labels, associated error/warning/success messages, and so on.
 141  // Elements with this class are generated by HTMLFormField in core MediaWiki.
 142  //
 143  // (We use a broad definition of 'field' here: a purely textual information
 144  // block is also a "field".)
 145  .mw-ui-vform-field {
 146      display: block;
 147      margin: 0 0 15px;
 148      padding: 0;
 149      width: 100%;
 150  }
 151  
 152  // Apply mw-ui-label to individual elements to style them.
 153  // You generally don't need to use this class if <label> is within an Agora
 154  // form container such as mw-ui-vform
 155  .mw-ui-label {
 156      .agora-label-styling(); // mixins/forms.less
 157  }
 158  
 159  // Nesting an input  inside a label with this class
 160  // improves alignment, e.g.
 161  //    <label class="mw-ui-radio-label">
 162  //        <input type="radio">The label text
 163  //    </label>
 164  .mw-ui-radio-label {
 165      .agora-inline-label-styling();
 166  }