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
|
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@import "mediawiki.ui/mixins";
// Helpers
.mw-ui-anchor( @mainColor ) {
// Make all context classes take the main color in IE6
.select-ie6-only& {
&:link, &:visited, &:hover, &:focus, &:active {
color: @mainColor;
}
}
// Hover state
&:hover {
color: lighten( @mainColor, @colorLightenPercentage );
}
// Focus and active states
&:focus, &:active {
color: darken( @mainColor, @colorDarkenPercentage );
outline: none; // outline fix
}
color: @mainColor;
// Quiet mode is gray at first
&.mw-ui-quiet {
.mw-ui-anchor-quiet( @mainColor );
}
}
.mw-ui-anchor-quiet( @mainColor ) {
color: @colorTextLight;
text-decoration: none;
&:hover {
color: @mainColor;
}
&:focus, &:active {
color: darken( @mainColor, @colorDarkenPercentage );
}
}
/*
Text & Anchors
Allows you to give text a context as to the type of action it is indicating.
Styleguide 6.
*/
/*
Guidelines
This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context.
Markup:
<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
.mw-ui-quiet - Quiet until interaction.
Styleguide 6.1.
*/
.mw-ui-progressive {
.mw-ui-anchor( @colorProgressive );
}
.mw-ui-constructive {
.mw-ui-anchor( @colorConstructive );
}
.mw-ui-destructive {
.mw-ui-anchor( @colorDestructive );
}
.mw-ui-quiet {
.mw-ui-anchor-quiet( @colorTextLight );
}
|
