MDL-62550 core_theme: remove unused #fgroup_ and #fitem_ rules
[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
536f0460
DW
172/* rtl:ignore */
173#page-admin-grade-edit-scale-edit .error input#id_name {
174 margin-right: 170px;
175}
f4143537 176
536f0460
DW
177#page-grade-edit-outcome-course .courseoutcomes {
178 margin-left: auto;
179 margin-right: auto;
180 width: 100%;
181}
f4143537 182
536f0460 183#page-grade-edit-outcome-course .courseoutcomes td {
f4143537 184 text-align: center;
536f0460
DW
185}
186/* Install Process' text fields Forms, should always be justified to the left */
187/* rtl:ignore */
188#installform #id_wwwroot,
189#installform #id_dirroot,
190#installform #id_dataroot,
191#installform #id_dbhost,
192#installform #id_dbname,
193#installform #id_dbuser,
194#installform #id_dbpass,
195#installform #id_prefix {
196 direction: ltr;
197}
198
199.mdl-right > label {
200 // Workaround for repository pop-up because the : are outside the label,
201 // can/should be fixed in filemanager renderers.
202 display: inline-block;
203}
204
32e3a8dd
FM
205.singleselect {
206 max-width: 100%;
207}
208
536f0460
DW
209.form-item .form-label label {
210 margin-bottom: 0;
211}
f4143537 212
536f0460
DW
213div#dateselector-calendar-panel {
214 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
215}
216
217fieldset.coursesearchbox label {
218 display: inline;
219}
220
221/**
222 * Show the labels above text editors and file managers except on wide screens.
223 */
536f0460
DW
224
225
536f0460
DW
226/* Section and module editing forms contain special JS components for the
227 availability system (if enabled). */
63e4df60
DW
228#id_availabilityconditionsjson[aria-hidden=true],
229.availability-field [aria-hidden=true] {
230 display: none;
231}
232
95d7c77b
BB
233.availability-field {
234 label {
235 display: inline-flex;
236 }
237 .availability-group label {
238 vertical-align: top;
239 }
240}
241
560a43f2
DW
242.availability-eye {
243 clear: left;
244 float: left;
245}
246.availability-inner,
247.availability-plugincontrols {
248 float: left;
249 @include border-radius($card-border-radius);
250 border: $card-border-width solid $card-border-color;
95d7c77b
BB
251 padding: 1rem;
252 margin-top: 0.5rem;
253}
254.availability-plugincontrols,
255.availability-childlist .availability-inner {
256 margin-left: .625rem;
560a43f2
DW
257}
258.availability-field .availability-plugincontrols .availability-group select {
259 max-width: 12rem;
536f0460
DW
260}
261
536f0460 262/* Custom styles for autocomplete form element */
d8e57f02
DW
263/* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */
264[data-fieldtype=autocomplete] select,
265[data-fieldtype=tags] select,
266.form-autocomplete-original-select {
267 visibility: hidden;
268 overflow: hidden;
269 width: 15rem;
270 height: 44px;
271 margin: 0;
272 padding: 0;
273 border: 0;
2bc3246f 274 margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
d8e57f02
DW
275 vertical-align: bottom;
276}
536f0460 277.form-autocomplete-selection {
2bc3246f 278 margin: $input-padding-y-sm;
3ec69c2e 279 // Padding top and bottom, plus mb-1 and the 100% lineheight.
2bc3246f 280 min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
536f0460 281}
f4143537 282
536f0460
DW
283.form-autocomplete-multiple [role=listitem] {
284 cursor: pointer;
285}
286
287.form-autocomplete-suggestions {
288 position: absolute;
289 background-color: white;
290 border: 2px solid $gray-lighter;
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%);
316 color: $gray;
317}
318
319.form-autocomplete-downarrow {
320 color: $body-color;
321 position: relative;
91bda4cd 322 top: 0.2em;
536f0460
DW
323 left: -1.5em;
324 cursor: pointer;
325}
326
327.form-autocomplete-selection:focus {
328 outline: none;
329}
9629c86f 330/** Undo some bootstrap things */
2fa35b8d 331.form-autocomplete-selection + input.form-control {
9629c86f
DW
332 width: auto;
333 display: inline-block;
2fa35b8d 334 vertical-align: middle;
9629c86f 335}
f4143537 336
536f0460
DW
337.form-autocomplete-selection [data-active-selection=true] {
338 padding: 0.5em;
339 font-size: large;
340}
91bda4cd 341
e44bd69a
DP
342/* Non-bootstrap selects with a size show their contents outside of the element.
343 * Remove when we update to stable bootstrap 4. (MDL-56511) */
fcd41247 344select[size],
91bda4cd
DW
345select[multiple] {
346 overflow: auto;
347}
3ec69c2e 348
8a5613f6 349select[size="1"] {
fcd41247
DW
350 overflow: visible;
351}
963ba889
RW
352
353textarea[data-auto-rows] {
354 overflow-x: hidden;
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
DW
402
403/** Atto fields do not have form-control because that would break the layout of the editor.
404 So they need these extra styles to highlight the editor when there is a validation error. */
405.has-danger .editor_atto_content.form-control,
406.has-danger .editor_atto_content.form-control-danger {
407 @include form-control-validation($brand-danger);
408 background-image: $form-icon-danger;
409 padding-right: ($input-padding-x * 3);
410 background-repeat: no-repeat;
6c88a36f
BB
411 background-position: center right 1rem;
412 background-size: 1.5rem;
c1ae9079 413}
8b493eb0
DM
414
415// Styles for the JS file types browser provided by the "filetypes" element.
416[data-filetypesbrowserbody] {
417 [aria-expanded="false"] > [role="group"],
418 [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
419 [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
420 display: none;
421 }
422}
31c04fec
BB
423
424// The autocomplete popup needs a display:block container to correctly position to popup.
425.form-inline[data-fieldtype="autocomplete"],
426.form-inline[data-fieldtype="tags"] {
427 display: block;
428}
ede6125a
BB
429
430// Show editor at 100% width by default.
431[data-fieldtype="editor"] > div {
432 flex-grow: 1;
5b98200f
AN
433}
434
95d7c77b
BB
435@include media-breakpoint-up(sm) {
436 .mform fieldset {
437 margin-left: $spacer * 1.5;
438 }
439 .mform fieldset.collapsible legend a.fheader {
440 padding: 0 5px 0 ($spacer * 1.5);
441 margin-left: -($spacer * 1.5);
442 background: url([[pix:t/expanded]]) 0 center no-repeat;
443 }
444
445 .mform fieldset.collapsed legend a.fheader {
446 /*rtl:raw:
447 background-image: url([[pix:t/collapsed_rtl]]);
448 */
449 /*rtl:remove*/
450 background-image: url([[pix:t/collapsed]]);
451 }
452}