MDL-62322 Theme boost: update template display classes
[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
BB
30 .form-group {
31 margin-right: 0.25rem;
32 }
33}
34
35#jump-to-activity.custom-select {
36 width: 100%;
a4a6d85b
FM
37}
38
e919c488 39.mform fieldset {
137c289a
FM
40 margin-left: $spacer * 1.5;
41 margin-bottom: $spacer / 2;
42 border-bottom: $border-width solid $table-border-color;
e919c488 43}
3ec69c2e
BB
44.mform > .form-group {
45 margin-left: $spacer * 1.5;
46}
f4143537 47
c1ae9079
DW
48.editor_atto_content.form-control {
49 width: 100%;
50}
51
f9c1a751
NK
52#adminsettings .form-control[size] {
53 width: auto;
54}
55
536f0460 56.mform fieldset.collapsible legend a.fheader {
e919c488
FM
57 padding: 0 5px 0 ($spacer * 1.5);
58 margin-left: -($spacer * 1.5);
92e32fc4 59 background: url([[pix:t/expanded]]) 0 center no-repeat;
536f0460 60}
f4143537 61
536f0460 62.mform fieldset.collapsed legend a.fheader {
92e32fc4
FM
63 /*rtl:raw:
64 background-image: url([[pix:t/collapsed_rtl]]);
65 */
66 /*rtl:remove*/
536f0460
DW
67 background-image: url([[pix:t/collapsed]]);
68}
f4143537 69
536f0460
DW
70.jsenabled .mform .collapsed .fcontainer {
71 display: none;
72}
f4143537 73
91bda4cd 74#adminsettings .error {
536f0460
DW
75 color: $state-danger-text;
76}
f4143537 77
536f0460
DW
78.mform ul.file-list {
79 padding: 0;
80 margin: 0;
81 list-style: none;
82}
f4143537 83
536f0460
DW
84.mform label .req,
85.mform label .adv {
86 cursor: help;
87}
536f0460
DW
88/*rtl:ignore*/
89input#id_externalurl {
90 direction: ltr;
91}
f4143537 92
536f0460
DW
93#portfolio-add-button {
94 display: inline;
95}
96
536f0460
DW
97.form-defaultinfo,
98.form-label .form-shortname {
99 @extend .text-muted;
100}
f4143537 101
536f0460
DW
102.form-label .form-shortname {
103 font-size: $font-size-xs;
104 display: block;
105}
2c773bb3 106
2c773bb3
FM
107.form-item .form-inline {
108 display: inline;
109}
536f0460 110
3ec69c2e
BB
111.form-inline label:not(.sr-only):not(.accesshide) + select {
112 margin-left: 0.5rem;
113}
114
536f0460
DW
115.formsettingheading .form-horizontal {
116 @extend .text-muted;
117}
2c773bb3 118
536f0460
DW
119// Moodle doesn't differentiate between what Bootstrap calls
120// .uneditable-inputs and form help text. Styling them both as
121// uneditable looks ugly, styling both as form help is fairly
122// subtle in it's impact. Going for the latter as the best option.
91bda4cd 123.no-felement.fstatic {
536f0460
DW
124 @extend .text-muted;
125 padding-top: 5px;
126}
f4143537 127
91bda4cd 128.no-fitem .fstaticlabel {
536f0460
DW
129 font-weight: bold;
130}
131
132// Pale grey container for submit buttons.
536f0460
DW
133.form-buttons,
134.path-admin .buttons,
135#fitem_id_submitbutton,
136.fp-content-center form + div,
137div.backup-section + form,
138#fgroup_id_buttonar {
139 @extend .form-group;
140 padding-left: 0;
141}
f4143537 142
2c773bb3
FM
143.form-item .form-setting .defaultsnext > input {
144 display: inline-block;
145}
f4143537 146
536f0460
DW
147.form-item .form-setting .form-checkbox.defaultsnext {
148 // Need to specify .defaultsnext and the .form-checkbox class
149 // is somewhat randomly re-used on various actual checkboxes
150 // throughout the admin forms, instead of on the wrapper div.
151 margin-top: 5px; // Push down checkboxes to align.
152 display: inline-block; // So above style sticks.
153}
154
155#adminsettings h3 {
156 // Copied from bootstrap/forms.less tag legend.
157 display: block;
158 width: 100%;
159 padding: 0;
da92b738 160 margin-bottom: $line-height-base;
536f0460 161 font-size: $font-size-lg;
da92b738 162 line-height: $line-height-base * 2;
536f0460
DW
163 border: 0;
164 border-bottom: 1px solid #e5e5e5;
165}
536f0460
DW
166
167// I think this could be avoided (or at least tidied up) ifr
168// we used HTML5 input types like url, phone, email, number etc.
169/* rtl:ignore */
8a5613f6
CB
170.mform .fitem .felement input[name="email"],
171.mform .fitem .felement input[name="email2"],
172.mform .fitem .felement input[name="url"],
173.mform .fitem .felement input[name="idnumber"],
174.mform .fitem .felement input[name="phone1"],
175.mform .fitem .felement input[name="phone2"] {
536f0460
DW
176 text-align: left;
177 direction: ltr;
178}
113efed5 179
536f0460
DW
180/* rtl:ignore */
181#page-admin-grade-edit-scale-edit .error input#id_name {
182 margin-right: 170px;
183}
f4143537 184
536f0460
DW
185#page-grade-edit-outcome-course .courseoutcomes {
186 margin-left: auto;
187 margin-right: auto;
188 width: 100%;
189}
f4143537 190
536f0460 191#page-grade-edit-outcome-course .courseoutcomes td {
f4143537 192 text-align: center;
536f0460
DW
193}
194/* Install Process' text fields Forms, should always be justified to the left */
195/* rtl:ignore */
196#installform #id_wwwroot,
197#installform #id_dirroot,
198#installform #id_dataroot,
199#installform #id_dbhost,
200#installform #id_dbname,
201#installform #id_dbuser,
202#installform #id_dbpass,
203#installform #id_prefix {
204 direction: ltr;
205}
206
207.mdl-right > label {
208 // Workaround for repository pop-up because the : are outside the label,
209 // can/should be fixed in filemanager renderers.
210 display: inline-block;
211}
212
32e3a8dd
FM
213.singleselect {
214 max-width: 100%;
215}
216
536f0460
DW
217.form-item .form-label label {
218 margin-bottom: 0;
219}
f4143537 220
536f0460
DW
221div#dateselector-calendar-panel {
222 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
223}
224
225fieldset.coursesearchbox label {
226 display: inline;
227}
228
229/**
230 * Show the labels above text editors and file managers except on wide screens.
231 */
536f0460
DW
232
233
536f0460
DW
234/* Section and module editing forms contain special JS components for the
235 availability system (if enabled). */
63e4df60
DW
236#id_availabilityconditionsjson[aria-hidden=true],
237.availability-field [aria-hidden=true] {
238 display: none;
239}
240
560a43f2
DW
241.availability-eye {
242 clear: left;
243 float: left;
244}
245.availability-inner,
246.availability-plugincontrols {
247 float: left;
248 @include border-radius($card-border-radius);
249 border: $card-border-width solid $card-border-color;
250 padding: $card-spacer-x / 2;
251 margin-left: $card-spacer-x / 2;
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
536f0460
DW
278.form-autocomplete-multiple [role=listitem] {
279 cursor: pointer;
280}
281
282.form-autocomplete-suggestions {
283 position: absolute;
284 background-color: white;
285 border: 2px solid $gray-lighter;
286 border-radius: 3px;
287 min-width: 206px;
288 max-height: 20em;
289 overflow: auto;
fde35b8f
DP
290 margin: 0;
291 padding: 0;
91bda4cd 292 margin-top: 0.4em;
536f0460
DW
293 z-index: 1;
294}
f4143537 295
536f0460
DW
296.form-autocomplete-suggestions li {
297 list-style-type: none;
298 padding: 0.2em;
299 margin: 0;
300 cursor: pointer;
301 color: $body-color;
302}
f4143537 303
536f0460
DW
304.form-autocomplete-suggestions li:hover {
305 background-color: lighten($dropdown-link-active-bg, 15%);
306 color: $dropdown-link-active-color;
307}
f4143537 308
536f0460
DW
309.form-autocomplete-suggestions li[aria-selected=true] {
310 background-color: darken($dropdown-bg, 5%);
311 color: $gray;
312}
313
314.form-autocomplete-downarrow {
315 color: $body-color;
316 position: relative;
91bda4cd 317 top: 0.2em;
536f0460
DW
318 left: -1.5em;
319 cursor: pointer;
320}
321
322.form-autocomplete-selection:focus {
323 outline: none;
324}
9629c86f 325/** Undo some bootstrap things */
2fa35b8d 326.form-autocomplete-selection + input.form-control {
9629c86f
DW
327 width: auto;
328 display: inline-block;
2fa35b8d 329 vertical-align: middle;
9629c86f 330}
f4143537 331
536f0460
DW
332.form-autocomplete-selection [data-active-selection=true] {
333 padding: 0.5em;
334 font-size: large;
335}
91bda4cd 336
e44bd69a
DP
337/* Non-bootstrap selects with a size show their contents outside of the element.
338 * Remove when we update to stable bootstrap 4. (MDL-56511) */
fcd41247 339select[size],
91bda4cd
DW
340select[multiple] {
341 overflow: auto;
342}
3ec69c2e 343
8a5613f6 344select[size="1"] {
fcd41247
DW
345 overflow: visible;
346}
963ba889
RW
347
348textarea[data-auto-rows] {
349 overflow-x: hidden;
350}
058f2fb6 351
3dee4fae
MG
352/** Display elements under labels in vertical forms regardless of the screen size. */
353.mform.full-width-labels {
f9af5427 354 .fitem.row {
3dee4fae
MG
355 margin-left: 0;
356 margin-right: 0;
357 & > .col-md-3,
358 & > .col-md-9 {
359 float: none;
360 width: inherit;
361 padding-right: 0;
362 padding-left: 0;
363 }
364 &.femptylabel > .col-md-3 {
365 display: none;
366 }
367 }
368}
369
058f2fb6
DW
370/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
371.form-inline {
372 @include media-breakpoint-up(md) {
373 .col-md-9,
374 .col-md-3 {
375 label {
376 margin-left: 1rem;
377 }
378 margin-bottom: 1rem;
379 width: auto;
380 }
381 }
382}
f43155b6
DW
383
384[data-fieldtype="modgrade"] .form-group {
385 padding-bottom: $input-padding-y;
386}
387
388// We dont' use the mixin because it's expensive.
389[data-fieldtype="modgrade"] {
390 background-color: $card-bg;
391 @include border-radius($card-border-radius);
392 border: $card-border-width solid $card-border-color;
393 padding: $card-spacer-x;
394 margin-left: $grid-gutter-width / 2;
395 max-width: 30rem;
396}
c1ae9079
DW
397
398/** Atto fields do not have form-control because that would break the layout of the editor.
399 So they need these extra styles to highlight the editor when there is a validation error. */
400.has-danger .editor_atto_content.form-control,
401.has-danger .editor_atto_content.form-control-danger {
402 @include form-control-validation($brand-danger);
403 background-image: $form-icon-danger;
404 padding-right: ($input-padding-x * 3);
405 background-repeat: no-repeat;
406 background-position: center right ($input-height / 4);
407 background-size: ($input-height / 2) ($input-height / 2);
408}
8b493eb0
DM
409
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}