1@import 'mediawiki.mixins.less'; 2@import 'mediawiki.ui/variables.less'; 3 4// mediawiki.ui icon specific variables 5@margin-icon: 2 * @width-icon-gutter; 6@width-icon--legacy: @size-icon + @margin-icon; 7@size-icon--large: ( @size-icon * 1.75) + @margin-icon; 8 9// Mixins 10.mixin-mw-ui-icon-bgimage( @iconSvg, @iconPng ) { 11 &.mw-ui-icon { 12 &:before { 13 .background-image-svg( @iconSvg, @iconPng ); 14 } 15 } 16} 17 18// Icons 19// 20// To use icons you must be using a browser that supports pseudo elements. 21// https://caniuse.com/#feat=css-gencontent 22// 23// For elements that are intended to have both an icon and text, browsers that 24// do not support pseudo-selectors will degrade to text-only. 25// 26// However, icon-only elements do not yet degrade to text-only elements in these 27// browsers. 28 29.mw-ui-icon { 30 position: relative; 31 line-height: @size-icon; 32 min-height: @size-icon; 33 min-width: @size-icon; 34 35 // If an inline element has been marked as a mw-ui-icon element it must be inline-block 36 span& { 37 display: inline-block; 38 } 39 40 // Standalone icons 41 // 42 // Markup: 43 // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br> 44 // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br> 45 // <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 text-indent: -999px; 48 overflow: hidden; 49 width: @width-icon--legacy; 50 min-width: @width-icon--legacy; 51 max-width: @width-icon--legacy; 52 53 &:before { 54 left: 0; 55 right: 0; 56 position: absolute; 57 margin: 0 @width-icon-gutter; 58 } 59 60 &.mw-ui-icon-large { 61 width: @size-icon--large; 62 min-width: @size-icon--large; 63 max-width: @size-icon--large; 64 line-height: @size-icon--large; 65 min-height: @size-icon--large; 66 67 &:before { 68 min-height: @size-icon--large; 69 } 70 } 71 } 72 73 &.mw-ui-icon-before:before, 74 &.mw-ui-icon-element:before { 75 background-position: 50% 50%; 76 background-repeat: no-repeat; 77 background-size: 100% auto; 78 float: left; 79 display: block; 80 min-height: @size-icon; 81 content: ''; 82 } 83 84 // Icons with text 85 // 86 // Markup: 87 // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div> 88 // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div> 89 &.mw-ui-icon-before { 90 &:before { 91 position: relative; 92 width: @size-icon; 93 margin-right: @width-icon-gutter; 94 } 95 } 96 97 // Icons small for elements like indicators 98 // 99 // Markup: 100 // <div class="mw-ui-icon mw-ui-icon-small mw-ui-icon-help"></div> 101 &.mw-ui-icon-small:before { 102 background-size: 66.67% auto; // 66.67% of 24px equals 16px 103 } 104} 105