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 // Browsers that do not support either of these selectors will degrade to text only.
  23 //
  24 // Styleguide 4.
  25
  26 .mw-ui-icon {
  27         position: relative;
  28         min-height: @iconSize;
  29         min-width: @iconSize;
  30
  31         // Standalone icons
  32         //
  33         // Markup:
  34         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
  35         // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
  36         //
  37         // Styleguide 4.1.1.
  38         &.mw-ui-icon-element {
  39                 @width: @iconSize + ( 2 * @gutterWidth );
  40
  41                 text-indent: -999px;
  42                 overflow: hidden;
  43                 width: @width;
  44                 min-width: @width;
  45                 max-width: @width;
  46                 &:before {
  47                         left: 0;
  48                         right: 0;
  49                         position: absolute;
  50                         margin: 0 @gutterWidth;
  51                 }
  52         }
  53
  54         &.mw-ui-icon-after:after,
  55         &.mw-ui-icon-before:before,
  56         &.mw-ui-icon-element:before {
  57                 background-position: 50% 50%;
  58                 float: left;
  59                 display: block;
  60                 background-repeat: no-repeat;
  61                 background-size: 100% auto;
  62                 min-height: @iconSize;
  63                 content: '';
  64         }
  65
  66
  67         // Icons with text
  68         //
  69         // Markup:
  70         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
  71         // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  72         //
  73         // Styleguide 4.1.2
  74         &.mw-ui-icon-before {
  75                 &:before {
  76                         position: relative;
  77                         width: @iconSize;
  78                         margin-right: @gutterWidth;
  79                 }
  80         }
  81
  82         // Icons with text before
  83         //
  84         // Markup:
  85         // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
  86         //
  87         // Styleguide 4.1.3
  88         &.mw-ui-icon-after {
  89                 &:after {
  90                         position: relative;
  91                         float: right;
  92                         width: @iconSize;
  93                         margin-left: @gutterWidth;
  94                 }
  95         }
  96 }
  97
  98 // Icons
  99 .mw-ui-icon-ok {
 100         .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
 101 }