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