Merge branch 'MDL-41379_outcomes' of https://github.com/andyjdavis/moodle
[moodle.git] / theme / bootstrapbase / less / moodle / forms.less
CommitLineData
8903b17b
BB
1/**
2 * Moodle forms HTML isn't changeable via renderers (yet?) so this
d9df063e 3 * .less file imports styles from the bootstrap @variables file and
8903b17b
BB
4 * adds them to the existing Moodle form CSS ids and classes.
5 *
6 */
7
8form {
9 margin: 0;
10}
11.mform fieldset .advancedbutton {
12 text-align: right;
13}
232affc9 14.jsenabled .mform .containsadvancedelements .advanced {
311c0347 15 display: none;
232affc9
ME
16}
17.mform .containsadvancedelements .advanced.show {
311c0347 18 display: block;
232affc9 19}
8903b17b
BB
20.mform fieldset.group {
21 margin-bottom: 0
22}
23.mform fieldset.error {
24 border: 1px solid @errorText;
25}
0c99005a
JF
26.mform span.error {
27 display: inline-block;
28 border: 1px solid @errorBorder;
29 border-radius: 4px;
30 background-color: @errorBackground;
31 padding: 4px;
32 margin-bottom: 4px;
33}
8903b17b
BB
34.mform fieldset.collapsible legend a.fheader {
35 padding: 0 5px 0 20px;
36 margin-left: -20px;
37 background: url([[pix:t/expanded]]) 2px center no-repeat;
38}
a0d8b511
FM
39.dir-rtl .mform fieldset.collapsible legend a.fheader {
40 padding: 0 20px 0 5px;
41 margin-right: -20px;
42 margin-left: 0;
43 background-position: right center;
44}
8903b17b 45.mform fieldset.collapsed legend a.fheader {
a0d8b511
FM
46 background-image: url([[pix:t/collapsed]]);
47}
48.dir-rtl .mform fieldset.collapsed legend a.fheader {
49 background-image: url([[pix:t/collapsed_rtl]]);
8903b17b 50}
8903b17b
BB
51.jsenabled .mform .collapsed .fcontainer {
52 display: none;
53}
a0d8b511 54
8903b17b
BB
55.mform .fitem .fitemtitle div {
56 display: inline;
57}
58.loginpanel .error,
59.mform .error {
60 color: @errorText;
61}
62.mform .fdescription.required {
63 margin-left: @horizontalComponentOffset;
64}
65.mform .fpassword .unmask {
66 display: inline-block;
67 margin-left: 0.5em;
68 & > input {
69 margin: 0;
70 }
71 & > label {
72 display: inline-block;
73 }
74}
a3e57854
DW
75.mform label {
76 display: inline-block;
77}
78
79.mform .iconhelp {
80 margin-left: 4px;
81}
82.dir-rtl .mform .iconhelp {
83 margin-right: 4px;
84}
8903b17b
BB
85.mform .ftextarea #id_alltext {
86 width: 100%;
87}
88.mform ul.file-list {
89 padding: 0;
90 margin: 0;
91 list-style: none;
92}
93.mform label .req,
94.mform label .adv {
95 cursor: help;
96}
97.mform .fcheckbox input {
98 margin-left: 0;
99 margin-top: 5px;
100}
101.mform .fitem fieldset.fgroup label,
102.mform fieldset.fdate_selector label {
103 display: inline;
104 float: none;
105 width: auto;
106}
107.mform .ftags label.accesshide {
108 display: block;
109 position: static;
110}
111.mform .ftags select {
112 margin-bottom: 0.7em;
113 min-width: 22em;
114}
115.mform .helplink img {
116 margin: 0 .45em;
117 padding: 0;
118}
119.mform legend .helplink img {
120 margin: 0 .2em;
121}
122.singleselect label {
123 margin-right: .3em;
124}
125.dir-rtl .singleselect label {
126 margin-left: .3em;
127 margin-right: 0;
128}
129input#id_externalurl {
130 direction: ltr;
131}
132#portfolio-add-button {
133 display: inline;
134}
135
d9df063e 136// Copying in Bootstrap styles.
8903b17b
BB
137.form-item,
138.mform .fitem {
139 .form-horizontal .control-group;
140 margin-bottom: 10px;
141 // Theres's a mysterious extra 10px inside this item,
d9df063e 142 // so reduce margin by 10px from 20px standard to compensate.
8903b17b
BB
143}
144.form-item .form-label,
145.mform .fitem div.fitemtitle {
146 .form-horizontal .control-label
147}
8d223d71
NK
148.dir-rtl {
149 .form-item .form-label,
150 .mform .fitem div.fitemtitle {
151 float:right;
f63a9af7 152 text-align: left;
8d223d71
NK
153 }
154}
8903b17b
BB
155.form-defaultinfo,
156.form-label .form-shortname {
157 .muted;
158}
159.form-label .form-shortname {
160 font-size: @fontSizeMini;
161 display: block;
162}
163.dir-rtl .form-label .form-shortname {
164 text-align: left;
165}
166.form-item .form-setting,
167.form-item .form-description,
168.mform .fitem .felement,
169#page-mod-forum-search .c1 {
170 .form-horizontal .controls
171}
172
173
174.formsettingheading {
175 .form-horizontal .help-block
176}
d9df063e 177// Moodle doesn't differentiate between what Bootstrap calls
8903b17b
BB
178// .uneditable-inputs and form help text. Styling them both as
179// uneditable looks ugly, styling both as form help is fairly
180// subtle in it's impact. Going for the latter as the best option.
181.form-item .form-description,
182.felement.fstatic {
183 .help-block;
184 padding-top: 5px;
185}
186.form-item .form-description {
187 padding-top: 0;
188}
189
190// Pale grey container for submit buttons.
191table#form td.submit,
192.form-buttons,
193.path-admin .buttons,
194#fitem_id_submitbutton,
195.fp-content-center form + div,
196div.backup-section + form,
197#fgroup_id_buttonar {
198 .form-actions;
199 padding-left: 0;
200}
201.path-admin .buttons,
232affc9 202.form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
8903b17b 203 padding-left: @horizontalComponentOffset;
8903b17b 204}
f63a9af7
NK
205.dir-rtl {
206 table#form td.submit,
207 .form-buttons,
208 .path-admin .buttons,
209 #fitem_id_submitbutton,
210 .fp-content-center form + div,
211 div.backup-section + form,
212 #fgroup_id_buttonar {
213 .form-actions;
214 padding-right: 0;
215 }
216 .path-admin .buttons,
217 .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
218 padding-right: @horizontalComponentOffset;
219 }
220}
8903b17b 221.form-item .form-setting .form-checkbox.defaultsnext {
d9df063e 222 // Need to specify .defaultsnext and the .form-checkbox class
8903b17b 223 // is somewhat randomly re-used on various actual checkboxes
d9df063e 224 // throughout the admin forms, instead of on the wrapper div.
8903b17b
BB
225 margin-top: 5px; // Push down checkboxes to align.
226 display: inline-block; // So above style sticks.
227}
228
3b42864d 229#adminsettings h3 {
d9df063e 230 // Copied from bootstrap/forms.less tag legend.
8903b17b
BB
231 display: block;
232 width: 100%;
233 padding: 0;
234 margin-bottom: @baseLineHeight;
235 font-size: @baseFontSize * 1.5;
236 line-height: @baseLineHeight * 2;
237 color: @grayDark;
238 border: 0;
239 border-bottom: 1px solid #e5e5e5;
240}
241.mform legend a,
242.mform legend a:hover {
243 color: @grayDark;
244 text-decoration: none;
245}
8903b17b 246.dir-rtl .mform .fitem .felement {
f63a9af7 247 margin-right: 30%;
8903b17b
BB
248 margin-left: auto;
249 text-align: right;
250}
251// I think this could be avoided (or at least tidied up) ifr
252// we used HTML5 input types like url, phone, email, number etc.
253.dir-rtl .mform .fitem .felement input[name=email],
254.dir-rtl .mform .fitem .felement input[name=email2],
255.dir-rtl .mform .fitem .felement input[name=url],
256.dir-rtl .mform .fitem .felement input[name=idnumber],
257.dir-rtl .mform .fitem .felement input[name=phone1],
258.dir-rtl .mform .fitem .felement input[name=phone2] {
259 text-align: left;
260 direction: ltr;
261}
262.dir-rtl #id_s__pathtodu,
263.dir-rtl #id_s__aspellpath,
264.dir-rtl #id_s__pathtodot,
265.dir-rtl #id_s__supportemail,
266.dir-rtl #id_s__supportpage,
267.dir-rtl #id_s__sessioncookie,
268.dir-rtl #id_s__sessioncookiepath,
269.dir-rtl #id_s__sessioncookiedomain,
270.dir-rtl #id_s__proxyhost,
271.dir-rtl #id_s__proxyuser,
272.dir-rtl #id_s__proxypassword,
273.dir-rtl #id_s__proxybypass,
274.dir-rtl #id_s__jabberhost,
275.dir-rtl #id_s__jabberserver,
276.dir-rtl #id_s__jabberusername,
277.dir-rtl #id_s__jabberpassword,
278.dir-rtl #id_s__additionalhtmlhead,
279.dir-rtl #id_s__additionalhtmltopofbody,
280.dir-rtl #id_s__additionalhtmlfooter,
281.dir-rtl #id_s__docroot,
282.dir-rtl #id_s__filter_tex_latexpreamble,
283.dir-rtl #id_s__filter_tex_latexbackground,
284.dir-rtl #id_s__filter_tex_pathlatex,
285.dir-rtl #id_s__filter_tex_pathdvips,
286.dir-rtl #id_s__filter_tex_pathconvert,
287.dir-rtl #id_s__blockedip,
288.dir-rtl #id_s__pathtoclam,
289.dir-rtl #id_s__quarantinedir,
290.dir-rtl #id_s__sitepolicy,
291.dir-rtl #id_s__sitepolicyguest,
292.dir-rtl #id_s__cronremotepassword,
293.dir-rtl #id_s__allowedip,
294.dir-rtl #id_s__blockedip,
295.dir-rtl #id_s_enrol_meta_nosyncroleids,
296.dir-rtl #id_s_enrol_ldap_host_url,
297.dir-rtl #id_s_enrol_ldap_ldapencoding,
298.dir-rtl #id_s_enrol_ldap_bind_dn,
299.dir-rtl #id_s_enrol_ldap_bind_pw,
300.dir-rtl #admin-emoticons .form-text,
301.dir-rtl #admin-role_mapping input[type=text],
302.dir-rtl #id_s_enrol_paypal_paypalbusiness,
303.dir-rtl #id_s_enrol_flatfile_location,
304#page-admin-setting-enrolsettingsflatfile.dir-rtl input[type=text],
305#page-admin-setting-enrolsettingsdatabase.dir-rtl input[type=text],
306#page-admin-auth-db.dir-rtl input[type=text] {
307 direction: ltr;
308}
309#page-admin-setting-enrolsettingsflatfile.dir-rtl .informationbox {
310 direction: ltr;
311 text-align: left;
312}
313#page-admin-grade-edit-scale-edit.dir-rtl .error input#id_name {
314 margin-right: 170px;
315}
accdf036
AD
316#page-grade-edit-outcome-course .courseoutcomes {
317 margin-left: auto;
318 margin-right: auto;
319 width: 100%;
320}
321#page-grade-edit-outcome-course .courseoutcomes td {
322 text-align:center;
323}
8903b17b
BB
324/* Install Process' text fields Forms, should always be justified to the left */
325#installform #id_wwwroot,
326#installform #id_dirroot,
327#installform #id_dataroot,
328#installform #id_dbhost,
329#installform #id_dbname,
330#installform #id_dbuser,
331#installform #id_dbpass,
332#installform #id_prefix {
333 direction: ltr;
334}
335
336.mdl-right > label {
337 // Workaround for repository pop-up because the : are outside the label,
d9df063e 338 // can/should be fixed in filemanager renderers.
8903b17b
BB
339 display: inline-block;
340}
341
d9df063e
DW
342// Checkbox labels. Bootstrap puts the associated checkbox inside the label.
343// Moodle puts it beside the label, so we need to make it inline-block
344// to keep it on the same horizontal level.
8903b17b
BB
345input[type="radio"] + label,
346input[type="checkbox"] + label {
347 display: inline;
348 padding-left: 0.2em;
349}
350input[type="radio"],
351input[type="checkbox"] {
d9df063e 352 margin-top: -4px; // Dodgy hack, must be better way.
b5877270 353 margin-right: 7px;
8903b17b 354}
f63a9af7
NK
355.dir-rtl {
356 input[type="radio"],
357 input[type="checkbox"] {
358 margin-left: 7px;
359 margin-right: auto;
360 }
361}
8903b17b
BB
362.singleselect {
363 display: inline-block;
364 form,
365 select{
366 margin: 0;
367 }
368}
369.form-item .form-label label {
370 margin-bottom: 0;
371}
8d223d71
NK
372.dir-rtl .form-item .form-label label {
373 text-align:left;
374}
8903b17b
BB
375.felement.ffilepicker {
376 margin-top: 5px;
377}
12cb45f1 378div#dateselector-calendar-panel {
311c0347 379 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
12cb45f1 380}
7eff2edc
ME
381
382fieldset.coursesearchbox label {
383 display: inline;
a3e57854 384}