MDL-52167 admin: display dependencies in search results
[moodle.git] / theme / bootstrapbase / less / moodle / forms.less
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  */
8 form {
9     margin: 0;
10 }
11 .mform fieldset .advancedbutton {
12     text-align: right;
13 }
14 .jsenabled .mform .containsadvancedelements .advanced {
15     display: none;
16 }
17 .mform .containsadvancedelements .advanced.show {
18     display: block;
19 }
20 .mform fieldset.group {
21     margin-bottom: 0;
22 }
23 .mform fieldset.error {
24     border: 1px solid @errorText;
25 }
26 .mform span.error,
27 #adminsettings span.error {
28     display: inline-block;
29     border: 1px solid @errorBorder;
30     border-radius: 4px;
31     background-color: @errorBackground;
32     padding: 4px;
33     margin-bottom: 4px;
34 }
35 .mform fieldset.collapsible legend a.fheader {
36     padding: 0 5px 0 20px;
37     margin-left: -20px;
38     background: url([[pix:t/expanded]]) left center no-repeat;
39 }
40 .mform fieldset.collapsed legend a.fheader {
41     /*rtl:raw:
42     background-image: url([[pix:t/collapsed_rtl]]);
43     */
44     /*rtl:remove*/
45     background-image: url([[pix:t/collapsed]]);
46 }
47 .jsenabled .mform .collapsed .fcontainer {
48     display: none;
49 }
51 // MDL-63512 Override to handle issues in clean where the video styling is off.
52 .mform .fitem .fitemtitle {
53     & > div:not(.mediaplugin) div {
54         display: inline;
55     }
57     // MDL-64450 Override for videos so they don't appear off the screen.
58     .mediaplugin > div {
59         margin: 0;
60     }
61 }
63 // Reduce the mediaplugin width when using inside forms.
64 .que.match .mediaplugin {
65     width: 50vw;
66 }
68 #adminsettings .error,
69 .loginpanel .error,
70 .mform .error {
71     color: @errorText;
72 }
73 .mform .fdescription.required {
74     margin-left: @horizontalComponentOffset;
75     & > .icon {
76         width: 8px;
77         height: 12px;
78     }
79 }
80 .mform .fpassword .unmask {
81     display: inline-block;
82     margin-left: 0.5em;
83     & > input {
84         margin: 0;
85     }
86     & > label {
87         display: inline-block;
88     }
89 }
90 .mform label {
91     display: inline-block;
92 }
94 .mform .iconhelp {
95     margin-left: 4px;
96 }
97 .mform .ftextarea #id_alltext {
98     width: 100%;
99 }
100 .mform ul.file-list {
101     padding: 0;
102     margin: 0;
103     list-style: none;
105 .mform label .req,
106 .mform label .adv {
107     cursor: help;
108     & > .icon {
109         width: 8px;
110         height: 12px;
111         margin-left: 3px;
112     }
114 .mform .fcheckbox input {
115     margin-left: 0;
117 .mform .fcheckbox > span,
118 .mform .fradio > span,
119 .mform .fgroup > span,
120 .mform .fadvcheckbox > span {
121     display: inline-block;
122     margin-top: 5px;
124 .mform .fitem fieldset.fgroup label,
125 .mform fieldset.fdate_selector label {
126     display: inline;
127     float: none;
129 .mform .helplink img {
130     margin: 0 .45em;
131     padding: 0;
133 .mform legend .helplink img {
134     margin: 0 .2em;
136 .singleselect label {
137     margin-right: .3em;
140 .custom-select {
141     max-width: 100%;
144 // Make the submit button align with the .custom-select element.
145 .custom-select + input[type="submit"] {
146     margin: 0 0 0 5px;
149 #portfolio-add-button {
150     display: inline;
153 // Copying in Bootstrap styles.
154 .form-item,
155 .mform .fitem {
156     .form-horizontal .control-group;
157     margin-bottom: 10px;
158     // Theres's a mysterious extra 10px inside this item,
159     // so reduce margin by 10px from 20px standard to compensate.
161 .form-item .form-label,
162 .mform .fitem div.fitemtitle {
163     .form-horizontal .control-label
165 .form-defaultinfo,
166 .form-label .form-shortname {
167     .muted;
169 .form-label .form-shortname {
170     font-size: @fontSizeMini;
171     display: block;
173 .form-item .form-setting,
174 .form-item .form-description,
175 .mform .fitem .felement,
176 #page-mod-forum-search .c1 {
177     .form-horizontal .controls
179 .form-inline label:not(.sr-only):not(.accesshide) + select {
180     margin-left: 0.5rem;
183 .formsettingheading {
184     .form-horizontal .help-block
186 // Moodle doesn't differentiate between what Bootstrap calls
187 // .uneditable-inputs and form help text. Styling them both as
188 // uneditable looks ugly, styling both as form help is fairly
189 // subtle in it's impact. Going for the latter as the best option.
190 .form-item .form-description,
191 .felement.fstatic {
192     .help-block;
193     padding-top: 5px;
195 .form-item .form-description {
196     padding-top: 0;
198 .fitem .fstaticlabel {
199     font-weight: bold;
202 // Pale grey container for submit buttons.
203 table#form td.submit,
204 .form-buttons,
205 .path-admin .buttons,
206 #fitem_id_submitbutton,
207 .fp-content-center form + div,
208 div.backup-section + form,
209 #fgroup_id_buttonar {
210     .form-actions;
211     padding-left: 0;
213 .path-admin .buttons,
214 .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
215     padding-left: @horizontalComponentOffset;
217 .form-item .form-setting .form-checkbox.defaultsnext {
218     // Need to specify .defaultsnext and the .form-checkbox class
219     // is somewhat randomly re-used on various actual checkboxes
220     // throughout the admin forms, instead of on the wrapper div.
221     margin-top: 5px; // Push down checkboxes to align.
222     display: inline-block; // So above style sticks.
225 #adminsettings h3 {
226     // Copied from bootstrap/forms.less tag legend.
227     display: block;
228     width: 100%;
229     padding: 0;
230     margin-bottom: @baseLineHeight;
231     font-size: @baseFontSize * 1.5;
232     line-height: @baseLineHeight * 2;
233     color: @grayDark;
234     border: 0;
235     border-bottom: 1px solid #e5e5e5;
237 .mform legend a,
238 .mform legend a:hover {
239     color: @textColor;
240     text-decoration: none;
243 #page-grade-edit-outcome-course .courseoutcomes {
244     margin-left: auto;
245     margin-right: auto;
246     width: 100%;
248 #page-grade-edit-outcome-course .courseoutcomes td {
249     text-align: center;
252 .mdl-right > label {
253     // Workaround for repository pop-up because the : are outside the label,
254     // can/should be fixed in filemanager renderers.
255     display: inline-block;
258 // Checkbox labels. Bootstrap puts the associated checkbox inside the label.
259 // Moodle puts it beside the label, so we need to make it inline-block
260 // to keep it on the same horizontal level.
261 input[type="radio"] + label,
262 input[type="checkbox"] + label {
263     display: inline;
264     padding-left: 0.2em;
266 input[type="radio"],
267 input[type="checkbox"] {
268     margin-top: -4px; // Dodgy hack, must be better way.
269     margin-right: 7px;
271 .singleselect {
272     display: inline-block;
273     form,
274     select {
275         margin: 0;
276     }
278 .form-item .form-label label {
279     margin-bottom: 0;
281 .felement.ffilepicker {
282     margin-top: 5px;
284 div#dateselector-calendar-panel {
285     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
288 fieldset.coursesearchbox label {
289     display: inline;
292 /**
293  * Show the labels above text editors and file managers except on wide screens.
294  */
295 #region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
296     font-weight: bold;
298 .makeFormsVertical() {
299     &:not(.unresponsive) {
300         .fitem {
301             .fitemtitle {
302                 display: block;
303                 margin-top: 4px;
304                 margin-bottom: 4px;
305                 text-align: left;
306                 width: 100%;
307             }
308             .felement {
309                 margin-left: 0;
310                 width: 100%;
311                 float: left;
312                 padding-left: 0;
313                 padding-right: 0;
314             }
315             .fstatic:empty {
316                 display: none;
317             }
318             .fcheckbox > span,
319             .fradio > span,
320             .fgroup > span {
321                 margin-top: 4px;
322             }
324         }
325         .femptylabel {
326             .fitemtitle {
327                 display: inline-block;
328                 width: auto;
329                 margin-right: 8px;
330             }
331             .felement {
332                 display: inline-block;
333                 margin-top: 4px;
334                 padding-top: 5px;
335             }
336         }
337         .fitem_fcheckbox {
338             .fitemtitle,
339             .felement {
340                 display: inline-block;
341                 width: auto;
342             }
343             .felement {
344                 padding: 6px;
345             }
346         }
347     }
350 /**
351  * Forms marked as vertical always display this way;
352  */
353 .mform.full-width-labels {
354     .makeFormsVertical;
357 /**
358  * Make forms vertical when the screen is less than 1200px;
359  */
360 @media (max-width: 1199px) {
361     body #region-main .mform {
362         .makeFormsVertical;
363     }
367 /**
368  * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks.
369  * This is an extra special media rule.
370  * It causes forms to show vertically when the screen size is calculated as:
371  * 1199px + (1199px * 23%)
372  * Where 23% is the width of span3
373  * Full calculation is:
374  *   @maxWidthForVerticalForms: 1199px * (unit(((@fluidGridColumnWidth1200 * 3) +
375  *    (@fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px;
376  */
377 @maxWidthForVerticalForms: 1474px;
379 @media (max-width: @maxWidthForVerticalForms) {
380     .used-region-side-pre.used-region-side-post #region-main .mform {
381         .makeFormsVertical;
382     }
385 /* Section and module editing forms contain special JS components for the
386    availability system (if enabled). */
387 #id_availabilityconditionsjson[aria-hidden=true],
388 .availability-field [aria-hidden=true] {
389     display: none;
391 .availability-eye,
392 .availability-delete {
393     margin-right: 8px;
395 /* Eye icons in front of child lists are aligned specially. */
396 .availability-list > .availability-eye img {
397     vertical-align: top;
398     margin-top: 12px;
400 .availability-plugincontrols {
401     min-height: 40px;
402     padding: 2px 0 0 4px;
403     background: none repeat scroll 0% 0% @wellBackground;
404     border: 1px solid @grayLighter;
405     border-radius: 4px;
406     display: inline-block;
407     margin-right: 8px;
408     select {
409         width: auto;
410         max-width: 200px;
411     }
413 .availability-field .availability-plugincontrols .availability-group select {
414     max-width: 12rem;
416 /* Nested section is grey. */
417 .availability-childlist > .availability-inner {
418     display: inline-block;
419     background: @wellBackground;
420     border: 1px solid @grayLighter;
421     border-radius: 4px;
422     padding: 6px;
423     margin-bottom: 6px;
425 /* Second (and more) levels of nested sections are white. */
426 .availability-childlist .availability-childlist > .availability-inner {
427     background: white;
429 /* Default form styling colours all text red. With availability conditions
430    this looks excessive as we show 'Invalid' markers in specific places. */
431 .mform .error .availability-field {
432     color: @textColor;
435 /* This dialogue is used to add an availability condition. */
436 .availability-dialogue {
437     .moodle-dialogue .moodle-dialogue-bd {
438         padding-left: 0;
439         padding-right: 0;
440         padding-bottom: 2px;
441     }
442     ul {
443         display: block;
444         margin: 0;
445     }
446     li {
447         display: block;
448         list-style-type: none;
449         padding: 0 0 4px;
450         clear: both;
451         border-bottom: 1px solid @grayLighter;
452         margin-bottom: 4px;
453     }
454     ul button {
455         float: left;
456         margin-left: 1em;
457         min-width: 140px;
458         margin-top: 4px;
459     }
460     label {
461         margin-left: 170px;
462         margin-right: 1em;
463         margin-bottom: 0;
464     }
465     .availability-buttons button {
466         margin-left: 1em;
467         margin-right: 1em;
468         margin-top: 4px;
469     }
472 /* Revert to the non-fixed width where a textarea has the number of columns
473    specified, or an input has it's size specified. */
474 textarea[cols],
475 input[size] {
476     width: auto;
479 /* Custom styles for autocomplete form element */
481 [data-fieldtype=autocomplete] select,
482 [data-fieldtype=tags] select,
483 select.form-autocomplete-original-select {
484     visibility: hidden;
485     overflow: hidden;
486     width: 15rem;
487     height: 3 * @baseLineHeight + @baseFontSize / 2;
488     margin: 0;
489     margin-bottom: 0.2em;
490     padding: 0;
491     border: 0;
492     vertical-align: top;
494 .form-autocomplete-container {
495     display: inline-block;
496     min-height: 4.2rem;
498 .form-autocomplete-selection {
499     margin: 0.2em;
500     min-height: @baseLineHeight + @baseFontSize / 2;
502 .form-autocomplete-multiple [role=listitem] {
503     cursor: pointer;
506 .form-autocomplete-suggestions {
507     position: absolute;
508     background-color: white;
509     border: 2px solid @grayLighter;
510     border-radius: 3px;
511     min-width: 206px;
512     max-height: 20em;
513     overflow: auto;
514     margin: 0;
515     padding: 0;
516     margin-top: -0.2em;
517     z-index: 1;
519 .form-autocomplete-suggestions li {
520     list-style-type: none;
521     padding: 0.2em;
522     margin: 0;
523     cursor: pointer;
524     color: @textColor;
526 .form-autocomplete-suggestions li:hover {
527     background-color: lighten(@dropdownLinkBackgroundActive, 15%);
528     color: @dropdownLinkColorActive;
530 .form-autocomplete-suggestions li[aria-selected=true] {
531     background-color: darken(@navbarBackground, 5%);
532     color: @gray;
535 .form-autocomplete-downarrow {
536     color: @textColor;
537     position: relative;
538     top: -0.3em;
539     left: -1.5em;
540     cursor: pointer;
543 .form-autocomplete-selection:focus {
544     outline: none;
546 .form-autocomplete-selection [data-active-selection=true] {
547     padding: 0.5em;
548     font-size: large;
551 textarea[data-auto-rows] {
552     overflow-x: hidden;
555 div[data-passwordunmask="wrapper"] {
556     height: 30px;
557     line-height: 30px;
558     margin-bottom: 10px;
561 // Styles for the JS file types browser provided by the "filetypes" element.
562 [data-filetypesbrowserbody] {
563     [aria-expanded="false"] > [role="group"],
564     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
565     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
566         display: none;
567     }