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