1 @import 'mediawiki.mixins';
2 @import 'mediawiki.ui/variables';
5 .mixin-mw-ui-icon-bgimage( @iconSvg, @iconPng ) {
8 .background-image-svg( @iconSvg, @iconPng );
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
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.
22 // However, icon-only elements do not yet degrade to text-only elements in these
29 line-height: @iconSize;
30 min-height: @iconSize;
33 // If an inline element has been marked as a mw-ui-icon element it must be inline-block
35 display: inline-block;
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>
46 &.mw-ui-icon-element {
47 @marginIcon: 2 * @iconGutterWidth;
48 @width: @iconSize + @marginIcon;
49 @sizeIconLarge: ( @iconSize * 1.75) + @marginIcon;
60 margin: 0 @iconGutterWidth;
64 width: @sizeIconLarge;
65 min-width: @sizeIconLarge;
66 max-width: @sizeIconLarge;
67 line-height: @sizeIconLarge;
68 min-height: @sizeIconLarge;
71 min-height: @sizeIconLarge;
76 &.mw-ui-icon-before:before,
77 &.mw-ui-icon-element:before {
78 background-position: 50% 50%;
79 background-repeat: no-repeat;
80 background-size: 100% auto;
83 min-height: @iconSize;
90 // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
91 // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
98 margin-right: @iconGutterWidth;
102 // Icons small for elements like indicators
105 // <div class="mw-ui-icon mw-ui-icon-small mw-ui-icon-help"></div>
108 &.mw-ui-icon-small:before {
109 background-size: 66.67% auto; // 66.67% of 24px equals 16px