weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / forms.scss
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 .jsenabled .mform .containsadvancedelements .advanced {
9     display: none;
10 }
12 .mform .containsadvancedelements .advanced.show {
13     display: flex;
14 }
16 #adminsettings span.error {
17     display: inline-block;
18     border: 1px solid $state-danger-border;
19     border-radius: 4px;
20     background-color: $state-danger-bg;
21     padding: 4px;
22     margin-bottom: 4px;
23 }
25 .mform .form-inline {
26     .form-control,
27     .custom-select {
28         max-width: 100%;
29     }
30     .form-group {
31         margin: 0.1rem 0.25rem 0.1rem 0;
32     }
33     br + label {
34         justify-content: flex-start;
35         width: 100%;
36         margin-right: 0;
37     }
38 }
40 .unresponsive.mform .form-inline,
41 .unresponsive.mform .form-inline label {
42     display: inline-flex;
43 }
45 #jump-to-activity.custom-select {
46     width: 100%;
47 }
49 .mform fieldset {
50     margin-bottom: $spacer / 2;
51     border-bottom: $border-width solid $table-border-color;
52 }
54 @include media-breakpoint-up(sm) {
55     .mform > .form-group {
56         margin-left: $spacer * 1.5;
57     }
58 }
60 #adminsettings .form-control[size] {
61     width: auto;
62 }
64 .jsenabled .mform .collapsed .fcontainer {
65     display: none;
66 }
68 #adminsettings .error {
69     color: $danger;
70 }
72 .mform ul.file-list {
73     padding: 0;
74     margin: 0;
75     list-style: none;
76 }
78 .mform label .req,
79 .mform label .adv {
80     cursor: help;
81 }
82 /*rtl:ignore*/
83 input#id_externalurl {
84     direction: ltr;
85 }
87 #portfolio-add-button {
88     display: inline;
89 }
91 .form-defaultinfo,
92 .form-label .form-shortname {
93     color: $text-muted;
94 }
96 .form-label .form-shortname {
97     font-size: $font-size-xs;
98     display: block;
99 }
101 .form-item .form-inline {
102     display: inline;
105 .form-inline label:not(.sr-only):not(.accesshide) + select {
106     margin-left: 0.5rem;
109 .formsettingheading .form-horizontal {
110     color: $text-muted;
113 // Moodle doesn't differentiate between what Bootstrap calls
114 // .uneditable-inputs and form help text. Styling them both as
115 // uneditable looks ugly, styling both as form help is fairly
116 // subtle in it's impact. Going for the latter as the best option.
117 .no-felement.fstatic {
118     color: $text-muted;
119     padding-top: 5px;
122 .no-fitem .fstaticlabel {
123     font-weight: bold;
126 .form-item .form-setting .defaultsnext > input {
127     display: inline-block;
130 .form-item .form-setting .form-checkbox.defaultsnext {
131     // Need to specify .defaultsnext and the .form-checkbox class
132     // is somewhat randomly re-used on various actual checkboxes
133     // throughout the admin forms, instead of on the wrapper div.
134     margin-top: 5px; // Push down checkboxes to align.
135     display: inline-block; // So above style sticks.
138 #adminsettings h3 {
139     // Copied from bootstrap/forms.less tag legend.
140     display: block;
141     width: 100%;
142     padding: 0;
143     margin-bottom: $line-height-base;
144     font-size: $font-size-lg;
145     line-height: $line-height-base * 2;
146     border: 0;
147     border-bottom: 1px solid #e5e5e5;
150 // I think this could be avoided (or at least tidied up) ifr
151 // we used HTML5 input types like url, phone, email, number etc.
152 /* rtl:ignore */
153 .mform .fitem .felement input[name="email"],
154 .mform .fitem .felement input[name="email2"],
155 .mform .fitem .felement input[name="url"],
156 .mform .fitem .felement input[name="idnumber"],
157 .mform .fitem .felement input[name="phone1"],
158 .mform .fitem .felement input[name="phone2"] {
159     text-align: left;
160     direction: ltr;
163 // Reduce the mediaplugin width when using inside forms.
164 .que.match .mediaplugin {
165     width: 50vw;
168 /* rtl:ignore */
169 #page-admin-grade-edit-scale-edit .error input#id_name {
170     margin-right: 170px;
173 #page-grade-edit-outcome-course .courseoutcomes {
174     margin-left: auto;
175     margin-right: auto;
176     width: 100%;
179 #page-grade-edit-outcome-course .courseoutcomes td {
180     text-align: center;
182 /* Install Process' text fields Forms, should always be justified to the left */
183 /* rtl:ignore */
184 #installform #id_wwwroot,
185 #installform #id_dirroot,
186 #installform #id_dataroot,
187 #installform #id_dbhost,
188 #installform #id_dbname,
189 #installform #id_dbuser,
190 #installform #id_dbpass,
191 #installform #id_prefix {
192     direction: ltr;
195 .mdl-right > label {
196     // Workaround for repository pop-up because the : are outside the label,
197     // can/should be fixed in filemanager renderers.
198     display: inline-block;
201 .singleselect {
202     max-width: 100%;
205 .form-item .form-label label {
206     margin-bottom: 0;
209 div#dateselector-calendar-panel {
210     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
213 fieldset.coursesearchbox label {
214     display: inline;
217 /**
218  * Show the labels above text editors and file managers except on wide screens.
219  */
222 /* Section and module editing forms contain special JS components for the
223    availability system (if enabled). */
224 #id_availabilityconditionsjson[aria-hidden=true],
225 .availability-field [aria-hidden=true] {
226     display: none;
229 .availability-field {
230     label {
231         display: inline-flex;
232     }
233     .availability-group label {
234         vertical-align: top;
235     }
238 .availability-eye {
239     clear: left;
240     float: left;
242 .availability-inner,
243 .availability-plugincontrols {
244     float: left;
245     @include border-radius($card-border-radius);
246     border: $card-border-width solid $card-border-color;
247     padding: 1rem;
248     margin-top: 0.5rem;
250 .availability-plugincontrols,
251 .availability-childlist .availability-inner {
252     margin-left: .625rem;
254 .availability-field .availability-plugincontrols .availability-group select {
255     max-width: 12rem;
258 /* Custom styles for autocomplete form element */
259 /* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
260 [data-fieldtype=autocomplete] select,
261 [data-fieldtype=tags] select,
262 .form-autocomplete-original-select {
263     visibility: hidden;
264     overflow: hidden;
265     width: 15rem;
266     height: 44px;
267     margin: 0;
268     padding: 0;
269     border: 0;
270     margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
271     vertical-align: bottom;
273 .form-autocomplete-selection {
274     margin: $input-padding-y-sm;
275     // Padding top and bottom, plus mb-1 and the 100% lineheight.
276     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
279 .form-autocomplete-selection [role=option] {
280     cursor: pointer;
281     white-space: inherit;
282     word-break: break-word;
283     line-height: 1.4;
284     text-align: left;
287 .form-autocomplete-suggestions {
288     position: absolute;
289     background-color: white;
290     border: $border-width solid $input-border-color;
291     min-width: 206px;
292     max-height: 20em;
293     overflow: auto;
294     margin: $dropdown-spacer 0 0;
295     padding: $dropdown-padding-y 0;
296     z-index: 1;
299 .form-autocomplete-suggestions li {
300     list-style-type: none;
301     padding: $dropdown-item-padding-y $dropdown-item-padding-x;
302     margin: 0;
303     cursor: pointer;
304     color: $body-color;
305     &:hover,
306     &:focus,
307     &[aria-selected="true"] {
308         background-color: $dropdown-link-active-bg;
309         color: $dropdown-link-active-color;
310     }
311     &::before {
312         content: "\200B";
313     }
316 .form-autocomplete-downarrow {
317     color: $body-color;
318     top: 0.2rem;
319     right: 0.5rem;
320     cursor: pointer;
321     .loading-icon {
322         position: absolute;
323         top: 0;
324         left: 0;
325         background-color: $white;
326     }
329 /** Undo some bootstrap things */
330 .form-autocomplete-selection + input.form-control {
331     width: auto;
332     display: inline-block;
333     vertical-align: middle;
336 .form-autocomplete-selection [data-active-selection=true] {
337     padding: 0.5em;
338     font-size: large;
341 /* Non-bootstrap selects with a size show their contents outside of the element.
342  * Remove when we update to stable bootstrap 4. (MDL-56511) */
343 select[size],
344 select[multiple] {
345     overflow: auto;
348 select[size="1"] {
349     overflow: visible;
352 textarea[data-auto-rows] {
353     overflow-x: hidden;
354     resize: none;
357 /** Display elements under labels in vertical forms regardless of the screen size. */
358 .mform.full-width-labels {
359     .fitem.row {
360         margin-left: 0;
361         margin-right: 0;
362         & > .col-md-3,
363         & > .col-md-9 {
364             float: none;
365             width: inherit;
366             padding-right: 0;
367             padding-left: 0;
368         }
369         &.femptylabel > .col-md-3 {
370             display: none;
371         }
372     }
375 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
376 .form-inline {
377     @include media-breakpoint-up(md) {
378         .col-md-9,
379         .col-md-3 {
380             label {
381                 margin-left: 1rem;
382             }
383             margin-bottom: 1rem;
384             width: auto;
385         }
386     }
389 [data-fieldtype="modgrade"] .form-group {
390     padding-bottom: $input-padding-y;
393 // We dont' use the mixin because it's expensive.
394 [data-fieldtype="modgrade"] {
395     background-color: $card-bg;
396     @include border-radius($card-border-radius);
397     border: $card-border-width solid $card-border-color;
398     padding: $card-spacer-x;
399     margin-left: $grid-gutter-width / 2;
400     max-width: 30rem;
403 // Styles for the JS file types browser provided by the "filetypes" element.
404 [data-filetypesbrowserbody] {
405     [aria-expanded="false"] > [role="group"],
406     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
407     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
408         display: none;
409     }
412 // The autocomplete popup needs a display:block container to correctly position to popup.
413 .form-inline[data-fieldtype="autocomplete"],
414 .form-inline[data-fieldtype="tags"] {
415     display: block;
418 // Show editor at 100% width by default.
419 [data-fieldtype="editor"] > div {
420     flex-grow: 1;
423 @include media-breakpoint-up(sm) {
424     .mform fieldset {
425         margin-left: $spacer * 1.5;
426     }
427     .mform fieldset.collapsible legend a.fheader {
428         padding: 0 5px 0 ($spacer * 1.5);
429         margin-left: -($spacer * 1.5);
430         background: url([[pix:t/expanded]]) 0 center no-repeat;
431     }
433     .mform fieldset.collapsed legend a.fheader {
434         /*rtl:raw:
435         background-image: url([[pix:t/collapsed_rtl]]);
436         */
437         /*rtl:remove*/
438         background-image: url([[pix:t/collapsed]]);
439     }
441     .mform {
442         .form-inline {
443             .fdefaultcustom {
444                 label {
445                     justify-content: initial;
446                 }
447             }
448         }
449     }
452 // Form inset on the left/right.
453 // Used to display an icon/button within the form control.
454 .input-group {
455     &.form-inset {
456         .form-inset-item {
457             position: absolute;
458             padding-top: calc(#{$input-padding-y} + #{$input-border-width});
459             z-index: 3;
460         }
462         &.form-inset-left {
463             .form-control {
464                 padding-left: $spacer * 1.5;
465             }
466         }
468         &.form-inset-right {
469             .form-control {
470                 padding-right: $spacer * 1.5;
471             }
472             .form-inset-item {
473                 right: 0;
474             }
475         }
476     }