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 {
  10                 &:after,
  11                 &:before {
  12                         .background-image-svg(@iconSvg, @iconPng);
  13                 }
  14         }
  15 }
  16
  17 // Icons
  18 //
  19 // To use icons you must be using a browser that supports pseudo elements.
  20 // This includes support for IE8.
  21 // http://caniuse.com/#feat=css-gencontent
  22 //
  23 // For elements that are intended to have both an icon and text, browsers that
  24 // do not support pseudo-selectors will degrade to text-only.
  25 //
  26 // However, icon-only elements do not yet degrade to text-only elements in these
  27 // browsers.
  28 //
  29 // Styleguide 4.
  30
  31 .mw-ui-icon {
  32         position: relative;
  33         min-height: @iconSize;
  34         min-width: @iconSize;
  35
  36         // Standalone icons
  37         //
  38         // Markup:
  39         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
  40         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
  41         //
  42         // Styleguide 4.1.1.
  43         &.mw-ui-icon-element {
  44                 @width: @iconSize + ( 2 * @gutterWidth );
  45
  46                 text-indent: -999px;
  47                 overflow: hidden;
  48                 width: @width;
  49                 min-width: @width;
  50                 max-width: @width;
  51                 &:before {
  52                         left: 0;
  53                         right: 0;
  54                         position: absolute;
  55                         margin: 0 @gutterWidth;
  56                 }
  57         }
  58
  59         &.mw-ui-icon-after:after,
  60         &.mw-ui-icon-before:before,
  61         &.mw-ui-icon-element:before {
  62                 background-position: 50% 50%;
  63                 float: left;
  64                 display: block;
  65                 background-repeat: no-repeat;
  66                 background-size: 100% auto;
  67                 min-height: @iconSize;
  68                 content: '';
  69         }
  70
  71
  72         // Icons with text
  73         //
  74         // Markup:
  75         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
  76         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  77         //
  78         // Styleguide 4.1.2
  79         &.mw-ui-icon-before {
  80                 &:before {
  81                         position: relative;
  82                         width: @iconSize;
  83                         margin-right: @gutterWidth;
  84                 }
  85         }
  86
  87         // Icons with text before
  88         //
  89         // Markup:
  90         // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  91         //
  92         // Styleguide 4.1.3
  93         &.mw-ui-icon-after {
  94                 &:after {
  95                         position: relative;
  96                         float: right;
  97                         width: @iconSize;
  98                         margin-left: @gutterWidth;
  99                 }
 100         }
 101 }
 102
 103 // Icons
 104 .mw-ui-icon-ok {
 105         .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
 106 }