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