Merge branch 'MDL-62176-master' of git://github.com/bmbrands/moodle
[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-right: 0.25rem;
32     }
33 }
35 #jump-to-activity.custom-select {
36     width: 100%;
37 }
39 .mform fieldset {
40     margin-left: $spacer * 1.5;
41     margin-bottom: $spacer / 2;
42     border-bottom: $border-width solid $table-border-color;
43 }
44 .mform > .form-group {
45     margin-left: $spacer * 1.5;
46 }
48 .editor_atto_content.form-control {
49     width: 100%;
50 }
52 #adminsettings .form-control[size] {
53     width: auto;
54 }
56 .mform fieldset.collapsible legend a.fheader {
57     padding: 0 5px 0 ($spacer * 1.5);
58     margin-left: -($spacer * 1.5);
59     background: url([[pix:t/expanded]]) 0 center no-repeat;
60 }
62 .mform fieldset.collapsed legend a.fheader {
63     /*rtl:raw:
64     background-image: url([[pix:t/collapsed_rtl]]);
65     */
66     /*rtl:remove*/
67     background-image: url([[pix:t/collapsed]]);
68 }
70 .jsenabled .mform .collapsed .fcontainer {
71     display: none;
72 }
74 #adminsettings .error {
75     color: $state-danger-text;
76 }
78 .mform ul.file-list {
79     padding: 0;
80     margin: 0;
81     list-style: none;
82 }
84 .mform label .req,
85 .mform label .adv {
86     cursor: help;
87 }
88 /*rtl:ignore*/
89 input#id_externalurl {
90     direction: ltr;
91 }
93 #portfolio-add-button {
94     display: inline;
95 }
97 .form-defaultinfo,
98 .form-label .form-shortname {
99     @extend .text-muted;
102 .form-label .form-shortname {
103     font-size: $font-size-xs;
104     display: block;
107 .form-item .form-inline {
108     display: inline;
111 .form-inline label:not(.sr-only):not(.accesshide) + select {
112     margin-left: 0.5rem;
115 .formsettingheading .form-horizontal {
116     @extend .text-muted;
119 // Moodle doesn't differentiate between what Bootstrap calls
120 // .uneditable-inputs and form help text. Styling them both as
121 // uneditable looks ugly, styling both as form help is fairly
122 // subtle in it's impact. Going for the latter as the best option.
123 .no-felement.fstatic {
124     @extend .text-muted;
125     padding-top: 5px;
128 .no-fitem .fstaticlabel {
129     font-weight: bold;
132 // Pale grey container for submit buttons.
133 .form-buttons,
134 .path-admin .buttons,
135 #fitem_id_submitbutton,
136 .fp-content-center form + div,
137 div.backup-section + form,
138 #fgroup_id_buttonar {
139     @extend .form-group;
140     padding-left: 0;
143 .form-item .form-setting .defaultsnext > input {
144     display: inline-block;
147 .form-item .form-setting .form-checkbox.defaultsnext {
148     // Need to specify .defaultsnext and the .form-checkbox class
149     // is somewhat randomly re-used on various actual checkboxes
150     // throughout the admin forms, instead of on the wrapper div.
151     margin-top: 5px; // Push down checkboxes to align.
152     display: inline-block; // So above style sticks.
155 #adminsettings h3 {
156     // Copied from bootstrap/forms.less tag legend.
157     display: block;
158     width: 100%;
159     padding: 0;
160     margin-bottom: $line-height-base;
161     font-size: $font-size-lg;
162     line-height: $line-height-base * 2;
163     border: 0;
164     border-bottom: 1px solid #e5e5e5;
167 // I think this could be avoided (or at least tidied up) ifr
168 // we used HTML5 input types like url, phone, email, number etc.
169 /* rtl:ignore */
170 .mform .fitem .felement input[name="email"],
171 .mform .fitem .felement input[name="email2"],
172 .mform .fitem .felement input[name="url"],
173 .mform .fitem .felement input[name="idnumber"],
174 .mform .fitem .felement input[name="phone1"],
175 .mform .fitem .felement input[name="phone2"] {
176     text-align: left;
177     direction: ltr;
180 /* rtl:ignore */
181 #page-admin-grade-edit-scale-edit .error input#id_name {
182     margin-right: 170px;
185 #page-grade-edit-outcome-course .courseoutcomes {
186     margin-left: auto;
187     margin-right: auto;
188     width: 100%;
191 #page-grade-edit-outcome-course .courseoutcomes td {
192     text-align: center;
194 /* Install Process' text fields Forms, should always be justified to the left */
195 /* rtl:ignore */
196 #installform #id_wwwroot,
197 #installform #id_dirroot,
198 #installform #id_dataroot,
199 #installform #id_dbhost,
200 #installform #id_dbname,
201 #installform #id_dbuser,
202 #installform #id_dbpass,
203 #installform #id_prefix {
204     direction: ltr;
207 .mdl-right > label {
208     // Workaround for repository pop-up because the : are outside the label,
209     // can/should be fixed in filemanager renderers.
210     display: inline-block;
213 .singleselect {
214     max-width: 100%;
217 .form-item .form-label label {
218     margin-bottom: 0;
221 div#dateselector-calendar-panel {
222     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
225 fieldset.coursesearchbox label {
226     display: inline;
229 /**
230  * Show the labels above text editors and file managers except on wide screens.
231  */
234 /* Section and module editing forms contain special JS components for the
235    availability system (if enabled). */
236 #id_availabilityconditionsjson[aria-hidden=true],
237 .availability-field [aria-hidden=true] {
238     display: none;
241 .availability-eye {
242     clear: left;
243     float: left;
245 .availability-inner,
246 .availability-plugincontrols {
247     float: left;
248     @include border-radius($card-border-radius);
249     border: $card-border-width solid $card-border-color;
250     padding: $card-spacer-x / 2;
251     margin-left: $card-spacer-x / 2;
253 .availability-field .availability-plugincontrols .availability-group select {
254     max-width: 12rem;
257 /* Custom styles for autocomplete form element */
258 /* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
259 [data-fieldtype=autocomplete] select,
260 [data-fieldtype=tags] select,
261 .form-autocomplete-original-select {
262     visibility: hidden;
263     overflow: hidden;
264     width: 15rem;
265     height: 44px;
266     margin: 0;
267     padding: 0;
268     border: 0;
269     margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
270     vertical-align: bottom;
272 .form-autocomplete-selection {
273     margin: $input-padding-y-sm;
274     // Padding top and bottom, plus mb-1 and the 100% lineheight.
275     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
278 .form-autocomplete-multiple [role=listitem] {
279     cursor: pointer;
282 .form-autocomplete-suggestions {
283     position: absolute;
284     background-color: white;
285     border: 2px solid $gray-lighter;
286     border-radius: 3px;
287     min-width: 206px;
288     max-height: 20em;
289     overflow: auto;
290     margin: 0;
291     padding: 0;
292     margin-top: 0.4em;
293     z-index: 1;
296 .form-autocomplete-suggestions li {
297     list-style-type: none;
298     padding: 0.2em;
299     margin: 0;
300     cursor: pointer;
301     color: $body-color;
304 .form-autocomplete-suggestions li:hover {
305     background-color: lighten($dropdown-link-active-bg, 15%);
306     color: $dropdown-link-active-color;
309 .form-autocomplete-suggestions li[aria-selected=true] {
310     background-color: darken($dropdown-bg, 5%);
311     color: $gray;
314 .form-autocomplete-downarrow {
315     color: $body-color;
316     position: relative;
317     top: 0.2em;
318     left: -1.5em;
319     cursor: pointer;
322 .form-autocomplete-selection:focus {
323     outline: none;
325 /** Undo some bootstrap things */
326 .form-autocomplete-selection + input.form-control {
327     width: auto;
328     display: inline-block;
329     vertical-align: middle;
332 .form-autocomplete-selection [data-active-selection=true] {
333     padding: 0.5em;
334     font-size: large;
337 /* Non-bootstrap selects with a size show their contents outside of the element.
338  * Remove when we update to stable bootstrap 4. (MDL-56511) */
339 select[size],
340 select[multiple] {
341     overflow: auto;
344 select[size="1"] {
345     overflow: visible;
348 textarea[data-auto-rows] {
349     overflow-x: hidden;
352 /** Display elements under labels in vertical forms regardless of the screen size. */
353 .mform.full-width-labels {
354     .fitem.row {
355         margin-left: 0;
356         margin-right: 0;
357         & > .col-md-3,
358         & > .col-md-9 {
359             float: none;
360             width: inherit;
361             padding-right: 0;
362             padding-left: 0;
363         }
364         &.femptylabel > .col-md-3 {
365             display: none;
366         }
367     }
370 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
371 .form-inline {
372     @include media-breakpoint-up(md) {
373         .col-md-9,
374         .col-md-3 {
375             label {
376                 margin-left: 1rem;
377             }
378             margin-bottom: 1rem;
379             width: auto;
380         }
381     }
384 [data-fieldtype="modgrade"] .form-group {
385     padding-bottom: $input-padding-y;
388 // We dont' use the mixin because it's expensive.
389 [data-fieldtype="modgrade"] {
390     background-color: $card-bg;
391     @include border-radius($card-border-radius);
392     border: $card-border-width solid $card-border-color;
393     padding: $card-spacer-x;
394     margin-left: $grid-gutter-width / 2;
395     max-width: 30rem;
398 /** Atto fields do not have form-control because that would break the layout of the editor.
399     So they need these extra styles to highlight the editor when there is a validation error. */
400 .has-danger .editor_atto_content.form-control,
401 .has-danger .editor_atto_content.form-control-danger {
402     @include form-control-validation($brand-danger);
403     background-image: $form-icon-danger;
404     padding-right: ($input-padding-x * 3);
405     background-repeat: no-repeat;
406     background-position: center right ($input-height / 4);
407     background-size: ($input-height / 2) ($input-height / 2);
410 // Styles for the JS file types browser provided by the "filetypes" element.
411 [data-filetypesbrowserbody] {
412     [aria-expanded="false"] > [role="group"],
413     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
414     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
415         display: none;
416     }