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