MDL-69395 theme_boost: improve colour contrast for form input fields
[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 #adminsettings .form-control[size] {
60     width: auto;
61 }
63 .jsenabled .mform .collapsed .fcontainer {
64     display: none;
65 }
67 #adminsettings .error {
68     color: $danger;
69 }
71 .mform ul.file-list {
72     padding: 0;
73     margin: 0;
74     list-style: none;
75 }
77 .mform label .req,
78 .mform label .adv {
79     cursor: help;
80 }
81 /*rtl:ignore*/
82 input#id_externalurl {
83     direction: ltr;
84 }
86 #portfolio-add-button {
87     display: inline;
88 }
90 .form-defaultinfo,
91 .form-label .form-shortname {
92     color: $text-muted;
93 }
95 .form-label .form-shortname {
96     font-size: $font-size-xs;
97     display: block;
98 }
100 .form-item .form-inline {
101     display: inline;
104 .form-inline label:not(.sr-only):not(.accesshide) + select {
105     margin-left: 0.5rem;
108 .formsettingheading .form-horizontal {
109     color: $text-muted;
112 // Moodle doesn't differentiate between what Bootstrap calls
113 // .uneditable-inputs and form help text. Styling them both as
114 // uneditable looks ugly, styling both as form help is fairly
115 // subtle in it's impact. Going for the latter as the best option.
116 .no-felement.fstatic {
117     color: $text-muted;
118     padding-top: 5px;
121 .no-fitem .fstaticlabel {
122     font-weight: bold;
125 .form-item .form-setting .defaultsnext > input {
126     display: inline-block;
129 .form-item .form-setting .form-checkbox.defaultsnext {
130     // Need to specify .defaultsnext and the .form-checkbox class
131     // is somewhat randomly re-used on various actual checkboxes
132     // throughout the admin forms, instead of on the wrapper div.
133     margin-top: 5px; // Push down checkboxes to align.
134     display: inline-block; // So above style sticks.
137 #adminsettings h3 {
138     // Copied from bootstrap/forms.less tag legend.
139     display: block;
140     width: 100%;
141     padding: 0;
142     margin-bottom: $line-height-base;
143     font-size: $font-size-lg;
144     line-height: $line-height-base * 2;
145     border: 0;
146     border-bottom: 1px solid #e5e5e5;
149 // I think this could be avoided (or at least tidied up) ifr
150 // we used HTML5 input types like url, phone, email, number etc.
151 /* rtl:ignore */
152 .mform .fitem .felement input[name="email"],
153 .mform .fitem .felement input[name="email2"],
154 .mform .fitem .felement input[name="url"],
155 .mform .fitem .felement input[name="idnumber"],
156 .mform .fitem .felement input[name="phone1"],
157 .mform .fitem .felement input[name="phone2"] {
158     text-align: left;
159     direction: ltr;
162 // Reduce the mediaplugin width when using inside forms.
163 .que.match .mediaplugin {
164     width: 50vw;
167 /* rtl:ignore */
168 #page-admin-grade-edit-scale-edit .error input#id_name {
169     margin-right: 170px;
172 #page-grade-edit-outcome-course .courseoutcomes {
173     margin-left: auto;
174     margin-right: auto;
175     width: 100%;
178 #page-grade-edit-outcome-course .courseoutcomes td {
179     text-align: center;
181 /* Install Process' text fields Forms, should always be justified to the left */
182 /* rtl:ignore */
183 #installform #id_wwwroot,
184 #installform #id_dirroot,
185 #installform #id_dataroot,
186 #installform #id_dbhost,
187 #installform #id_dbname,
188 #installform #id_dbuser,
189 #installform #id_dbpass,
190 #installform #id_prefix {
191     direction: ltr;
194 .mdl-right > label {
195     // Workaround for repository pop-up because the : are outside the label,
196     // can/should be fixed in filemanager renderers.
197     display: inline-block;
200 .singleselect {
201     max-width: 100%;
204 .form-item .form-label label {
205     margin-bottom: 0;
208 div#dateselector-calendar-panel {
209     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
212 fieldset.coursesearchbox label {
213     display: inline;
216 /**
217  * Show the labels above text editors and file managers except on wide screens.
218  */
221 /* Section and module editing forms contain special JS components for the
222    availability system (if enabled). */
223 #id_availabilityconditionsjson[aria-hidden=true],
224 .availability-field [aria-hidden=true] {
225     display: none;
228 .availability-field {
229     label {
230         display: inline-flex;
231     }
232     .availability-group label {
233         vertical-align: top;
234     }
237 .availability-eye {
238     clear: left;
239     float: left;
241 .availability-inner,
242 .availability-plugincontrols {
243     float: left;
244     @include border-radius($card-border-radius);
245     border: $card-border-width solid $card-border-color;
246     padding: 1rem;
247     margin-top: 0.5rem;
249 .availability-plugincontrols,
250 .availability-childlist .availability-inner {
251     margin-left: .625rem;
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-selection [role=listitem] {
279     cursor: pointer;
280     white-space: inherit;
281     word-break: break-word;
282     line-height: 1.4;
283     text-align: left;
286 .form-autocomplete-suggestions {
287     position: absolute;
288     background-color: white;
289     border: 2px solid $gray-300;
290     border-radius: 3px;
291     min-width: 206px;
292     max-height: 20em;
293     overflow: auto;
294     margin: 0;
295     padding: 0;
296     margin-top: 0.4em;
297     z-index: 1;
300 .form-autocomplete-suggestions li {
301     list-style-type: none;
302     padding: 0.2em;
303     margin: 0;
304     cursor: pointer;
305     color: $body-color;
308 .form-autocomplete-suggestions li:hover {
309     background-color: lighten($dropdown-link-active-bg, 15%);
310     color: $dropdown-link-active-color;
313 .form-autocomplete-suggestions li[aria-selected=true] {
314     background-color: darken($dropdown-bg, 5%);
315     color: $gray-700;
318 .form-autocomplete-downarrow {
319     color: $body-color;
320     top: 0.2rem;
321     right: 0.5rem;
322     cursor: pointer;
323     .loading-icon {
324         position: absolute;
325         top: 0;
326         left: 0;
327         background-color: $white;
328     }
331 .form-autocomplete-selection:focus {
332     outline: none;
334 /** Undo some bootstrap things */
335 .form-autocomplete-selection + input.form-control {
336     width: auto;
337     display: inline-block;
338     vertical-align: middle;
341 .form-autocomplete-selection [data-active-selection=true] {
342     padding: 0.5em;
343     font-size: large;
346 /* Non-bootstrap selects with a size show their contents outside of the element.
347  * Remove when we update to stable bootstrap 4. (MDL-56511) */
348 select[size],
349 select[multiple] {
350     overflow: auto;
353 select[size="1"] {
354     overflow: visible;
357 textarea[data-auto-rows] {
358     overflow-x: hidden;
359     resize: none;
362 /** Display elements under labels in vertical forms regardless of the screen size. */
363 .mform.full-width-labels {
364     .fitem.row {
365         margin-left: 0;
366         margin-right: 0;
367         & > .col-md-3,
368         & > .col-md-9 {
369             float: none;
370             width: inherit;
371             padding-right: 0;
372             padding-left: 0;
373         }
374         &.femptylabel > .col-md-3 {
375             display: none;
376         }
377     }
380 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
381 .form-inline {
382     @include media-breakpoint-up(md) {
383         .col-md-9,
384         .col-md-3 {
385             label {
386                 margin-left: 1rem;
387             }
388             margin-bottom: 1rem;
389             width: auto;
390         }
391     }
394 [data-fieldtype="modgrade"] .form-group {
395     padding-bottom: $input-padding-y;
398 // We dont' use the mixin because it's expensive.
399 [data-fieldtype="modgrade"] {
400     background-color: $card-bg;
401     @include border-radius($card-border-radius);
402     border: $card-border-width solid $card-border-color;
403     padding: $card-spacer-x;
404     margin-left: $grid-gutter-width / 2;
405     max-width: 30rem;
408 // Styles for the JS file types browser provided by the "filetypes" element.
409 [data-filetypesbrowserbody] {
410     [aria-expanded="false"] > [role="group"],
411     [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
412     [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
413         display: none;
414     }
417 // The autocomplete popup needs a display:block container to correctly position to popup.
418 .form-inline[data-fieldtype="autocomplete"],
419 .form-inline[data-fieldtype="tags"] {
420     display: block;
423 // Show editor at 100% width by default.
424 [data-fieldtype="editor"] > div {
425     flex-grow: 1;
428 @include media-breakpoint-up(sm) {
429     .mform fieldset {
430         margin-left: $spacer * 1.5;
431     }
432     .mform fieldset.collapsible legend a.fheader {
433         padding: 0 5px 0 ($spacer * 1.5);
434         margin-left: -($spacer * 1.5);
435         background: url([[pix:t/expanded]]) 0 center no-repeat;
436     }
438     .mform fieldset.collapsed legend a.fheader {
439         /*rtl:raw:
440         background-image: url([[pix:t/collapsed_rtl]]);
441         */
442         /*rtl:remove*/
443         background-image: url([[pix:t/collapsed]]);
444     }
446     .mform {
447         .form-inline {
448             .fdefaultcustom {
449                 label {
450                     justify-content: initial;
451                 }
452             }
453         }
454     }
457 // Form inset on the left/right.
458 // Used to display an icon/button within the form control.
459 .input-group {
460     &.form-inset {
461         .form-inset-item {
462             position: absolute;
463             padding-top: calc(#{$input-padding-y} + #{$input-border-width});
464             z-index: 3;
465         }
467         &.form-inset-left {
468             .form-control {
469                 padding-left: $spacer * 1.5;
470             }
471         }
473         &.form-inset-right {
474             .form-control {
475                 padding-right: $spacer * 1.5;
476             }
477             .form-inset-item {
478                 right: 0;
479             }
480         }
481     }