resources/src/mediawiki.ui/components/utilities.less

   1 // Utilities
   2 //
   3 // Other things which effect the behaviour of components
   4 //
   5 // Styleguide 4.
   6
   7 // Flush left
   8 //
   9 // Used when you want to push an element to the left of its containing element
  10 //
  11 // Markup:
  12 // <div class="mw-ui-vform-field">
  13 //   <label>Username <a href="#" class="mw-ui-flush-left">?</a></label>
  14 //   <input>
  15 // </div>
  16 //
  17 // Styleguide 4.1.
  18 .mw-ui-flush-left {
  19         float: left;
  20         margin-left: 0;
  21         padding-left: 0;
  22 }
  23
  24 // Flush right
  25 //
  26 // Used when you want to push an element to the right of its containing element
  27 //
  28 // Markup:
  29 // <div class="mw-ui-vform-field">
  30 //   <label>Username <a href="#" class="mw-ui-flush-right">?</a></label>
  31 //   <input>
  32 // </div>
  33 //
  34 // Styleguide 4.2.
  35 .mw-ui-flush-right {
  36         float: right;
  37         padding-right: 0;
  38         margin-right: 0;
  39 }
  40
  41 // Center block
  42 //
  43 // Centers the element in its containing element
  44 //
  45 // Markup:
  46 // <div>
  47 //   <button class="mw-ui-center-block">click me</button>
  48 // </div>
  49 //
  50 // Styleguide 4.3.
  51 .mw-ui-center-block {
  52         display: block;
  53         margin-left: auto;
  54         margin-right: auto;
  55 }