resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss

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