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

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