e60306ec40f2923cc4ae0cdba007649c252fbbf4
[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 }
53 @include media-breakpoint-up(sm) {
54     .mform > .form-group {
55         margin-left: $spacer * 1.5;
56     }
57 }
59 .editor_atto_content.form-control {
60     width: 100%;
61 }
63 #adminsettings .form-control[size] {
64     width: auto;
65 }
67 .jsenabled .mform .collapsed .fcontainer {
68     display: none;
69 }
71 #adminsettings .error {
72     color: $danger;
73 }
75 .mform ul.file-list {
76     padding: 0;
77     margin: 0;
78     list-style: none;
79 }
81 .mform label .req,
82 .mform label .adv {
83     cursor: help;
84 }
85 /*rtl:ignore*/
86 input#id_externalurl {
87     direction: ltr;
88 }
90 #portfolio-add-button {
91     display: inline;
92 }
94 .form-defaultinfo,
95 .form-label .form-shortname {
96     color: $text-muted;
97 }
99 .form-label .form-shortname {
100     font-size: $font-size-xs;
101     display: block;
104 .form-item .form-inline {
105     display: inline;
108 .form-inline label:not(.sr-only):not(.accesshide) + select {
109     margin-left: 0.5rem;
112 .formsettingheading .form-horizontal {
113     color: $text-muted;
116 // Moodle doesn't differentiate between what Bootstrap calls
117 // .uneditable-inputs and form help text. Styling them both as
118 // uneditable looks ugly, styling both as form help is fairly
119 // subtle in it's impact. Going for the latter as the best option.
120 .no-felement.fstatic {
121     color: $text-muted;
122     padding-top: 5px;
125 .no-fitem .fstaticlabel {
126     font-weight: bold;
129 .form-item .form-setting .defaultsnext > input {
130     display: inline-block;
133 .form-item .form-setting .form-checkbox.defaultsnext {
134     // Need to specify .defaultsnext and the .form-checkbox class
135     // is somewhat randomly re-used on various actual checkboxes
136     // throughout the admin forms, instead of on the wrapper div.
137     margin-top: 5px; // Push down checkboxes to align.
138     display: inline-block; // So above style sticks.
141 #adminsettings h3 {
142     // Copied from bootstrap/forms.less tag legend.
143     display: block;
144     width: 100%;
145     padding: 0;
146     margin-bottom: $line-height-base;
147     font-size: $font-size-lg;
148     line-height: $line-height-base * 2;
149     border: 0;
150     border-bottom: 1px solid #e5e5e5;
153 // I think this could be avoided (or at least tidied up) ifr
154 // we used HTML5 input types like url, phone, email, number etc.
155 /* rtl:ignore */
156 .mform .fitem .felement input[name="email"],
157 .mform .fitem .felement input[name="email2"],
158 .mform .fitem .felement input[name="url"],
159 .mform .fitem .felement input[name="idnumber"],
160 .mform .fitem .felement input[name="phone1"],
161 .mform .fitem .felement input[name="phone2"] {
162     text-align: left;
163     direction: ltr;
166 // Reduce the mediaplugin width when using inside forms.
167 .que.match .mediaplugin {
168     width: 50vw;
171 /* rtl:ignore */
172 #page-admin-grade-edit-scale-edit .error input#id_name {
173     margin-right: 170px;
176 #page-grade-edit-outcome-course .courseoutcomes {
177     margin-left: auto;
178     margin-right: auto;
179     width: 100%;
182 #page-grade-edit-outcome-course .courseoutcomes td {
183     text-align: center;
185 /* Install Process' text fields Forms, should always be justified to the left */
186 /* rtl:ignore */
187 #installform #id_wwwroot,
188 #installform #id_dirroot,
189 #installform #id_dataroot,
190 #installform #id_dbhost,
191 #installform #id_dbname,
192 #installform #id_dbuser,
193 #installform #id_dbpass,
194 #installform #id_prefix {
195     direction: ltr;
198 .mdl-right > label {
199     // Workaround for repository pop-up because the : are outside the label,
200     // can/should be fixed in filemanager renderers.
201     display: inline-block;
204 .singleselect {
205     max-width: 100%;
208 .form-item .form-label label {
209     margin-bottom: 0;
212 div#dateselector-calendar-panel {
213     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
216 fieldset.coursesearchbox label {
217     display: inline;
220 /**
221  * Show the labels above text editors and file managers except on wide screens.
222  */
225 /* Section and module editing forms contain special JS components for the
226    availability system (if enabled). */
227 #id_availabilityconditionsjson[aria-hidden=true],
228 .availability-field [aria-hidden=true] {
229     display: none;
232 .availability-field {
233     label {
234         display: inline-flex;
235     }
236     .availability-group label {
237         vertical-align: top;
238     }
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: 1rem;
251     margin-top: 0.5rem;
253 .availability-plugincontrols,
254 .availability-childlist .availability-inner {
255     margin-left: .625rem;
257 .availability-field .availability-plugincontrols .availability-group select {
258     max-width: 12rem;
261 /* Custom styles for autocomplete form element */
262 /* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
263 [data-fieldtype=autocomplete] select,
264 [data-fieldtype=tags] select,
265 .form-autocomplete-original-select {
266     visibility: hidden;
267     overflow: hidden;
268     width: 15rem;
269     height: 44px;
270     margin: 0;
271     padding: 0;
272     border: 0;
273     margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
274     vertical-align: bottom;
276 .form-autocomplete-selection {
277     margin: $input-padding-y-sm;
278     // Padding top and bottom, plus mb-1 and the 100% lineheight.
279     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
282 .form-autocomplete-selection [role=listitem] {
283     cursor: pointer;
284     white-space: inherit;
285     word-break: break-word;
286     line-height: 1.4;
287     text-align: left;
290 .form-autocomplete-suggestions {
291     position: absolute;
292     background-color: white;
293     border: 2px solid $gray-300;
294     border-radius: 3px;
295     min-width: 206px;
296     max-height: 20em;
297     overflow: auto;
298     margin: 0;
299     padding: 0;
300     margin-top: 0.4em;
301     z-index: 1;
304 .form-autocomplete-suggestions li {
305     list-style-type: none;
306     padding: 0.2em;
307     margin: 0;
308     cursor: pointer;
309     color: $body-color;
312 .form-autocomplete-suggestions li:hover {
313     background-color: lighten($dropdown-link-active-bg, 15%);
314     color: $dropdown-link-active-color;
317 .form-autocomplete-suggestions li[aria-selected=true] {
318     background-color: darken($dropdown-bg, 5%);
319     color: $gray-700;
322 .form-autocomplete-downarrow {
323     color: $body-color;
324     top: 0.2rem;
325     right: 0.5rem;
326     cursor: pointer;
327     .loading-icon {
328         position: absolute;
329         top: 0;
330         left: 0;
331         background-color: $white;
332     }
335 .form-autocomplete-selection:focus {
336     outline: none;
338 /** Undo some bootstrap things */
339 .form-autocomplete-selection + input.form-control {
340     width: auto;
341     display: inline-block;
342     vertical-align: middle;
345 .form-autocomplete-selection [data-active-selection=true] {
346     padding: 0.5em;
347     font-size: large;
350 /* Non-bootstrap selects with a size show their contents outside of the element.
351  * Remove when we update to stable bootstrap 4. (MDL-56511) */
352 select[size],
353 select[multiple] {
354     overflow: auto;
357 select[size="1"] {
358     overflow: visible;
361 textarea[data-auto-rows] {
362     overflow-x: hidden;
363     resize: none;
366 /** Display elements under labels in vertical forms regardless of the screen size. */
367 .mform.full-width-labels {
368     .fitem.row {
369         margin-left: 0;
370         margin-right: 0;
371         & > .col-md-3,
372         & > .col-md-9 {
373             float: none;
374             width: inherit;
375             padding-right: 0;
376             padding-left: 0;
377         }
378         &.femptylabel > .col-md-3 {
379             display: none;
380         }
381     }
384 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
385 .form-inline {
386     @include media-breakpoint-up(md) {
387         .col-md-9,
388         .col-md-3 {
389             label {
390                 margin-left: 1rem;
391             }
392             margin-bottom: 1rem;
393             width: auto;
394         }
395     }
398 [data-fieldtype="modgrade"] .form-group {
399     padding-bottom: $input-padding-y;
402 // We dont' use the mixin because it's expensive.
403 [data-fieldtype="modgrade"] {
404     background-color: $card-bg;
405     @include border-radius($card-border-radius);
406     border: $card-border-width solid $card-border-color;
407     padding: $card-spacer-x;
408     margin-left: $grid-gutter-width / 2;
409     max-width: 30rem;
412 /** Atto fields do not have form-control because that would break the layout of the editor.
413     So they need these extra styles to highlight the editor when there is a validation error. */
414 /* stylelint-disable function-url-scheme-blacklist */
415 $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
416 /* stylelint-enable function-url-scheme-blacklist */
417 .has-danger .editor_atto_content.form-control,
418 .has-danger .editor_atto_content.form-control-danger {
419     background-image: $form-icon-danger;
420     padding-right: ($input-padding-x * 3);
421     background-repeat: no-repeat;
422     background-position: center right 1rem;
423     background-size: 1.5rem;
426 // Styles for the JS file types browser provided by the "filetypes" element.
427 [data-filetypesbrowserbody] {
428     [aria-expanded="false"] > [role="group"],
429     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
430     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
431         display: none;
432     }
435 // The autocomplete popup needs a display:block container to correctly position to popup.
436 .form-inline[data-fieldtype="autocomplete"],
437 .form-inline[data-fieldtype="tags"] {
438     display: block;
441 // Show editor at 100% width by default.
442 [data-fieldtype="editor"] > div {
443     flex-grow: 1;
446 @include media-breakpoint-up(sm) {
447     .mform fieldset {
448         margin-left: $spacer * 1.5;
449     }
450     .mform fieldset.collapsible legend a.fheader {
451         padding: 0 5px 0 ($spacer * 1.5);
452         margin-left: -($spacer * 1.5);
453         background: url([[pix:t/expanded]]) 0 center no-repeat;
454     }
456     .mform fieldset.collapsed legend a.fheader {
457         /*rtl:raw:
458         background-image: url([[pix:t/collapsed_rtl]]);
459         */
460         /*rtl:remove*/
461         background-image: url([[pix:t/collapsed]]);
462     }
464     .mform {
465         .form-inline {
466             .fdefaultcustom {
467                 label {
468                     justify-content: initial;
469                 }
470             }
471         }
472     }
475 // Form inset on the left/right.
476 // Used to display an icon/button within the form control.
477 .input-group {
478     &.form-inset {
479         .form-inset-item {
480             position: absolute;
481             padding-top: calc(#{$input-padding-y} + #{$input-border-width});
482             z-index: 3;
483         }
485         &.form-inset-left {
486             .form-control {
487                 padding-left: $spacer * 1.5;
488             }
489         }
491         &.form-inset-right {
492             .form-control {
493                 padding-right: $spacer * 1.5;
494             }
495             .form-inset-item {
496                 right: 0;
497             }
498         }
499     }