MDL-52167 admin: format 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 .form-item .form-dependenton,
176 .mform .fitem .felement,
177 #page-mod-forum-search .c1 {
178     .form-horizontal .controls
180 .form-inline label:not(.sr-only):not(.accesshide) + select {
181     margin-left: 0.5rem;
184 .formsettingheading {
185     .form-horizontal .help-block
187 // Moodle doesn't differentiate between what Bootstrap calls
188 // .uneditable-inputs and form help text. Styling them both as
189 // uneditable looks ugly, styling both as form help is fairly
190 // subtle in it's impact. Going for the latter as the best option.
191 .form-item .form-description,
192 .form-item .form-dependenton,
193 .felement.fstatic {
194     .help-block;
195     padding-top: 5px;
197 .form-item .form-description,
198 .form-item .form-dependenton {
199     padding-top: 0;
201 .fitem .fstaticlabel {
202     font-weight: bold;
205 // Pale grey container for submit buttons.
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-left: 0;
216 .path-admin .buttons,
217 .form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
218     padding-left: @horizontalComponentOffset;
220 .form-item .form-setting .form-checkbox.defaultsnext {
221     // Need to specify .defaultsnext and the .form-checkbox class
222     // is somewhat randomly re-used on various actual checkboxes
223     // throughout the admin forms, instead of on the wrapper div.
224     margin-top: 5px; // Push down checkboxes to align.
225     display: inline-block; // So above style sticks.
228 #adminsettings h3 {
229     // Copied from bootstrap/forms.less tag legend.
230     display: block;
231     width: 100%;
232     padding: 0;
233     margin-bottom: @baseLineHeight;
234     font-size: @baseFontSize * 1.5;
235     line-height: @baseLineHeight * 2;
236     color: @grayDark;
237     border: 0;
238     border-bottom: 1px solid #e5e5e5;
240 .mform legend a,
241 .mform legend a:hover {
242     color: @textColor;
243     text-decoration: none;
246 #page-grade-edit-outcome-course .courseoutcomes {
247     margin-left: auto;
248     margin-right: auto;
249     width: 100%;
251 #page-grade-edit-outcome-course .courseoutcomes td {
252     text-align: center;
255 .mdl-right > label {
256     // Workaround for repository pop-up because the : are outside the label,
257     // can/should be fixed in filemanager renderers.
258     display: inline-block;
261 // Checkbox labels. Bootstrap puts the associated checkbox inside the label.
262 // Moodle puts it beside the label, so we need to make it inline-block
263 // to keep it on the same horizontal level.
264 input[type="radio"] + label,
265 input[type="checkbox"] + label {
266     display: inline;
267     padding-left: 0.2em;
269 input[type="radio"],
270 input[type="checkbox"] {
271     margin-top: -4px; // Dodgy hack, must be better way.
272     margin-right: 7px;
274 .singleselect {
275     display: inline-block;
276     form,
277     select {
278         margin: 0;
279     }
281 .form-item .form-label label {
282     margin-bottom: 0;
284 .felement.ffilepicker {
285     margin-top: 5px;
287 div#dateselector-calendar-panel {
288     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
291 fieldset.coursesearchbox label {
292     display: inline;
295 /**
296  * Show the labels above text editors and file managers except on wide screens.
297  */
298 #region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
299     font-weight: bold;
301 .makeFormsVertical() {
302     &:not(.unresponsive) {
303         .fitem {
304             .fitemtitle {
305                 display: block;
306                 margin-top: 4px;
307                 margin-bottom: 4px;
308                 text-align: left;
309                 width: 100%;
310             }
311             .felement {
312                 margin-left: 0;
313                 width: 100%;
314                 float: left;
315                 padding-left: 0;
316                 padding-right: 0;
317             }
318             .fstatic:empty {
319                 display: none;
320             }
321             .fcheckbox > span,
322             .fradio > span,
323             .fgroup > span {
324                 margin-top: 4px;
325             }
327         }
328         .femptylabel {
329             .fitemtitle {
330                 display: inline-block;
331                 width: auto;
332                 margin-right: 8px;
333             }
334             .felement {
335                 display: inline-block;
336                 margin-top: 4px;
337                 padding-top: 5px;
338             }
339         }
340         .fitem_fcheckbox {
341             .fitemtitle,
342             .felement {
343                 display: inline-block;
344                 width: auto;
345             }
346             .felement {
347                 padding: 6px;
348             }
349         }
350     }
353 /**
354  * Forms marked as vertical always display this way;
355  */
356 .mform.full-width-labels {
357     .makeFormsVertical;
360 /**
361  * Make forms vertical when the screen is less than 1200px;
362  */
363 @media (max-width: 1199px) {
364     body #region-main .mform {
365         .makeFormsVertical;
366     }
370 /**
371  * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks.
372  * This is an extra special media rule.
373  * It causes forms to show vertically when the screen size is calculated as:
374  * 1199px + (1199px * 23%)
375  * Where 23% is the width of span3
376  * Full calculation is:
377  *   @maxWidthForVerticalForms: 1199px * (unit(((@fluidGridColumnWidth1200 * 3) +
378  *    (@fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px;
379  */
380 @maxWidthForVerticalForms: 1474px;
382 @media (max-width: @maxWidthForVerticalForms) {
383     .used-region-side-pre.used-region-side-post #region-main .mform {
384         .makeFormsVertical;
385     }
388 /* Section and module editing forms contain special JS components for the
389    availability system (if enabled). */
390 #id_availabilityconditionsjson[aria-hidden=true],
391 .availability-field [aria-hidden=true] {
392     display: none;
394 .availability-eye,
395 .availability-delete {
396     margin-right: 8px;
398 /* Eye icons in front of child lists are aligned specially. */
399 .availability-list > .availability-eye img {
400     vertical-align: top;
401     margin-top: 12px;
403 .availability-plugincontrols {
404     min-height: 40px;
405     padding: 2px 0 0 4px;
406     background: none repeat scroll 0% 0% @wellBackground;
407     border: 1px solid @grayLighter;
408     border-radius: 4px;
409     display: inline-block;
410     margin-right: 8px;
411     select {
412         width: auto;
413         max-width: 200px;
414     }
416 .availability-field .availability-plugincontrols .availability-group select {
417     max-width: 12rem;
419 /* Nested section is grey. */
420 .availability-childlist > .availability-inner {
421     display: inline-block;
422     background: @wellBackground;
423     border: 1px solid @grayLighter;
424     border-radius: 4px;
425     padding: 6px;
426     margin-bottom: 6px;
428 /* Second (and more) levels of nested sections are white. */
429 .availability-childlist .availability-childlist > .availability-inner {
430     background: white;
432 /* Default form styling colours all text red. With availability conditions
433    this looks excessive as we show 'Invalid' markers in specific places. */
434 .mform .error .availability-field {
435     color: @textColor;
438 /* This dialogue is used to add an availability condition. */
439 .availability-dialogue {
440     .moodle-dialogue .moodle-dialogue-bd {
441         padding-left: 0;
442         padding-right: 0;
443         padding-bottom: 2px;
444     }
445     ul {
446         display: block;
447         margin: 0;
448     }
449     li {
450         display: block;
451         list-style-type: none;
452         padding: 0 0 4px;
453         clear: both;
454         border-bottom: 1px solid @grayLighter;
455         margin-bottom: 4px;
456     }
457     ul button {
458         float: left;
459         margin-left: 1em;
460         min-width: 140px;
461         margin-top: 4px;
462     }
463     label {
464         margin-left: 170px;
465         margin-right: 1em;
466         margin-bottom: 0;
467     }
468     .availability-buttons button {
469         margin-left: 1em;
470         margin-right: 1em;
471         margin-top: 4px;
472     }
475 /* Revert to the non-fixed width where a textarea has the number of columns
476    specified, or an input has it's size specified. */
477 textarea[cols],
478 input[size] {
479     width: auto;
482 /* Custom styles for autocomplete form element */
484 [data-fieldtype=autocomplete] select,
485 [data-fieldtype=tags] select,
486 select.form-autocomplete-original-select {
487     visibility: hidden;
488     overflow: hidden;
489     width: 15rem;
490     height: 3 * @baseLineHeight + @baseFontSize / 2;
491     margin: 0;
492     margin-bottom: 0.2em;
493     padding: 0;
494     border: 0;
495     vertical-align: top;
497 .form-autocomplete-container {
498     display: inline-block;
499     min-height: 4.2rem;
501 .form-autocomplete-selection {
502     margin: 0.2em;
503     min-height: @baseLineHeight + @baseFontSize / 2;
505 .form-autocomplete-multiple [role=listitem] {
506     cursor: pointer;
509 .form-autocomplete-suggestions {
510     position: absolute;
511     background-color: white;
512     border: 2px solid @grayLighter;
513     border-radius: 3px;
514     min-width: 206px;
515     max-height: 20em;
516     overflow: auto;
517     margin: 0;
518     padding: 0;
519     margin-top: -0.2em;
520     z-index: 1;
522 .form-autocomplete-suggestions li {
523     list-style-type: none;
524     padding: 0.2em;
525     margin: 0;
526     cursor: pointer;
527     color: @textColor;
529 .form-autocomplete-suggestions li:hover {
530     background-color: lighten(@dropdownLinkBackgroundActive, 15%);
531     color: @dropdownLinkColorActive;
533 .form-autocomplete-suggestions li[aria-selected=true] {
534     background-color: darken(@navbarBackground, 5%);
535     color: @gray;
538 .form-autocomplete-downarrow {
539     color: @textColor;
540     position: relative;
541     top: -0.3em;
542     left: -1.5em;
543     cursor: pointer;
546 .form-autocomplete-selection:focus {
547     outline: none;
549 .form-autocomplete-selection [data-active-selection=true] {
550     padding: 0.5em;
551     font-size: large;
554 textarea[data-auto-rows] {
555     overflow-x: hidden;
558 div[data-passwordunmask="wrapper"] {
559     height: 30px;
560     line-height: 30px;
561     margin-bottom: 10px;
564 // Styles for the JS file types browser provided by the "filetypes" element.
565 [data-filetypesbrowserbody] {
566     [aria-expanded="false"] > [role="group"],
567     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
568     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
569         display: none;
570     }