MDL-55564 core_admin: Convert admin settings to use templates
[moodle.git] / theme / noname / scss / moodle / forms.scss
CommitLineData
536f0460
DW
1/**
2 * Moodle forms HTML isn't changeable via renderers (yet?) so this
3 * .less file imports styles from the bootstrap $variables file and
4 * adds them to the existing Moodle form CSS ids and classes.
5 *
6 */
7
536f0460
DW
8.jsenabled .mform .containsadvancedelements .advanced {
9 display: none;
10}
11.mform .containsadvancedelements .advanced.show {
12 display: block;
13}
536f0460
DW
14#adminsettings span.error {
15 display: inline-block;
16 border: 1px solid $state-danger-border;
17 border-radius: 4px;
18 background-color: $state-danger-bg;
19 padding: 4px;
20 margin-bottom: 4px;
21}
22.mform fieldset.collapsible legend a.fheader {
92e32fc4
FM
23 padding: 0 5px 0 18px;
24 margin-left: -18px;
25 background: url([[pix:t/expanded]]) 0 center no-repeat;
536f0460
DW
26}
27.mform fieldset.collapsed legend a.fheader {
92e32fc4
FM
28 /*rtl:raw:
29 background-image: url([[pix:t/collapsed_rtl]]);
30 */
31 /*rtl:remove*/
536f0460
DW
32 background-image: url([[pix:t/collapsed]]);
33}
34.jsenabled .mform .collapsed .fcontainer {
35 display: none;
36}
91bda4cd 37#adminsettings .error {
536f0460
DW
38 color: $state-danger-text;
39}
536f0460
DW
40.mform ul.file-list {
41 padding: 0;
42 margin: 0;
43 list-style: none;
44}
45.mform label .req,
46.mform label .adv {
47 cursor: help;
48}
536f0460
DW
49/*rtl:ignore*/
50input#id_externalurl {
51 direction: ltr;
52}
53#portfolio-add-button {
54 display: inline;
55}
56
57// Copying in Bootstrap styles.
91bda4cd 58.form-item {
536f0460
DW
59 margin-bottom: 10px;
60 // Theres's a mysterious extra 10px inside this item,
61 // so reduce margin by 10px from 20px standard to compensate.
62}
536f0460
DW
63.form-defaultinfo,
64.form-label .form-shortname {
65 @extend .text-muted;
66}
67.form-label .form-shortname {
68 font-size: $font-size-xs;
69 display: block;
70}
71.form-item .form-setting,
72.form-item .form-description,
536f0460
DW
73#page-mod-forum-search .c1 .form-horizontal {
74 @extend .controls;
75}
76
77
78.formsettingheading .form-horizontal {
79 @extend .text-muted;
80}
81// Moodle doesn't differentiate between what Bootstrap calls
82// .uneditable-inputs and form help text. Styling them both as
83// uneditable looks ugly, styling both as form help is fairly
84// subtle in it's impact. Going for the latter as the best option.
85.form-item .form-description,
91bda4cd 86.no-felement.fstatic {
536f0460
DW
87 @extend .text-muted;
88 padding-top: 5px;
89}
90.form-item .form-description {
91 padding-top: 0;
92}
91bda4cd 93.no-fitem .fstaticlabel {
536f0460
DW
94 font-weight: bold;
95}
96
97// Pale grey container for submit buttons.
98table#form td.submit,
99.form-buttons,
100.path-admin .buttons,
101#fitem_id_submitbutton,
102.fp-content-center form + div,
103div.backup-section + form,
104#fgroup_id_buttonar {
105 @extend .form-group;
106 padding-left: 0;
107}
108.path-admin .buttons,
109.form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
110 padding-left: $display1-size;
111}
112.form-item .form-setting .form-checkbox.defaultsnext {
113 // Need to specify .defaultsnext and the .form-checkbox class
114 // is somewhat randomly re-used on various actual checkboxes
115 // throughout the admin forms, instead of on the wrapper div.
116 margin-top: 5px; // Push down checkboxes to align.
117 display: inline-block; // So above style sticks.
118}
119
120#adminsettings h3 {
121 // Copied from bootstrap/forms.less tag legend.
122 display: block;
123 width: 100%;
124 padding: 0;
da92b738 125 margin-bottom: $line-height-base;
536f0460 126 font-size: $font-size-lg;
da92b738 127 line-height: $line-height-base * 2;
536f0460
DW
128 border: 0;
129 border-bottom: 1px solid #e5e5e5;
130}
536f0460
DW
131
132// I think this could be avoided (or at least tidied up) ifr
133// we used HTML5 input types like url, phone, email, number etc.
134/* rtl:ignore */
135.mform .fitem .felement input[name=email],
136.mform .fitem .felement input[name=email2],
137.mform .fitem .felement input[name=url],
138.mform .fitem .felement input[name=idnumber],
139.mform .fitem .felement input[name=phone1],
140.mform .fitem .felement input[name=phone2] {
141 text-align: left;
142 direction: ltr;
143}
144/* rtl:ignore */
145#id_s__pathtodu,
146#id_s__aspellpath,
147#id_s__pathtodot,
148#id_s__supportemail,
149#id_s__supportpage,
150#id_s__sessioncookie,
151#id_s__sessioncookiepath,
152#id_s__sessioncookiedomain,
153#id_s__proxyhost,
154#id_s__proxyuser,
155#id_s__proxypassword,
156#id_s__proxybypass,
157#id_s__jabberhost,
158#id_s__jabberserver,
159#id_s__jabberusername,
160#id_s__jabberpassword,
161#id_s__additionalhtmlhead,
162#id_s__additionalhtmltopofbody,
163#id_s__additionalhtmlfooter,
164#id_s__docroot,
165#id_s__filter_tex_latexpreamble,
166#id_s__filter_tex_latexbackground,
167#id_s__filter_tex_pathlatex,
168#id_s__filter_tex_pathdvips,
169#id_s__filter_tex_pathconvert,
170#id_s__blockedip,
171#id_s__pathtoclam,
172#id_s__quarantinedir,
173#id_s__sitepolicy,
174#id_s__sitepolicyguest,
175#id_s__cronremotepassword,
176#id_s__allowedip,
177#id_s__blockedip,
178#id_s_enrol_meta_nosyncroleids,
179#id_s_enrol_ldap_host_url,
180#id_s_enrol_ldap_ldapencoding,
181#id_s_enrol_ldap_bind_dn,
182#id_s_enrol_ldap_bind_pw,
183#admin-emoticons .form-text,
184#admin-role_mapping input[type=text],
185#id_s_enrol_paypal_paypalbusiness,
186#id_s_enrol_flatfile_location,
187#page-admin-setting-enrolsettingsflatfile input[type=text],
188#page-admin-setting-enrolsettingsdatabase input[type=text],
189#page-admin-auth-db input[type=text] {
190 direction: ltr;
191}
192/* rtl:ignore */
193#page-admin-setting-enrolsettingsflatfile .informationbox {
194 direction: ltr;
195 text-align: left;
196}
197/* rtl:ignore */
198#page-admin-grade-edit-scale-edit .error input#id_name {
199 margin-right: 170px;
200}
201#page-grade-edit-outcome-course .courseoutcomes {
202 margin-left: auto;
203 margin-right: auto;
204 width: 100%;
205}
206#page-grade-edit-outcome-course .courseoutcomes td {
207 text-align:center;
208}
209/* Install Process' text fields Forms, should always be justified to the left */
210/* rtl:ignore */
211#installform #id_wwwroot,
212#installform #id_dirroot,
213#installform #id_dataroot,
214#installform #id_dbhost,
215#installform #id_dbname,
216#installform #id_dbuser,
217#installform #id_dbpass,
218#installform #id_prefix {
219 direction: ltr;
220}
221
222.mdl-right > label {
223 // Workaround for repository pop-up because the : are outside the label,
224 // can/should be fixed in filemanager renderers.
225 display: inline-block;
226}
227
536f0460
DW
228.form-item .form-label label {
229 margin-bottom: 0;
230}
536f0460
DW
231div#dateselector-calendar-panel {
232 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
233}
234
235fieldset.coursesearchbox label {
236 display: inline;
237}
238
239/**
240 * Show the labels above text editors and file managers except on wide screens.
241 */
536f0460
DW
242
243
536f0460
DW
244/* Section and module editing forms contain special JS components for the
245 availability system (if enabled). */
246#fitem_id_availabilityconditionsjson {
247 *[aria-hidden=true] {
248 display: none;
249 }
250 select,
251 input[type=text] {
252 position:relative;
253 top: 4px;
254 }
255 label {
256 display: inline;
257 }
258 .availability-group {
259 margin-right: 8px;
260 }
261 .availability-item {
262 margin-bottom: 6px;
263 }
264 .availability-none {
265 margin-left: 20px;
266 margin-bottom: 4px;
267 }
268 .availability-plugincontrols {
269 padding: 2px 0px 0px 4px;
270 border: 1px solid $gray-lighter;
271 border-radius: 4px;
272 display: inline-block;
273 margin-right: 8px;
274 }
275 /* Eye icon in front of an item and delete icon after it. */
276 .availability-eye,
277 .availability-delete {
278 margin-right: 8px;
279 }
280 /* Hidden eye icon still takes up space. */
281 .availability-eye[aria-hidden=true] {
282 display: inline;
283 visibility: hidden;
284 }
285 /* Eye icons in front of child lists are aligned specially. */
286 .availability-list > .availability-eye img {
287 vertical-align: top;
288 margin-top: 12px;
289 }
290 /* Add button lines up with child elements. */
291 .availability-button {
292 margin-left: 15px;
293 }
294 /* Nested section is grey. */
295 .availability-childlist > .availability-inner {
296 display: inline-block;
297 border: 1px solid $gray-lighter;
298 border-radius: 4px;
299 padding: 6px;
300 margin-bottom: 6px;
301 }
302 /* Second (and more) levels of nested sections are white. */
303 .availability-childlist .availability-childlist > .availability-inner {
304 background: white;
305 }
306 /* Connecting text needs to be indented. */
307 .availability-connector {
308 margin-left: 20px;
309 margin-bottom: 6px;
310 }
311}
312
313/* Default form styling colours all text red. With availability conditions
314 this looks excessive as we show 'Invalid' markers in specific places. */
315.mform .error .availability-field {
316 color: $body-color;
317}
318
319/* This dialogue is used to add an availability condition. */
320.availability-dialogue {
321 .moodle-dialogue .moodle-dialogue-bd {
322 padding-left: 0;
323 padding-right: 0;
324 padding-bottom: 2px;
325 }
326 ul {
327 display: block;
328 margin: 0;
329 }
330 li {
331 display: block;
332 list-style-type: none;
333 padding: 0 0 4px;
334 clear: both;
335 border-bottom: 1px solid $gray-lighter;
336 margin-bottom: 4px;
337 }
338 ul button {
339 float: left;
340 margin-left: 1em;
341 min-width: 140px;
342 margin-top: 4px;
343 }
344 label {
345 margin-left: 170px;
346 margin-right: 1em;
347 margin-bottom: 0;
348 }
349 .availability-buttons button {
350 margin-left: 1em;
351 margin-right: 1em;
352 margin-top: 4px;
353 }
354}
355
536f0460
DW
356/* Custom styles for autocomplete form element */
357.form-autocomplete-selection {
358 margin: 0.2em;
359 min-height: 21px;
360}
361.form-autocomplete-multiple [role=listitem] {
362 cursor: pointer;
363}
364
365.form-autocomplete-suggestions {
366 position: absolute;
367 background-color: white;
368 border: 2px solid $gray-lighter;
369 border-radius: 3px;
370 min-width: 206px;
371 max-height: 20em;
372 overflow: auto;
373 margin: 0px;
374 padding: 0px;
91bda4cd 375 margin-top: 0.4em;
536f0460
DW
376 z-index: 1;
377}
378.form-autocomplete-suggestions li {
379 list-style-type: none;
380 padding: 0.2em;
381 margin: 0;
382 cursor: pointer;
383 color: $body-color;
384}
385.form-autocomplete-suggestions li:hover {
386 background-color: lighten($dropdown-link-active-bg, 15%);
387 color: $dropdown-link-active-color;
388}
389.form-autocomplete-suggestions li[aria-selected=true] {
390 background-color: darken($dropdown-bg, 5%);
391 color: $gray;
392}
393
394.form-autocomplete-downarrow {
395 color: $body-color;
396 position: relative;
91bda4cd 397 top: 0.2em;
536f0460
DW
398 left: -1.5em;
399 cursor: pointer;
400}
401
402.form-autocomplete-selection:focus {
403 outline: none;
404}
405.form-autocomplete-selection [data-active-selection=true] {
406 padding: 0.5em;
407 font-size: large;
408}
91bda4cd
DW
409
410select[multiple] {
411 overflow: auto;
412}