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

   1 @import "mediawiki.mixins";
   2 @import "mediawiki.ui/variables";
   3
   4 // Mixins
   5 .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
   6         &.mw-ui-icon {
   7                 &:after,
   8                 &:before {
   9                         .background-image-svg(@iconSvg, @iconPng);
  10                 }
  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 //
  20 // For elements that are intended to have both an icon and text, browsers that
  21 // do not support pseudo-selectors will degrade to text-only.
  22 //
  23 // However, icon-only elements do not yet degrade to text-only elements in these
  24 // browsers.
  25 //
  26 // Styleguide 6.
  27
  28 .mw-ui-icon {
  29         position: relative;
  30         min-height: @iconSize;
  31         min-width: @iconSize;
  32
  33         // Standalone icons
  34         //
  35         // Markup:
  36         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br/>
  37         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br/>
  38         // <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button>
  39         //
  40         // Styleguide 6.1.1.
  41         &.mw-ui-icon-element {
  42                 @width: @iconSize + ( 2 * @iconGutterWidth );
  43
  44                 text-indent: -999px;
  45                 overflow: hidden;
  46                 width: @width;
  47                 min-width: @width;
  48                 max-width: @width;
  49                 &:before {
  50                         left: 0;
  51                         right: 0;
  52                         position: absolute;
  53                         margin: 0 @iconGutterWidth;
  54                 }
  55         }
  56
  57         &.mw-ui-icon-after:after,
  58         &.mw-ui-icon-before:before,
  59         &.mw-ui-icon-element:before {
  60                 background-position: 50% 50%;
  61                 float: left;
  62                 display: block;
  63                 background-repeat: no-repeat;
  64                 background-size: 100% auto;
  65                 min-height: @iconSize;
  66                 content: '';
  67         }
  68
  69
  70         // Icons with text
  71         //
  72         // Markup:
  73         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
  74         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  75         //
  76         // Styleguide 6.1.2
  77         &.mw-ui-icon-before {
  78                 &:before {
  79                         position: relative;
  80                         width: @iconSize;
  81                         margin-right: @iconGutterWidth;
  82                 }
  83         }
  84
  85         // Icons with text before
  86         //
  87         // Markup:
  88         // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  89         //
  90         // Styleguide 6.1.3
  91         &.mw-ui-icon-after {
  92                 &:after {
  93                         position: relative;
  94                         float: right;
  95                         width: @iconSize;
  96                         margin-left: @iconGutterWidth;
  97                 }
  98         }
  99 }
 100
 101 // Icons
 102 .mw-ui-icon-ok {
 103         .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
 104 }