MDL-69395 theme_boost: improve colour contrast for form input fields
[moodle.git] / theme / boost / scss / moodle / forms.scss
CommitLineData
536f0460
DW
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 */
7
536f0460
DW
8.jsenabled .mform .containsadvancedelements .advanced {
9 display: none;
10}
f4143537 11
536f0460 12.mform .containsadvancedelements .advanced.show {
a24bf64f 13 display: flex;
536f0460 14}
f4143537 15
536f0460
DW
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}
f4143537 24
a4a6d85b
FM
25.mform .form-inline {
26 .form-control,
27 .custom-select {
28 max-width: 100%;
29 }
3ec69c2e 30 .form-group {
f0173412 31 margin: 0.1rem 0.25rem 0.1rem 0;
3ec69c2e 32 }
b197ab35
BB
33 br + label {
34 justify-content: flex-start;
35 width: 100%;
36 }
3ec69c2e
BB
37}
38
2660e38f
DW
39.unresponsive.mform .form-inline,
40.unresponsive.mform .form-inline label {
41 display: inline-flex;
42}
43
3ec69c2e
BB
44#jump-to-activity.custom-select {
45 width: 100%;
a4a6d85b
FM
46}
47
e919c488 48.mform fieldset {
137c289a
FM
49 margin-bottom: $spacer / 2;
50 border-bottom: $border-width solid $table-border-color;
e919c488 51}
92bc86e4
BB
52
53@include media-breakpoint-up(sm) {
54 .mform > .form-group {
55 margin-left: $spacer * 1.5;
56 }
3ec69c2e 57}
f4143537 58
f9c1a751
NK
59#adminsettings .form-control[size] {
60 width: auto;
61}
62
536f0460
DW
63.jsenabled .mform .collapsed .fcontainer {
64 display: none;
65}
f4143537 66
91bda4cd 67#adminsettings .error {
4394f9e3 68 color: $danger;
536f0460 69}
f4143537 70
536f0460
DW
71.mform ul.file-list {
72 padding: 0;
73 margin: 0;
74 list-style: none;
75}
f4143537 76
536f0460
DW
77.mform label .req,
78.mform label .adv {
79 cursor: help;
80}
536f0460
DW
81/*rtl:ignore*/
82input#id_externalurl {
83 direction: ltr;
84}
f4143537 85
536f0460
DW
86#portfolio-add-button {
87 display: inline;
88}
89
536f0460
DW
90.form-defaultinfo,
91.form-label .form-shortname {
6239d808 92 color: $text-muted;
536f0460 93}
f4143537 94
536f0460
DW
95.form-label .form-shortname {
96 font-size: $font-size-xs;
97 display: block;
98}
2c773bb3 99
2c773bb3
FM
100.form-item .form-inline {
101 display: inline;
102}
536f0460 103
3ec69c2e
BB
104.form-inline label:not(.sr-only):not(.accesshide) + select {
105 margin-left: 0.5rem;
106}
107
536f0460 108.formsettingheading .form-horizontal {
6239d808 109 color: $text-muted;
536f0460 110}
2c773bb3 111
536f0460
DW
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.
91bda4cd 116.no-felement.fstatic {
6239d808 117 color: $text-muted;
536f0460
DW
118 padding-top: 5px;
119}
f4143537 120
91bda4cd 121.no-fitem .fstaticlabel {
536f0460
DW
122 font-weight: bold;
123}
124
2c773bb3
FM
125.form-item .form-setting .defaultsnext > input {
126 display: inline-block;
127}
f4143537 128
536f0460
DW
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.
135}
136
137#adminsettings h3 {
138 // Copied from bootstrap/forms.less tag legend.
139 display: block;
140 width: 100%;
141 padding: 0;
da92b738 142 margin-bottom: $line-height-base;
536f0460 143 font-size: $font-size-lg;
da92b738 144 line-height: $line-height-base * 2;
536f0460
DW
145 border: 0;
146 border-bottom: 1px solid #e5e5e5;
147}
536f0460
DW
148
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 */
8a5613f6
CB
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"] {
536f0460
DW
158 text-align: left;
159 direction: ltr;
160}
113efed5 161
8c16d50e
P
162// Reduce the mediaplugin width when using inside forms.
163.que.match .mediaplugin {
164 width: 50vw;
165}
166
536f0460
DW
167/* rtl:ignore */
168#page-admin-grade-edit-scale-edit .error input#id_name {
169 margin-right: 170px;
170}
f4143537 171
536f0460
DW
172#page-grade-edit-outcome-course .courseoutcomes {
173 margin-left: auto;
174 margin-right: auto;
175 width: 100%;
176}
f4143537 177
536f0460 178#page-grade-edit-outcome-course .courseoutcomes td {
f4143537 179 text-align: center;
536f0460
DW
180}
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;
192}
193
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;
198}
199
32e3a8dd
FM
200.singleselect {
201 max-width: 100%;
202}
203
536f0460
DW
204.form-item .form-label label {
205 margin-bottom: 0;
206}
f4143537 207
536f0460
DW
208div#dateselector-calendar-panel {
209 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
210}
211
212fieldset.coursesearchbox label {
213 display: inline;
214}
215
216/**
217 * Show the labels above text editors and file managers except on wide screens.
218 */
536f0460
DW
219
220
536f0460
DW
221/* Section and module editing forms contain special JS components for the
222 availability system (if enabled). */
63e4df60
DW
223#id_availabilityconditionsjson[aria-hidden=true],
224.availability-field [aria-hidden=true] {
225 display: none;
226}
227
95d7c77b
BB
228.availability-field {
229 label {
230 display: inline-flex;
231 }
232 .availability-group label {
233 vertical-align: top;
234 }
235}
236
560a43f2
DW
237.availability-eye {
238 clear: left;
239 float: left;
240}
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;
95d7c77b
BB
246 padding: 1rem;
247 margin-top: 0.5rem;
248}
249.availability-plugincontrols,
250.availability-childlist .availability-inner {
251 margin-left: .625rem;
560a43f2
DW
252}
253.availability-field .availability-plugincontrols .availability-group select {
254 max-width: 12rem;
536f0460
DW
255}
256
536f0460 257/* Custom styles for autocomplete form element */
d8e57f02
DW
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;
2bc3246f 269 margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
d8e57f02
DW
270 vertical-align: bottom;
271}
536f0460 272.form-autocomplete-selection {
2bc3246f 273 margin: $input-padding-y-sm;
3ec69c2e 274 // Padding top and bottom, plus mb-1 and the 100% lineheight.
2bc3246f 275 min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
536f0460 276}
f4143537 277
9cbeaec2 278.form-autocomplete-selection [role=listitem] {
536f0460 279 cursor: pointer;
86ea9e63
BB
280 white-space: inherit;
281 word-break: break-word;
282 line-height: 1.4;
283 text-align: left;
536f0460
DW
284}
285
286.form-autocomplete-suggestions {
287 position: absolute;
288 background-color: white;
4394f9e3 289 border: 2px solid $gray-300;
536f0460
DW
290 border-radius: 3px;
291 min-width: 206px;
292 max-height: 20em;
293 overflow: auto;
fde35b8f
DP
294 margin: 0;
295 padding: 0;
91bda4cd 296 margin-top: 0.4em;
536f0460
DW
297 z-index: 1;
298}
f4143537 299
536f0460
DW
300.form-autocomplete-suggestions li {
301 list-style-type: none;
302 padding: 0.2em;
303 margin: 0;
304 cursor: pointer;
305 color: $body-color;
306}
f4143537 307
536f0460
DW
308.form-autocomplete-suggestions li:hover {
309 background-color: lighten($dropdown-link-active-bg, 15%);
310 color: $dropdown-link-active-color;
311}
f4143537 312
536f0460
DW
313.form-autocomplete-suggestions li[aria-selected=true] {
314 background-color: darken($dropdown-bg, 5%);
4394f9e3 315 color: $gray-700;
536f0460
DW
316}
317
318.form-autocomplete-downarrow {
319 color: $body-color;
b101ce58
BB
320 top: 0.2rem;
321 right: 0.5rem;
536f0460 322 cursor: pointer;
df5feea4
AN
323 .loading-icon {
324 position: absolute;
325 top: 0;
326 left: 0;
327 background-color: $white;
328 }
536f0460
DW
329}
330
331.form-autocomplete-selection:focus {
332 outline: none;
333}
9629c86f 334/** Undo some bootstrap things */
2fa35b8d 335.form-autocomplete-selection + input.form-control {
9629c86f
DW
336 width: auto;
337 display: inline-block;
2fa35b8d 338 vertical-align: middle;
9629c86f 339}
f4143537 340
536f0460
DW
341.form-autocomplete-selection [data-active-selection=true] {
342 padding: 0.5em;
343 font-size: large;
344}
91bda4cd 345
e44bd69a
DP
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) */
fcd41247 348select[size],
91bda4cd
DW
349select[multiple] {
350 overflow: auto;
351}
3ec69c2e 352
8a5613f6 353select[size="1"] {
fcd41247
DW
354 overflow: visible;
355}
963ba889
RW
356
357textarea[data-auto-rows] {
358 overflow-x: hidden;
bf7018b6 359 resize: none;
963ba889 360}
058f2fb6 361
3dee4fae
MG
362/** Display elements under labels in vertical forms regardless of the screen size. */
363.mform.full-width-labels {
f9af5427 364 .fitem.row {
3dee4fae
MG
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 }
378}
379
058f2fb6
DW
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 }
392}
f43155b6
DW
393
394[data-fieldtype="modgrade"] .form-group {
395 padding-bottom: $input-padding-y;
396}
397
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;
406}
c1ae9079 407
8b493eb0
DM
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 }
415}
31c04fec
BB
416
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;
421}
ede6125a
BB
422
423// Show editor at 100% width by default.
424[data-fieldtype="editor"] > div {
425 flex-grow: 1;
5b98200f
AN
426}
427
95d7c77b
BB
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 }
437
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 }
4631f8b0
LB
445
446 .mform {
447 .form-inline {
448 .fdefaultcustom {
449 label {
450 justify-content: initial;
451 }
452 }
453 }
454 }
95d7c77b 455}
57732a1c
AN
456
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 {
80465b87 462 position: absolute;
57732a1c
AN
463 padding-top: calc(#{$input-padding-y} + #{$input-border-width});
464 z-index: 3;
465 }
466
467 &.form-inset-left {
468 .form-control {
80465b87 469 padding-left: $spacer * 1.5;
57732a1c
AN
470 }
471 }
472
473 &.form-inset-right {
474 .form-control {
80465b87 475 padding-right: $spacer * 1.5;
57732a1c
AN
476 }
477 .form-inset-item {
478 right: 0;
479 }
480 }
481 }
482}