1 @import "mediawiki.mixins";
2 @import "mediawiki.ui/variables";
5 .mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
9 .background-image-svg(@iconSvg, @iconPng);
16 // To use icons you must be using a browser that supports pseudo elements.
17 // This includes support for IE8.
18 // http://caniuse.com/#feat=css-gencontent
20 // For elements that are intended to have both an icon and text, browsers that
21 // do not support pseudo-selectors will degrade to text-only.
23 // However, icon-only elements do not yet degrade to text-only elements in these
30 min-height: @iconSize;
36 // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br/>
37 // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br/>
38 // <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button>
41 &.mw-ui-icon-element {
42 @width: @iconSize + ( 2 * @iconGutterWidth );
53 margin: 0 @iconGutterWidth;
57 &.mw-ui-icon-after:after,
58 &.mw-ui-icon-before:before,
59 &.mw-ui-icon-element:before {
60 background-position: 50% 50%;
63 background-repeat: no-repeat;
64 background-size: 100% auto;
65 min-height: @iconSize;
73 // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
74 // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
81 margin-right: @iconGutterWidth;
85 // Icons with text before
88 // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
96 margin-left: @iconGutterWidth;
103 .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');