1 @import "mediawiki.mixins";
8 .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
12 .background-image-svg(@iconSvg, @iconPng);
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.
28 min-height: @iconSize;
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>
38 &.mw-ui-icon-element {
39 @width: @iconSize + ( 2 * @gutterWidth );
50 margin: 0 @gutterWidth;
54 &.mw-ui-icon-after:after,
55 &.mw-ui-icon-before:before,
56 &.mw-ui-icon-element:before {
57 background-position: 50% 50%;
60 background-repeat: no-repeat;
61 background-size: 100% auto;
62 min-height: @iconSize;
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>
78 margin-right: @gutterWidth;
82 // Icons with text before
85 // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
93 margin-left: @gutterWidth;
100 .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');