resources/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 // Style a compact vertical stacked form ("VForm") and the elements in divs
  16 // within it.
  17 .mw-ui-vform {
  18         .box-sizing(border-box);
  19
  20         width: @defaultFormWidth;
  21
  22         // Immediate divs in a vform are block and spaced-out.
  23         & > div {
  24                 display: block;
  25                 margin: 0 0 15px 0;
  26                 padding: 0;
  27                 width: 100%;
  28
  29                 // MW currently doesn't use the type attribute everywhere on inputs.
  30                 input,
  31                 .mw-ui-button {
  32                         display: block;
  33                         .box-sizing(border-box);
  34                         margin: 0;
  35                         width: 100%;
  36                 }
  37
  38                 // We exclude these because they'll generally use mw-ui-button.
  39                 // Otherwise, we'll unintentionally override that.
  40                 input:not([type=button]):not([type=submit]):not([type=file]), {
  41                         .agora-field-styling(); // mixins/forms.less
  42                 }
  43
  44                 label {
  45                         display: block;
  46                         .box-sizing(border-box);
  47                         .agora-label-styling();
  48                         width: auto;
  49                         margin: 0 0 0.2em 0;
  50                         padding: 0;
  51                 }
  52
  53                 // Override input styling just for checkboxes and radio inputs.
  54                 input[type="checkbox"],
  55                 input[type="radio"] {
  56                         display: inline;
  57                         .box-sizing(content-box);
  58                         width: auto;
  59                 }
  60
  61         }
  62
  63         // HTMLForm uses error, SpecialUserlogin (login and create account) uses
  64         // errorbox.
  65         // TODO move errorbox from mediawiki.special.vforms.css into here.
  66         .error {
  67                 .box-sizing(border-box);
  68                 font-size: 0.9em;
  69                 margin: 0 0 1em 0;
  70                 padding: 0.5em;
  71                 color: #cc0000;
  72                 border: 1px solid #fac5c5;
  73                 background-color: #fae3e3;
  74                 text-shadow: 0 1px #fae3e3;
  75                 word-wrap: break-word;
  76         }
  77 }
  78
  79 // --------------------------------------------------------------------------
  80 // Elements
  81 // --------------------------------------------------------------------------
  82
  83 // Apply this to individual elements to style them.
  84 // You generally don't need to use this class on divs within an Agora
  85 // form container such as mw-ui-vform
  86 // XXX DRY: This repeats earlier styling, use an @include agora-div-styling ?
  87 .mw-ui-vform-div {
  88         display: block;
  89         margin: 0 0 15px 0;
  90         padding: 0;
  91         width: 100%;
  92 }
  93
  94 // Apply mw-ui-input to individual input fields to style them.
  95 // You generally don't need to use this class if <input> is within an Agora
  96 // form container such as mw-ui-vform
  97 .mw-ui-input {
  98         .agora-field-styling(); // mixins/forms.less
  99 }
 100
 101 // Apply mw-ui-label to individual elements to style them.
 102 // You generally don't need to use this class if <label> is within an Agora
 103 // form container such as mw-ui-vform
 104 .mw-ui-label {
 105         .agora-label-styling(); // mixins/forms.less
 106 }
 107
 108 // Nesting an input checkbox or radio button inside a label with this class
 109 // improves alignment, e.g.
 110 //      <label class="mw-ui-checkbox-label">
 111 //              <input type="checkbox">The label text
 112 //      </label>
 113 .mw-ui-checkbox-label, .mw-ui-radio-label {
 114         .agora-inline-label-styling();
 115 }