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 6.
  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><br/>
  40         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br/>
  41         // <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button>
  42         //
  43         // Styleguide 6.1.1.
  44         &.mw-ui-icon-element {
  45                 @width: @iconSize + ( 2 * @gutterWidth );
  46
  47                 text-indent: -999px;
  48                 overflow: hidden;
  49                 width: @width;
  50                 min-width: @width;
  51                 max-width: @width;
  52                 &:before {
  53                         left: 0;
  54                         right: 0;
  55                         position: absolute;
  56                         margin: 0 @gutterWidth;
  57                 }
  58         }
  59
  60         &.mw-ui-icon-after:after,
  61         &.mw-ui-icon-before:before,
  62         &.mw-ui-icon-element:before {
  63                 background-position: 50% 50%;
  64                 float: left;
  65                 display: block;
  66                 background-repeat: no-repeat;
  67                 background-size: 100% auto;
  68                 min-height: @iconSize;
  69                 content: '';
  70         }
  71
  72
  73         // Icons with text
  74         //
  75         // Markup:
  76         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
  77         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  78         //
  79         // Styleguide 6.1.2
  80         &.mw-ui-icon-before {
  81                 &:before {
  82                         position: relative;
  83                         width: @iconSize;
  84                         margin-right: @gutterWidth;
  85                 }
  86         }
  87
  88         // Icons with text before
  89         //
  90         // Markup:
  91         // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  92         //
  93         // Styleguide 6.1.3
  94         &.mw-ui-icon-after {
  95                 &:after {
  96                         position: relative;
  97                         float: right;
  98                         width: @iconSize;
  99                         margin-left: @gutterWidth;
 100                 }
 101         }
 102 }
 103
 104 // Icons
 105 .mw-ui-icon-ok {
 106         .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
 107 }