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

   1 @import "mediawiki.mixins";
   2
   3 // Variables
   4 @iconSize: 1.4em;
   5 @gutterWidth: 1em;
   6
   7 // Mixins
   8 .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
   9         &.mw-ui-icon:before {
  10                 .background-image-svg(@iconSvg, @iconPng);
  11         }
  12 }
  13
  14 // Icons
  15 //
  16 // To use icons you must be using a browser that supports pseudo elements.
  17 // This includes support for IE8.
  18 // http://caniuse.com/#feat=css-gencontent
  19 // Browsers that do not support either of these selectors will degrade to text only.
  20 //
  21 // Styleguide 4.
  22
  23 .mw-ui-icon {
  24         position: relative;
  25         min-height: @iconSize;
  26
  27         // Standalone icons
  28         //
  29         // Markup:
  30         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
  31         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
  32         //
  33         // Styleguide 4.1.1.
  34         &.mw-ui-icon-element {
  35                 @width: @iconSize + ( 2 * @gutterWidth );
  36
  37                 text-indent: -999px;
  38                 overflow: hidden;
  39                 width: @width;
  40                 min-width: @width;
  41                 max-width: @width;
  42                 &:before {
  43                         left: 0;
  44                         right: 0;
  45                         position: absolute;
  46                         margin: 0 @gutterWidth;
  47                 }
  48         }
  49
  50         &:before {
  51                 background-position: 50% 50%;
  52                 float: left;
  53                 display: block;
  54                 background-repeat: no-repeat;
  55                 background-size: 100% auto;
  56                 position: relative;
  57                 min-height: @iconSize;
  58                 content: '';
  59         }
  60
  61
  62         // Icons with text
  63         //
  64         // Markup:
  65         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
  66         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  67         //
  68         // Styleguide 4.1.2
  69         &.mw-ui-icon-before {
  70                 &:before {
  71                         width: @iconSize;
  72                         margin-right: @gutterWidth;
  73                 }
  74         }
  75 }
  76
  77 // Icons
  78 .mw-ui-icon-ok {
  79         .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
  80 }