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