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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
// ----------------------------------------------------------------------------
// Form styling mixins
// ----------------------------------------------------------------------------
.agora-label-styling() {
font-size: 0.9em;
color: @colorText;
* {
font-weight: normal;
}
}
.agora-inline-label-styling() {
margin-bottom: 0.5em;
cursor: pointer;
vertical-align: bottom;
line-height: normal;
font-weight: normal;
& > input[ type='checkbox' ],
& > input[ type='radio' ] {
width: auto;
height: auto;
margin: 0 0.1em 0 0;
padding: 0;
border: 1px solid @colorGray7;
cursor: pointer;
}
}
// ----------------------------------------------------------------------------
// Button styling
// ----------------------------------------------------------------------------
.button-colors( @bgColor, @highlightColor, @activeColor ) {
background-color: @bgColor;
color: @colorButtonText;
border: 1px solid @colorFieldBorder;
// Make sure that `color` isn't inheriting from user-agent styles
&:visited {
color: @colorButtonText;
}
&:hover {
background-color: @highlightColor;
color: @colorGray4;
border-color: @colorGray10;
}
&:focus {
background-color: @highlightColor;
// Make sure that `color` isn't inheriting from user-agent styles
color: @colorButtonText;
border-color: @colorProgressive;
box-shadow: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px #fff;
}
&:active,
&.is-on,
&.mw-ui-checked {
background-color: @activeColor;
color: @colorGray1;
border-color: @colorGray7;
box-shadow: none;
}
&:disabled {
background-color: @colorGray12;
color: #fff;
border-color: @colorGray12;
// Make sure disabled buttons don't have hover and active states
&:hover,
&:active {
background-color: @colorGray12;
color: #fff;
box-shadow: none;
border-color: @colorGray12;
}
}
}
.button-colors-primary( @bgColor, @highlightColor, @activeColor ) {
background-color: @bgColor;
color: #fff;
// border of the same color as background so that light background and
// dark background buttons are the same height and width
border: 1px solid @bgColor;
&:hover {
background-color: @highlightColor;
border-color: @highlightColor;
}
&:focus {
box-shadow: inset 0 0 0 1px @bgColor, inset 0 0 0 2px #fff;
}
&:active,
&.is-on,
&.mw-ui-checked {
background-color: @activeColor;
border-color: @activeColor;
box-shadow: none;
}
&:disabled {
background-color: @colorGray12;
color: #fff;
border-color: @colorGray12;
// Make sure disabled buttons don't have hover and active states
&:hover,
&:active,
&.mw-ui-checked {
background-color: @colorGray12;
color: #fff;
border-color: @colorGray12;
box-shadow: none;
}
}
}
.button-colors-quiet( @textColor, @highlightColor, @activeColor ) {
// Quiet buttons all start gray, and reveal
// progressive/destructive color on hover and active.
color: @colorButtonText;
&:hover {
background-color: transparent;
color: @highlightColor;
}
&:active,
&.mw-ui-checked {
color: @activeColor;
}
&:focus {
background-color: transparent;
color: @textColor;
}
&:disabled {
color: @colorDisabledText;
}
}
|
