987b5b202d1197c1cf365075b5026569cfa4ae57
[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     }
37 }
39 .unresponsive.mform .form-inline,
40 .unresponsive.mform .form-inline label {
41     display: inline-flex;
42 }
44 #jump-to-activity.custom-select {
45     width: 100%;
46 }
48 .mform fieldset {
49     margin-bottom: $spacer / 2;
50     border-bottom: $border-width solid $table-border-color;
51 }
52 .mform > .form-group {
53     margin-left: $spacer * 1.5;
54 }
56 .editor_atto_content.form-control {
57     width: 100%;
58 }
60 #adminsettings .form-control[size] {
61     width: auto;
62 }
64 .jsenabled .mform .collapsed .fcontainer {
65     display: none;
66 }
68 #adminsettings .error {
69     color: $state-danger-text;
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     @extend .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     @extend .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     @extend .text-muted;
119     padding-top: 5px;
122 .no-fitem .fstaticlabel {
123     font-weight: bold;
126 // Pale grey container for submit buttons.
127 .form-buttons,
128 .path-admin .buttons,
129 #fitem_id_submitbutton,
130 .fp-content-center form + div,
131 div.backup-section + form,
132 #fgroup_id_buttonar {
133     @extend .form-group;
134     padding-left: 0;
137 .form-item .form-setting .defaultsnext > input {
138     display: inline-block;
141 .form-item .form-setting .form-checkbox.defaultsnext {
142     // Need to specify .defaultsnext and the .form-checkbox class
143     // is somewhat randomly re-used on various actual checkboxes
144     // throughout the admin forms, instead of on the wrapper div.
145     margin-top: 5px; // Push down checkboxes to align.
146     display: inline-block; // So above style sticks.
149 #adminsettings h3 {
150     // Copied from bootstrap/forms.less tag legend.
151     display: block;
152     width: 100%;
153     padding: 0;
154     margin-bottom: $line-height-base;
155     font-size: $font-size-lg;
156     line-height: $line-height-base * 2;
157     border: 0;
158     border-bottom: 1px solid #e5e5e5;
161 // I think this could be avoided (or at least tidied up) ifr
162 // we used HTML5 input types like url, phone, email, number etc.
163 /* rtl:ignore */
164 .mform .fitem .felement input[name="email"],
165 .mform .fitem .felement input[name="email2"],
166 .mform .fitem .felement input[name="url"],
167 .mform .fitem .felement input[name="idnumber"],
168 .mform .fitem .felement input[name="phone1"],
169 .mform .fitem .felement input[name="phone2"] {
170     text-align: left;
171     direction: ltr;
174 /* rtl:ignore */
175 #page-admin-grade-edit-scale-edit .error input#id_name {
176     margin-right: 170px;
179 #page-grade-edit-outcome-course .courseoutcomes {
180     margin-left: auto;
181     margin-right: auto;
182     width: 100%;
185 #page-grade-edit-outcome-course .courseoutcomes td {
186     text-align: center;
188 /* Install Process' text fields Forms, should always be justified to the left */
189 /* rtl:ignore */
190 #installform #id_wwwroot,
191 #installform #id_dirroot,
192 #installform #id_dataroot,
193 #installform #id_dbhost,
194 #installform #id_dbname,
195 #installform #id_dbuser,
196 #installform #id_dbpass,
197 #installform #id_prefix {
198     direction: ltr;
201 .mdl-right > label {
202     // Workaround for repository pop-up because the : are outside the label,
203     // can/should be fixed in filemanager renderers.
204     display: inline-block;
207 .singleselect {
208     max-width: 100%;
211 .form-item .form-label label {
212     margin-bottom: 0;
215 div#dateselector-calendar-panel {
216     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
219 fieldset.coursesearchbox label {
220     display: inline;
223 /**
224  * Show the labels above text editors and file managers except on wide screens.
225  */
228 /* Section and module editing forms contain special JS components for the
229    availability system (if enabled). */
230 #id_availabilityconditionsjson[aria-hidden=true],
231 .availability-field [aria-hidden=true] {
232     display: none;
235 .availability-field {
236     label {
237         display: inline-flex;
238     }
239     .availability-group label {
240         vertical-align: top;
241     }
244 .availability-eye {
245     clear: left;
246     float: left;
248 .availability-inner,
249 .availability-plugincontrols {
250     float: left;
251     @include border-radius($card-border-radius);
252     border: $card-border-width solid $card-border-color;
253     padding: 1rem;
254     margin-top: 0.5rem;
256 .availability-plugincontrols,
257 .availability-childlist .availability-inner {
258     margin-left: .625rem;
260 .availability-field .availability-plugincontrols .availability-group select {
261     max-width: 12rem;
264 /* Custom styles for autocomplete form element */
265 /* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
266 [data-fieldtype=autocomplete] select,
267 [data-fieldtype=tags] select,
268 .form-autocomplete-original-select {
269     visibility: hidden;
270     overflow: hidden;
271     width: 15rem;
272     height: 44px;
273     margin: 0;
274     padding: 0;
275     border: 0;
276     margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
277     vertical-align: bottom;
279 .form-autocomplete-selection {
280     margin: $input-padding-y-sm;
281     // Padding top and bottom, plus mb-1 and the 100% lineheight.
282     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
285 .form-autocomplete-multiple [role=listitem] {
286     cursor: pointer;
289 .form-autocomplete-suggestions {
290     position: absolute;
291     background-color: white;
292     border: 2px solid $gray-lighter;
293     border-radius: 3px;
294     min-width: 206px;
295     max-height: 20em;
296     overflow: auto;
297     margin: 0;
298     padding: 0;
299     margin-top: 0.4em;
300     z-index: 1;
303 .form-autocomplete-suggestions li {
304     list-style-type: none;
305     padding: 0.2em;
306     margin: 0;
307     cursor: pointer;
308     color: $body-color;
311 .form-autocomplete-suggestions li:hover {
312     background-color: lighten($dropdown-link-active-bg, 15%);
313     color: $dropdown-link-active-color;
316 .form-autocomplete-suggestions li[aria-selected=true] {
317     background-color: darken($dropdown-bg, 5%);
318     color: $gray;
321 .form-autocomplete-downarrow {
322     color: $body-color;
323     position: relative;
324     top: 0.2em;
325     left: -1.5em;
326     cursor: pointer;
329 .form-autocomplete-selection:focus {
330     outline: none;
332 /** Undo some bootstrap things */
333 .form-autocomplete-selection + input.form-control {
334     width: auto;
335     display: inline-block;
336     vertical-align: middle;
339 .form-autocomplete-selection [data-active-selection=true] {
340     padding: 0.5em;
341     font-size: large;
344 /* Non-bootstrap selects with a size show their contents outside of the element.
345  * Remove when we update to stable bootstrap 4. (MDL-56511) */
346 select[size],
347 select[multiple] {
348     overflow: auto;
351 select[size="1"] {
352     overflow: visible;
355 textarea[data-auto-rows] {
356     overflow-x: hidden;
359 /** Display elements under labels in vertical forms regardless of the screen size. */
360 .mform.full-width-labels {
361     .fitem.row {
362         margin-left: 0;
363         margin-right: 0;
364         & > .col-md-3,
365         & > .col-md-9 {
366             float: none;
367             width: inherit;
368             padding-right: 0;
369             padding-left: 0;
370         }
371         &.femptylabel > .col-md-3 {
372             display: none;
373         }
374     }
377 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
378 .form-inline {
379     @include media-breakpoint-up(md) {
380         .col-md-9,
381         .col-md-3 {
382             label {
383                 margin-left: 1rem;
384             }
385             margin-bottom: 1rem;
386             width: auto;
387         }
388     }
391 [data-fieldtype="modgrade"] .form-group {
392     padding-bottom: $input-padding-y;
395 // We dont' use the mixin because it's expensive.
396 [data-fieldtype="modgrade"] {
397     background-color: $card-bg;
398     @include border-radius($card-border-radius);
399     border: $card-border-width solid $card-border-color;
400     padding: $card-spacer-x;
401     margin-left: $grid-gutter-width / 2;
402     max-width: 30rem;
405 /** Atto fields do not have form-control because that would break the layout of the editor.
406     So they need these extra styles to highlight the editor when there is a validation error. */
407 .has-danger .editor_atto_content.form-control,
408 .has-danger .editor_atto_content.form-control-danger {
409     @include form-control-validation($brand-danger);
410     background-image: $form-icon-danger;
411     padding-right: ($input-padding-x * 3);
412     background-repeat: no-repeat;
413     background-position: center right 1rem;
414     background-size: 1.5rem;
417 // Styles for the JS file types browser provided by the "filetypes" element.
418 [data-filetypesbrowserbody] {
419     [aria-expanded="false"] > [role="group"],
420     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
421     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
422         display: none;
423     }
426 // The autocomplete popup needs a display:block container to correctly position to popup.
427 .form-inline[data-fieldtype="autocomplete"],
428 .form-inline[data-fieldtype="tags"] {
429     display: block;
432 // Show editor at 100% width by default.
433 [data-fieldtype="editor"] > div {
434     flex-grow: 1;
437 @include media-breakpoint-up(sm) {
438     .mform fieldset {
439         margin-left: $spacer * 1.5;
440     }
441     .mform fieldset.collapsible legend a.fheader {
442         padding: 0 5px 0 ($spacer * 1.5);
443         margin-left: -($spacer * 1.5);
444         background: url([[pix:t/expanded]]) 0 center no-repeat;
445     }
447     .mform fieldset.collapsed legend a.fheader {
448         /*rtl:raw:
449         background-image: url([[pix:t/collapsed_rtl]]);
450         */
451         /*rtl:remove*/
452         background-image: url([[pix:t/collapsed]]);
453     }