weekly release 4.0dev
[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%;
1db3f668 36 margin-right: 0;
b197ab35 37 }
3ec69c2e
BB
38}
39
2660e38f
DW
40.unresponsive.mform .form-inline,
41.unresponsive.mform .form-inline label {
42 display: inline-flex;
43}
44
3ec69c2e
BB
45#jump-to-activity.custom-select {
46 width: 100%;
a4a6d85b
FM
47}
48
e919c488 49.mform fieldset {
137c289a
FM
50 margin-bottom: $spacer / 2;
51 border-bottom: $border-width solid $table-border-color;
e919c488 52}
92bc86e4
BB
53
54@include media-breakpoint-up(sm) {
55 .mform > .form-group {
56 margin-left: $spacer * 1.5;
57 }
3ec69c2e 58}
f4143537 59
f9c1a751
NK
60#adminsettings .form-control[size] {
61 width: auto;
62}
63
536f0460
DW
64.jsenabled .mform .collapsed .fcontainer {
65 display: none;
66}
f4143537 67
91bda4cd 68#adminsettings .error {
4394f9e3 69 color: $danger;
536f0460 70}
f4143537 71
536f0460
DW
72.mform ul.file-list {
73 padding: 0;
74 margin: 0;
75 list-style: none;
76}
f4143537 77
536f0460
DW
78.mform label .req,
79.mform label .adv {
80 cursor: help;
81}
536f0460
DW
82/*rtl:ignore*/
83input#id_externalurl {
84 direction: ltr;
85}
f4143537 86
536f0460
DW
87#portfolio-add-button {
88 display: inline;
89}
90
536f0460
DW
91.form-defaultinfo,
92.form-label .form-shortname {
6239d808 93 color: $text-muted;
536f0460 94}
f4143537 95
536f0460
DW
96.form-label .form-shortname {
97 font-size: $font-size-xs;
98 display: block;
99}
2c773bb3 100
2c773bb3
FM
101.form-item .form-inline {
102 display: inline;
103}
536f0460 104
3ec69c2e
BB
105.form-inline label:not(.sr-only):not(.accesshide) + select {
106 margin-left: 0.5rem;
107}
108
536f0460 109.formsettingheading .form-horizontal {
6239d808 110 color: $text-muted;
536f0460 111}
2c773bb3 112
536f0460
DW
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.
91bda4cd 117.no-felement.fstatic {
6239d808 118 color: $text-muted;
536f0460
DW
119 padding-top: 5px;
120}
f4143537 121
91bda4cd 122.no-fitem .fstaticlabel {
536f0460
DW
123 font-weight: bold;
124}
125
2c773bb3
FM
126.form-item .form-setting .defaultsnext > input {
127 display: inline-block;
128}
f4143537 129
536f0460
DW
130.form-item .form-setting .form-checkbox.defaultsnext {
131 // Need to specify .defaultsnext and the .form-checkbox class
132 // is somewhat randomly re-used on various actual checkboxes
133 // throughout the admin forms, instead of on the wrapper div.
134 margin-top: 5px; // Push down checkboxes to align.
135 display: inline-block; // So above style sticks.
136}
137
138#adminsettings h3 {
139 // Copied from bootstrap/forms.less tag legend.
140 display: block;
141 width: 100%;
142 padding: 0;
da92b738 143 margin-bottom: $line-height-base;
536f0460 144 font-size: $font-size-lg;
da92b738 145 line-height: $line-height-base * 2;
536f0460
DW
146 border: 0;
147 border-bottom: 1px solid #e5e5e5;
148}
536f0460
DW
149
150// I think this could be avoided (or at least tidied up) ifr
151// we used HTML5 input types like url, phone, email, number etc.
152/* rtl:ignore */
8a5613f6
CB
153.mform .fitem .felement input[name="email"],
154.mform .fitem .felement input[name="email2"],
155.mform .fitem .felement input[name="url"],
156.mform .fitem .felement input[name="idnumber"],
157.mform .fitem .felement input[name="phone1"],
158.mform .fitem .felement input[name="phone2"] {
536f0460
DW
159 text-align: left;
160 direction: ltr;
161}
113efed5 162
8c16d50e
P
163// Reduce the mediaplugin width when using inside forms.
164.que.match .mediaplugin {
165 width: 50vw;
166}
167
536f0460
DW
168/* rtl:ignore */
169#page-admin-grade-edit-scale-edit .error input#id_name {
170 margin-right: 170px;
171}
f4143537 172
536f0460
DW
173#page-grade-edit-outcome-course .courseoutcomes {
174 margin-left: auto;
175 margin-right: auto;
176 width: 100%;
177}
f4143537 178
536f0460 179#page-grade-edit-outcome-course .courseoutcomes td {
f4143537 180 text-align: center;
536f0460
DW
181}
182/* Install Process' text fields Forms, should always be justified to the left */
183/* rtl:ignore */
184#installform #id_wwwroot,
185#installform #id_dirroot,
186#installform #id_dataroot,
187#installform #id_dbhost,
188#installform #id_dbname,
189#installform #id_dbuser,
190#installform #id_dbpass,
191#installform #id_prefix {
192 direction: ltr;
193}
194
195.mdl-right > label {
196 // Workaround for repository pop-up because the : are outside the label,
197 // can/should be fixed in filemanager renderers.
198 display: inline-block;
199}
200
32e3a8dd
FM
201.singleselect {
202 max-width: 100%;
203}
204
536f0460
DW
205.form-item .form-label label {
206 margin-bottom: 0;
207}
f4143537 208
536f0460
DW
209div#dateselector-calendar-panel {
210 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
211}
212
213fieldset.coursesearchbox label {
214 display: inline;
215}
216
217/**
218 * Show the labels above text editors and file managers except on wide screens.
219 */
536f0460
DW
220
221
536f0460
DW
222/* Section and module editing forms contain special JS components for the
223 availability system (if enabled). */
63e4df60
DW
224#id_availabilityconditionsjson[aria-hidden=true],
225.availability-field [aria-hidden=true] {
226 display: none;
227}
228
95d7c77b
BB
229.availability-field {
230 label {
231 display: inline-flex;
232 }
233 .availability-group label {
234 vertical-align: top;
235 }
236}
237
560a43f2
DW
238.availability-eye {
239 clear: left;
240 float: left;
241}
242.availability-inner,
243.availability-plugincontrols {
244 float: left;
245 @include border-radius($card-border-radius);
246 border: $card-border-width solid $card-border-color;
95d7c77b
BB
247 padding: 1rem;
248 margin-top: 0.5rem;
249}
250.availability-plugincontrols,
251.availability-childlist .availability-inner {
252 margin-left: .625rem;
560a43f2
DW
253}
254.availability-field .availability-plugincontrols .availability-group select {
255 max-width: 12rem;
536f0460
DW
256}
257
536f0460 258/* Custom styles for autocomplete form element */
d8e57f02
DW
259/* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
260[data-fieldtype=autocomplete] select,
261[data-fieldtype=tags] select,
262.form-autocomplete-original-select {
263 visibility: hidden;
264 overflow: hidden;
265 width: 15rem;
266 height: 44px;
267 margin: 0;
268 padding: 0;
269 border: 0;
2bc3246f 270 margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
d8e57f02
DW
271 vertical-align: bottom;
272}
536f0460 273.form-autocomplete-selection {
2bc3246f 274 margin: $input-padding-y-sm;
3ec69c2e 275 // Padding top and bottom, plus mb-1 and the 100% lineheight.
2bc3246f 276 min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
536f0460 277}
f4143537 278
b643c886 279.form-autocomplete-selection [role=option] {
536f0460 280 cursor: pointer;
86ea9e63
BB
281 white-space: inherit;
282 word-break: break-word;
283 line-height: 1.4;
284 text-align: left;
536f0460
DW
285}
286
287.form-autocomplete-suggestions {
288 position: absolute;
289 background-color: white;
451bd407 290 border: $border-width solid $input-border-color;
536f0460
DW
291 min-width: 206px;
292 max-height: 20em;
293 overflow: auto;
29ad80e4
SR
294 margin: $dropdown-spacer 0 0;
295 padding: $dropdown-padding-y 0;
536f0460
DW
296 z-index: 1;
297}
f4143537 298
536f0460
DW
299.form-autocomplete-suggestions li {
300 list-style-type: none;
451bd407 301 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
536f0460
DW
302 margin: 0;
303 cursor: pointer;
304 color: $body-color;
451bd407
BB
305 &:hover,
306 &:focus,
307 &[aria-selected="true"] {
308 background-color: $dropdown-link-active-bg;
309 color: $dropdown-link-active-color;
310 }
29ad80e4
SR
311 &::before {
312 content: "\200B";
313 }
536f0460
DW
314}
315
316.form-autocomplete-downarrow {
317 color: $body-color;
b101ce58
BB
318 top: 0.2rem;
319 right: 0.5rem;
536f0460 320 cursor: pointer;
df5feea4
AN
321 .loading-icon {
322 position: absolute;
323 top: 0;
324 left: 0;
325 background-color: $white;
326 }
536f0460
DW
327}
328
9629c86f 329/** Undo some bootstrap things */
2fa35b8d 330.form-autocomplete-selection + input.form-control {
9629c86f
DW
331 width: auto;
332 display: inline-block;
2fa35b8d 333 vertical-align: middle;
9629c86f 334}
f4143537 335
536f0460
DW
336.form-autocomplete-selection [data-active-selection=true] {
337 padding: 0.5em;
338 font-size: large;
339}
91bda4cd 340
e44bd69a
DP
341/* Non-bootstrap selects with a size show their contents outside of the element.
342 * Remove when we update to stable bootstrap 4. (MDL-56511) */
fcd41247 343select[size],
91bda4cd
DW
344select[multiple] {
345 overflow: auto;
346}
3ec69c2e 347
8a5613f6 348select[size="1"] {
fcd41247
DW
349 overflow: visible;
350}
963ba889
RW
351
352textarea[data-auto-rows] {
353 overflow-x: hidden;
bf7018b6 354 resize: none;
963ba889 355}
058f2fb6 356
3dee4fae
MG
357/** Display elements under labels in vertical forms regardless of the screen size. */
358.mform.full-width-labels {
f9af5427 359 .fitem.row {
3dee4fae
MG
360 margin-left: 0;
361 margin-right: 0;
362 & > .col-md-3,
363 & > .col-md-9 {
364 float: none;
365 width: inherit;
366 padding-right: 0;
367 padding-left: 0;
368 }
369 &.femptylabel > .col-md-3 {
370 display: none;
371 }
372 }
373}
374
058f2fb6
DW
375/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
376.form-inline {
377 @include media-breakpoint-up(md) {
378 .col-md-9,
379 .col-md-3 {
380 label {
381 margin-left: 1rem;
382 }
383 margin-bottom: 1rem;
384 width: auto;
385 }
386 }
387}
f43155b6
DW
388
389[data-fieldtype="modgrade"] .form-group {
390 padding-bottom: $input-padding-y;
391}
392
393// We dont' use the mixin because it's expensive.
394[data-fieldtype="modgrade"] {
395 background-color: $card-bg;
396 @include border-radius($card-border-radius);
397 border: $card-border-width solid $card-border-color;
398 padding: $card-spacer-x;
399 margin-left: $grid-gutter-width / 2;
400 max-width: 30rem;
401}
c1ae9079 402
8b493eb0
DM
403// Styles for the JS file types browser provided by the "filetypes" element.
404[data-filetypesbrowserbody] {
405 [aria-expanded="false"] > [role="group"],
406 [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
407 [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
408 display: none;
409 }
410}
31c04fec
BB
411
412// The autocomplete popup needs a display:block container to correctly position to popup.
413.form-inline[data-fieldtype="autocomplete"],
414.form-inline[data-fieldtype="tags"] {
415 display: block;
416}
ede6125a
BB
417
418// Show editor at 100% width by default.
419[data-fieldtype="editor"] > div {
420 flex-grow: 1;
5b98200f
AN
421}
422
95d7c77b
BB
423@include media-breakpoint-up(sm) {
424 .mform fieldset {
425 margin-left: $spacer * 1.5;
426 }
427 .mform fieldset.collapsible legend a.fheader {
428 padding: 0 5px 0 ($spacer * 1.5);
429 margin-left: -($spacer * 1.5);
430 background: url([[pix:t/expanded]]) 0 center no-repeat;
431 }
432
433 .mform fieldset.collapsed legend a.fheader {
434 /*rtl:raw:
435 background-image: url([[pix:t/collapsed_rtl]]);
436 */
437 /*rtl:remove*/
438 background-image: url([[pix:t/collapsed]]);
439 }
4631f8b0
LB
440
441 .mform {
442 .form-inline {
443 .fdefaultcustom {
444 label {
445 justify-content: initial;
446 }
447 }
448 }
449 }
95d7c77b 450}
57732a1c
AN
451
452// Form inset on the left/right.
453// Used to display an icon/button within the form control.
454.input-group {
455 &.form-inset {
456 .form-inset-item {
80465b87 457 position: absolute;
57732a1c
AN
458 padding-top: calc(#{$input-padding-y} + #{$input-border-width});
459 z-index: 3;
460 }
461
462 &.form-inset-left {
463 .form-control {
80465b87 464 padding-left: $spacer * 1.5;
57732a1c
AN
465 }
466 }
467
468 &.form-inset-right {
469 .form-control {
80465b87 470 padding-right: $spacer * 1.5;
57732a1c
AN
471 }
472 .form-inset-item {
473 right: 0;
474 }
475 }
476 }
477}