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 // https://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         line-height: @iconSize;
  30         min-height: @iconSize;
  31         min-width: @iconSize;
  32
  33         // If an inline element has been marked as a mw-ui-icon element it must be inline-block
  34         span& {
  35                 display: inline-block;
  36         }
  37
  38         // Standalone icons
  39         //
  40         // Markup:
  41         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br>
  42         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br>
  43         // <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button>
  44         //
  45         // Styleguide 6.1.1.
  46         &.mw-ui-icon-element {
  47                 @marginIcon: 2 * @iconGutterWidth;
  48                 @width: @iconSize + @marginIcon;
  49                 @sizeIconLarge: ( @iconSize * 1.75) + @marginIcon;
  50
  51                 text-indent: -999px;
  52                 overflow: hidden;
  53                 width: @width;
  54                 min-width: @width;
  55                 max-width: @width;
  56
  57                 &:before {
  58                         left: 0;
  59                         right: 0;
  60                         position: absolute;
  61                         margin: 0 @iconGutterWidth;
  62                 }
  63
  64                 &.mw-ui-icon-large {
  65                         width: @sizeIconLarge;
  66                         min-width: @sizeIconLarge;
  67                         max-width: @sizeIconLarge;
  68                         line-height: @sizeIconLarge;
  69                         min-height: @sizeIconLarge;
  70
  71                         &:before {
  72                                 min-height: @sizeIconLarge;
  73                         }
  74                 }
  75         }
  76
  77         &.mw-ui-icon-before:before,
  78         &.mw-ui-icon-element:before {
  79                 background-position: 50% 50%;
  80                 background-repeat: no-repeat;
  81                 background-size: 100% auto;
  82                 float: left;
  83                 display: block;
  84                 min-height: @iconSize;
  85                 content: '';
  86         }
  87
  88         // Icons with text
  89         //
  90         // Markup:
  91         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
  92         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  93         //
  94         // Styleguide 6.1.2
  95         &.mw-ui-icon-before {
  96                 &:before {
  97                         position: relative;
  98                         width: @iconSize;
  99                         margin-right: @iconGutterWidth;
 100                 }
 101         }
 102
 103         // Icons small for elements like indicators
 104         //
 105         // Markup:
 106         // <div class="mw-ui-icon mw-ui-icon-small mw-ui-icon-help"></div>
 107         //
 108         // Styleguide 6.1.3
 109         &.mw-ui-icon-small:before {
 110                 background-size: 66.67% auto; // 66.67% of 24px equals 16px
 111         }
 112 }