Merge branch 'MDL-59926' of https://github.com/stronk7/moodle
[moodle.git] / theme / boost / scss / moodle / forms.scss
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  */
8 .jsenabled .mform .containsadvancedelements .advanced {
9     display: none;
10 }
12 .mform .containsadvancedelements .advanced.show {
13     display: block;
14 }
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 }
25 .mform .form-inline {
26     .form-control,
27     .custom-select {
28         max-width: 100%;
29     }
30 }
32 .mform fieldset {
33     margin-left: $spacer * 1.5;
34     margin-bottom: $spacer / 2;
35     border-bottom: $border-width solid $table-border-color;
36 }
38 .editor_atto_content.form-control {
39     width: 100%;
40 }
42 #adminsettings .form-control[size] {
43     width: auto;
44 }
46 .mform fieldset.collapsible legend a.fheader {
47     padding: 0 5px 0 ($spacer * 1.5);
48     margin-left: -($spacer * 1.5);
49     background: url([[pix:t/expanded]]) 0 center no-repeat;
50 }
52 .mform fieldset.collapsed legend a.fheader {
53     /*rtl:raw:
54     background-image: url([[pix:t/collapsed_rtl]]);
55     */
56     /*rtl:remove*/
57     background-image: url([[pix:t/collapsed]]);
58 }
60 .jsenabled .mform .collapsed .fcontainer {
61     display: none;
62 }
64 #adminsettings .error {
65     color: $state-danger-text;
66 }
68 .mform ul.file-list {
69     padding: 0;
70     margin: 0;
71     list-style: none;
72 }
74 .mform label .req,
75 .mform label .adv {
76     cursor: help;
77 }
78 /*rtl:ignore*/
79 input#id_externalurl {
80     direction: ltr;
81 }
83 #portfolio-add-button {
84     display: inline;
85 }
87 .form-defaultinfo,
88 .form-label .form-shortname {
89     @extend .text-muted;
90 }
92 .form-label .form-shortname {
93     font-size: $font-size-xs;
94     display: block;
95 }
97 .form-item .form-inline {
98     display: inline;
99 }
101 .formsettingheading .form-horizontal {
102     @extend .text-muted;
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.
109 .no-felement.fstatic {
110     @extend .text-muted;
111     padding-top: 5px;
114 .no-fitem .fstaticlabel {
115     font-weight: bold;
118 // Pale grey container for submit buttons.
119 .form-buttons,
120 .path-admin .buttons,
121 #fitem_id_submitbutton,
122 .fp-content-center form + div,
123 div.backup-section + form,
124 #fgroup_id_buttonar {
125     @extend .form-group;
126     padding-left: 0;
129 .form-item .form-setting .defaultsnext > input {
130     display: inline-block;
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.
141 #adminsettings h3 {
142     // Copied from bootstrap/forms.less tag legend.
143     display: block;
144     width: 100%;
145     padding: 0;
146     margin-bottom: $line-height-base;
147     font-size: $font-size-lg;
148     line-height: $line-height-base * 2;
149     border: 0;
150     border-bottom: 1px solid #e5e5e5;
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;
166 /* rtl:ignore */
167 #page-admin-grade-edit-scale-edit .error input#id_name {
168     margin-right: 170px;
171 #page-grade-edit-outcome-course .courseoutcomes {
172     margin-left: auto;
173     margin-right: auto;
174     width: 100%;
177 #page-grade-edit-outcome-course .courseoutcomes td {
178     text-align: center;
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;
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;
199 .singleselect {
200     max-width: 100%;
203 .form-item .form-label label {
204     margin-bottom: 0;
207 div#dateselector-calendar-panel {
208     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
211 fieldset.coursesearchbox label {
212     display: inline;
215 /**
216  * Show the labels above text editors and file managers except on wide screens.
217  */
220 /* Section and module editing forms contain special JS components for the
221    availability system (if enabled). */
222 #id_availabilityconditionsjson[aria-hidden=true],
223 .availability-field [aria-hidden=true] {
224     display: none;
227 .availability-eye {
228     clear: left;
229     float: left;
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;
239 .availability-field .availability-plugincontrols .availability-group select {
240     max-width: 12rem;
243 /* Custom styles for autocomplete form element */
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;
258 .form-autocomplete-selection {
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;
264 .form-autocomplete-multiple [role=listitem] {
265     cursor: pointer;
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;
276     margin: 0;
277     padding: 0;
278     margin-top: 0.4em;
279     z-index: 1;
282 .form-autocomplete-suggestions li {
283     list-style-type: none;
284     padding: 0.2em;
285     margin: 0;
286     cursor: pointer;
287     color: $body-color;
290 .form-autocomplete-suggestions li:hover {
291     background-color: lighten($dropdown-link-active-bg, 15%);
292     color: $dropdown-link-active-color;
295 .form-autocomplete-suggestions li[aria-selected=true] {
296     background-color: darken($dropdown-bg, 5%);
297     color: $gray;
300 .form-autocomplete-downarrow {
301     color: $body-color;
302     position: relative;
303     top: 0.2em;
304     left: -1.5em;
305     cursor: pointer;
308 .form-autocomplete-selection:focus {
309     outline: none;
311 /** Undo some bootstrap things */
312 .form-autocomplete-selection + input.form-control {
313     width: auto;
314     display: inline-block;
315     vertical-align: middle;
318 .form-autocomplete-selection [data-active-selection=true] {
319     padding: 0.5em;
320     font-size: large;
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) */
325 select[size],
326 select[multiple] {
327     overflow: auto;
329 select[size=1] {
330     overflow: visible;
333 textarea[data-auto-rows] {
334     overflow-x: hidden;
337 /** Display elements under labels in vertical forms regardless of the screen size. */
338 .mform.full-width-labels {
339     & > .row {
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     }
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     }
369 [data-fieldtype="modgrade"] .form-group {
370     padding-bottom: $input-padding-y;
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;
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);
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     }