MDL-62550 core_theme: remove unused #fgroup_ and #fitem_ rules
[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: flex;
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     .form-group {
31         margin: 0.1rem 0.25rem 0.1rem 0;
32     }
33     br + label {
34         justify-content: flex-start;
35         width: 100%;
36     }
37 }
39 .unresponsive.mform .form-inline,
40 .unresponsive.mform .form-inline label {
41     display: inline-flex;
42 }
44 #jump-to-activity.custom-select {
45     width: 100%;
46 }
48 .mform fieldset {
49     margin-bottom: $spacer / 2;
50     border-bottom: $border-width solid $table-border-color;
51 }
52 .mform > .form-group {
53     margin-left: $spacer * 1.5;
54 }
56 .editor_atto_content.form-control {
57     width: 100%;
58 }
60 #adminsettings .form-control[size] {
61     width: auto;
62 }
64 .jsenabled .mform .collapsed .fcontainer {
65     display: none;
66 }
68 #adminsettings .error {
69     color: $state-danger-text;
70 }
72 .mform ul.file-list {
73     padding: 0;
74     margin: 0;
75     list-style: none;
76 }
78 .mform label .req,
79 .mform label .adv {
80     cursor: help;
81 }
82 /*rtl:ignore*/
83 input#id_externalurl {
84     direction: ltr;
85 }
87 #portfolio-add-button {
88     display: inline;
89 }
91 .form-defaultinfo,
92 .form-label .form-shortname {
93     @extend .text-muted;
94 }
96 .form-label .form-shortname {
97     font-size: $font-size-xs;
98     display: block;
99 }
101 .form-item .form-inline {
102     display: inline;
105 .form-inline label:not(.sr-only):not(.accesshide) + select {
106     margin-left: 0.5rem;
109 .formsettingheading .form-horizontal {
110     @extend .text-muted;
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.
117 .no-felement.fstatic {
118     @extend .text-muted;
119     padding-top: 5px;
122 .no-fitem .fstaticlabel {
123     font-weight: bold;
126 // Pale grey container for submit buttons.
127 .form-buttons,
128 .path-admin .buttons,
129 .fp-content-center form + div,
130 div.backup-section + form {
131     @extend .form-group;
132     padding-left: 0;
135 .form-item .form-setting .defaultsnext > input {
136     display: inline-block;
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.
147 #adminsettings h3 {
148     // Copied from bootstrap/forms.less tag legend.
149     display: block;
150     width: 100%;
151     padding: 0;
152     margin-bottom: $line-height-base;
153     font-size: $font-size-lg;
154     line-height: $line-height-base * 2;
155     border: 0;
156     border-bottom: 1px solid #e5e5e5;
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 */
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"] {
168     text-align: left;
169     direction: ltr;
172 /* rtl:ignore */
173 #page-admin-grade-edit-scale-edit .error input#id_name {
174     margin-right: 170px;
177 #page-grade-edit-outcome-course .courseoutcomes {
178     margin-left: auto;
179     margin-right: auto;
180     width: 100%;
183 #page-grade-edit-outcome-course .courseoutcomes td {
184     text-align: center;
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;
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;
205 .singleselect {
206     max-width: 100%;
209 .form-item .form-label label {
210     margin-bottom: 0;
213 div#dateselector-calendar-panel {
214     z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
217 fieldset.coursesearchbox label {
218     display: inline;
221 /**
222  * Show the labels above text editors and file managers except on wide screens.
223  */
226 /* Section and module editing forms contain special JS components for the
227    availability system (if enabled). */
228 #id_availabilityconditionsjson[aria-hidden=true],
229 .availability-field [aria-hidden=true] {
230     display: none;
233 .availability-field {
234     label {
235         display: inline-flex;
236     }
237     .availability-group label {
238         vertical-align: top;
239     }
242 .availability-eye {
243     clear: left;
244     float: left;
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;
251     padding: 1rem;
252     margin-top: 0.5rem;
254 .availability-plugincontrols,
255 .availability-childlist .availability-inner {
256     margin-left: .625rem;
258 .availability-field .availability-plugincontrols .availability-group select {
259     max-width: 12rem;
262 /* Custom styles for autocomplete form element */
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;
274     margin-top: $font-size-base * $line-height-base + $input-padding-y-sm;
275     vertical-align: bottom;
277 .form-autocomplete-selection {
278     margin: $input-padding-y-sm;
279     // Padding top and bottom, plus mb-1 and the 100% lineheight.
280     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
283 .form-autocomplete-multiple [role=listitem] {
284     cursor: pointer;
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;
295     margin: 0;
296     padding: 0;
297     margin-top: 0.4em;
298     z-index: 1;
301 .form-autocomplete-suggestions li {
302     list-style-type: none;
303     padding: 0.2em;
304     margin: 0;
305     cursor: pointer;
306     color: $body-color;
309 .form-autocomplete-suggestions li:hover {
310     background-color: lighten($dropdown-link-active-bg, 15%);
311     color: $dropdown-link-active-color;
314 .form-autocomplete-suggestions li[aria-selected=true] {
315     background-color: darken($dropdown-bg, 5%);
316     color: $gray;
319 .form-autocomplete-downarrow {
320     color: $body-color;
321     position: relative;
322     top: 0.2em;
323     left: -1.5em;
324     cursor: pointer;
327 .form-autocomplete-selection:focus {
328     outline: none;
330 /** Undo some bootstrap things */
331 .form-autocomplete-selection + input.form-control {
332     width: auto;
333     display: inline-block;
334     vertical-align: middle;
337 .form-autocomplete-selection [data-active-selection=true] {
338     padding: 0.5em;
339     font-size: large;
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) */
344 select[size],
345 select[multiple] {
346     overflow: auto;
349 select[size="1"] {
350     overflow: visible;
353 textarea[data-auto-rows] {
354     overflow-x: hidden;
357 /** Display elements under labels in vertical forms regardless of the screen size. */
358 .mform.full-width-labels {
359     .fitem.row {
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     }
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     }
389 [data-fieldtype="modgrade"] .form-group {
390     padding-bottom: $input-padding-y;
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;
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;
411     background-position: center right 1rem;
412     background-size: 1.5rem;
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     }
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;
430 // Show editor at 100% width by default.
431 [data-fieldtype="editor"] > div {
432     flex-grow: 1;
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     }
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     }