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' stacked div design, the form can't be narrower than this.
   9 $captchaContainerWidth: 290px;
  10 $defaultFormWidth: $captchaContainerWidth;
  11
  12 .mw-ui-vform {
  13     @include box-sizing(border-box);
  14
  15     width: $defaultFormWidth;
  16
  17     & > div {
  18         display: block;
  19         margin: 0 0 15px 0;
  20         padding: 0;
  21         width: 100%;
  22
  23         // MW currently doesn't use the type attribute everywhere on inputs
  24         input,
  25         label,
  26         .mw-ui-button {
  27             display: block;
  28             @include box-sizing(border-box);
  29             margin: 0;
  30             width: 100%;
  31         }
  32
  33         input {
  34             @include agora-field-styling; // mixins/_forms.scss
  35         }
  36
  37         label {
  38             @include agora-label-styling;
  39
  40             width: auto;
  41             margin: 0 0 0.2em 0;
  42             padding: 0;
  43
  44             &.mw-ui-checkbox-label, &.mw-ui-radio-label {
  45                 @include agora-inline-label-styling;
  46             }
  47         }
  48
  49         // Override the above 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 fields individually to style them
  65 // You don't need to use this if <input> is within a Agora form container
  66 .mw-ui-input {
  67     @include agora-field-styling; // mixins/_forms.scss
  68 }
  69
  70 // Default label styling is mw-ui-block-label
  71 .mw-ui-block-label, .mw-ui-formlist div label {
  72     @include agora-label-styling; // mixins/_forms.scss
  73 }
  74
  75 // Checkbox and radio button label alignment hack
  76 //   <label class="mw-ui-checkbox-label">
  77 //       <input type="checkbox" />Label
  78 //   </label>
  79
  80 .mw-ui-checkbox-label, .mw-ui-radio-label {
  81     @include agora-inline-label-styling;
  82 }