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     & > div {
  20         display: block;
  21         margin: 0 0 15px 0;
  22         padding: 0;
  23         width: 100%;
  24
  25         // MW currently doesn't use the type attribute everywhere on inputs.
  26         input,
  27         label,
  28         .mw-ui-button {
  29             display: block;
  30             @include box-sizing(border-box);
  31             margin: 0;
  32             width: 100%;
  33         }
  34
  35         input {
  36             @include agora-field-styling; // mixins/_forms.scss
  37         }
  38
  39         label {
  40             @include agora-label-styling;
  41
  42             width: auto;
  43             margin: 0 0 0.2em 0;
  44             padding: 0;
  45         }
  46
  47         // Override input styling just for checkboxes and radio inputs.
  48         input[type="checkbox"],
  49         input[type="radio"] {
  50             display: inline;
  51             @include box-sizing(content-box);
  52             width: auto;
  53         }
  54
  55     }
  56 }
  57
  58 // --------------------------------------------------------------------------
  59 // Elements
  60 // --------------------------------------------------------------------------
  61
  62 // Apply mw-ui-input to individual input fields to style them.
  63 // You generally don't need to use this class if <input> is within an Agora
  64 // form container such as mw-ui-vform
  65 .mw-ui-input {
  66     @include agora-field-styling; // mixins/_forms.scss
  67 }
  68
  69 // Apply mw-ui-label to individual elements to style them.
  70 // You generally don't need to use this class if <label> is within an Agora
  71 // form container such as mw-ui-vform
  72 .mw-ui-label {
  73     @include agora-label-styling; // mixins/_forms.scss
  74 }
  75
  76 // Nesting an input checkbox or radio button inside a label with this class
  77 // improves alignment, e.g.
  78 //   <label class="mw-ui-checkbox-label">
  79 //       <input type="checkbox">The label text
  80 //   </label>
  81 .mw-ui-checkbox-label, .mw-ui-radio-label {
  82     @include agora-inline-label-styling;
  83 }