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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
// Form elements and layouts
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@import "mediawiki.ui/mixins";
// --------------------------------------------------------------------------
// Layouts
// --------------------------------------------------------------------------
// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the
// 'VForm' design, the form can't be narrower than this.
@captchaContainerWidth: 290px;
@defaultFormWidth: @captchaContainerWidth;
// Forms
//
// Styleguide 5.
// VForm
//
// Style a compact vertical stacked form ("VForm") and the elements in divs
// within it. See button and inputs section on guidance of how and when to use them.
//
// Markup:
// <form class="mw-ui-vform">
// <div class="mw-ui-vform-field">This is a form example.</div>
// <div class="mw-ui-vform-field">
// <label>Username </label>
// <input class="mw-ui-input" value="input">
// </div>
// <div class="mw-ui-vform-field">
// <button class="mw-ui-button mw-ui-constructive">Button in vform</button>
// </div>
// </form>
//
// Styleguide 5.1.
.mw-ui-vform {
.box-sizing(border-box);
width: @defaultFormWidth;
// MW currently doesn't use the type attribute everywhere on inputs.
select,
.mw-ui-button {
display: block;
.box-sizing(border-box);
margin: 0;
width: 100%;
}
// Give dropdown lists the same spacing as input fields for consistency.
// Values taken from .agora-field-styling() in mixins/form.less
select {
padding: 0.35em 0.5em 0.35em 0.5em;
vertical-align: middle;
}
> label {
display: block;
.box-sizing(border-box);
.agora-label-styling();
width: auto;
margin: 0 0 0.2em;
padding: 0;
}
// Override input styling just for checkboxes and radio inputs.
input[type="radio"] {
display: inline;
.box-sizing(content-box);
width: auto;
}
// Styles for information boxes
//
// Regular HTMLForm uses .error class, some special pages like
// SpecialUserlogin (login and create account) use .errorbox.
//
// Markup:
// <form class="mw-ui-vform">
// <div class="errorbox">An error occurred</div>
// <div class="warningbox">A warning to be noted</div>
// <div class="successbox">Action successful!</div>
// <div class="error">A different kind of error</div>
// <div class="error">
// <ul><li>There are problems with some of your input.</li></ul>
// </div>
// <div class="mw-ui-vform-field">
// <input type="text" value="input" class="mw-ui-input">
// </div>
// <div class="mw-ui-vform-field">
// <select>
// <option value="1">Option 1</option>
// <option value="2">Option 2</option>
// </select>
// <span class="error">The value you specified is not a valid option.</span>
// </div>
// <div class="mw-ui-vform-field">
// <button class="mw-ui-button">Button in vform</button>
// </div>
// </form>
//
// Styleguide 5.2.
.error,
.errorbox,
.warningbox,
.successbox {
.box-sizing(border-box);
font-size: 0.9em;
margin: 0 0 1em 0;
padding: 0.5em;
word-wrap: break-word;
}
// Colours taken from those for .errorbox in shared.css
.error {
color: #cc0000;
border: 1px solid #fac5c5;
background-color: #fae3e3;
text-shadow: 0 1px #fae3e3;
}
// This specifies styling for individual field validation error messages.
// Show them below the fields to prevent line break glitches, and leave
// some space between the field and the error message box.
.mw-ui-vform-field .error {
display: block;
margin-top: 5px;
}
}
// --------------------------------------------------------------------------
// Elements
// --------------------------------------------------------------------------
// A wrapper for a single form field: the <input> / <select> / <button> element,
// help text, labels, associated error/warning/success messages, and so on.
// Elements with this class are generated by HTMLFormField in core MediaWiki.
//
// (We use a broad definition of 'field' here: a purely textual information
// block is also a "field".)
.mw-ui-vform-field {
display: block;
margin: 0 0 15px;
padding: 0;
width: 100%;
}
// Apply mw-ui-label to individual elements to style them.
// You generally don't need to use this class if <label> is within an Agora
// form container such as mw-ui-vform
.mw-ui-label {
.agora-label-styling();
}
// Nesting an input inside a label with this class
// improves alignment, e.g.
//
// <label class="mw-ui-radio-label">
// <input type="radio">The label text
// </label>
.mw-ui-radio-label {
.agora-inline-label-styling();
}
|
