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
9cbeaec2 279.form-autocomplete-selection [role=listitem] {
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;
4394f9e3 290 border: 2px solid $gray-300;
536f0460
DW
291 border-radius: 3px;
292 min-width: 206px;
293 max-height: 20em;
294 overflow: auto;
fde35b8f
DP
295 margin: 0;
296 padding: 0;
91bda4cd 297 margin-top: 0.4em;
536f0460
DW
298 z-index: 1;
299}
f4143537 300
536f0460
DW
301.form-autocomplete-suggestions li {
302 list-style-type: none;
303 padding: 0.2em;
304 margin: 0;
305 cursor: pointer;
306 color: $body-color;
307}
f4143537 308
536f0460
DW
309.form-autocomplete-suggestions li:hover {
310 background-color: lighten($dropdown-link-active-bg, 15%);
311 color: $dropdown-link-active-color;
312}
f4143537 313
536f0460
DW
314.form-autocomplete-suggestions li[aria-selected=true] {
315 background-color: darken($dropdown-bg, 5%);
4394f9e3 316 color: $gray-700;
536f0460
DW
317}
318
319.form-autocomplete-downarrow {
320 color: $body-color;
b101ce58
BB
321 top: 0.2rem;
322 right: 0.5rem;
536f0460 323 cursor: pointer;
df5feea4
AN
324 .loading-icon {
325 position: absolute;
326 top: 0;
327 left: 0;
328 background-color: $white;
329 }
536f0460
DW
330}
331
332.form-autocomplete-selection:focus {
f5cb4b9b
TB
333 outline: 0;
334 box-shadow: $input-btn-focus-box-shadow;
536f0460 335}
9629c86f 336/** Undo some bootstrap things */
2fa35b8d 337.form-autocomplete-selection + input.form-control {
9629c86f
DW
338 width: auto;
339 display: inline-block;
2fa35b8d 340 vertical-align: middle;
9629c86f 341}
f4143537 342
536f0460
DW
343.form-autocomplete-selection [data-active-selection=true] {
344 padding: 0.5em;
345 font-size: large;
346}
91bda4cd 347
e44bd69a
DP
348/* Non-bootstrap selects with a size show their contents outside of the element.
349 * Remove when we update to stable bootstrap 4. (MDL-56511) */
fcd41247 350select[size],
91bda4cd
DW
351select[multiple] {
352 overflow: auto;
353}
3ec69c2e 354
8a5613f6 355select[size="1"] {
fcd41247
DW
356 overflow: visible;
357}
963ba889
RW
358
359textarea[data-auto-rows] {
360 overflow-x: hidden;
bf7018b6 361 resize: none;
963ba889 362}
058f2fb6 363
3dee4fae
MG
364/** Display elements under labels in vertical forms regardless of the screen size. */
365.mform.full-width-labels {
f9af5427 366 .fitem.row {
3dee4fae
MG
367 margin-left: 0;
368 margin-right: 0;
369 & > .col-md-3,
370 & > .col-md-9 {
371 float: none;
372 width: inherit;
373 padding-right: 0;
374 padding-left: 0;
375 }
376 &.femptylabel > .col-md-3 {
377 display: none;
378 }
379 }
380}
381
058f2fb6
DW
382/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
383.form-inline {
384 @include media-breakpoint-up(md) {
385 .col-md-9,
386 .col-md-3 {
387 label {
388 margin-left: 1rem;
389 }
390 margin-bottom: 1rem;
391 width: auto;
392 }
393 }
394}
f43155b6
DW
395
396[data-fieldtype="modgrade"] .form-group {
397 padding-bottom: $input-padding-y;
398}
399
400// We dont' use the mixin because it's expensive.
401[data-fieldtype="modgrade"] {
402 background-color: $card-bg;
403 @include border-radius($card-border-radius);
404 border: $card-border-width solid $card-border-color;
405 padding: $card-spacer-x;
406 margin-left: $grid-gutter-width / 2;
407 max-width: 30rem;
408}
c1ae9079 409
8b493eb0
DM
410// Styles for the JS file types browser provided by the "filetypes" element.
411[data-filetypesbrowserbody] {
412 [aria-expanded="false"] > [role="group"],
413 [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
414 [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
415 display: none;
416 }
417}
31c04fec
BB
418
419// The autocomplete popup needs a display:block container to correctly position to popup.
420.form-inline[data-fieldtype="autocomplete"],
421.form-inline[data-fieldtype="tags"] {
422 display: block;
423}
ede6125a
BB
424
425// Show editor at 100% width by default.
426[data-fieldtype="editor"] > div {
427 flex-grow: 1;
5b98200f
AN
428}
429
95d7c77b
BB
430@include media-breakpoint-up(sm) {
431 .mform fieldset {
432 margin-left: $spacer * 1.5;
433 }
434 .mform fieldset.collapsible legend a.fheader {
435 padding: 0 5px 0 ($spacer * 1.5);
436 margin-left: -($spacer * 1.5);
437 background: url([[pix:t/expanded]]) 0 center no-repeat;
438 }
439
440 .mform fieldset.collapsed legend a.fheader {
441 /*rtl:raw:
442 background-image: url([[pix:t/collapsed_rtl]]);
443 */
444 /*rtl:remove*/
445 background-image: url([[pix:t/collapsed]]);
446 }
4631f8b0
LB
447
448 .mform {
449 .form-inline {
450 .fdefaultcustom {
451 label {
452 justify-content: initial;
453 }
454 }
455 }
456 }
95d7c77b 457}
57732a1c
AN
458
459// Form inset on the left/right.
460// Used to display an icon/button within the form control.
461.input-group {
462 &.form-inset {
463 .form-inset-item {
80465b87 464 position: absolute;
57732a1c
AN
465 padding-top: calc(#{$input-padding-y} + #{$input-border-width});
466 z-index: 3;
467 }
468
469 &.form-inset-left {
470 .form-control {
80465b87 471 padding-left: $spacer * 1.5;
57732a1c
AN
472 }
473 }
474
475 &.form-inset-right {
476 .form-control {
80465b87 477 padding-right: $spacer * 1.5;
57732a1c
AN
478 }
479 .form-inset-item {
480 right: 0;
481 }
482 }
483 }
484}