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