weekly release 3.4dev
[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
DW
243/* Custom styles for autocomplete form element */
244.form-autocomplete-selection {
245 margin: 0.2em;
246 min-height: 21px;
247}
f4143537 248
536f0460
DW
249.form-autocomplete-multiple [role=listitem] {
250 cursor: pointer;
251}
252
253.form-autocomplete-suggestions {
254 position: absolute;
255 background-color: white;
256 border: 2px solid $gray-lighter;
257 border-radius: 3px;
258 min-width: 206px;
259 max-height: 20em;
260 overflow: auto;
fde35b8f
DP
261 margin: 0;
262 padding: 0;
91bda4cd 263 margin-top: 0.4em;
536f0460
DW
264 z-index: 1;
265}
f4143537 266
536f0460
DW
267.form-autocomplete-suggestions li {
268 list-style-type: none;
269 padding: 0.2em;
270 margin: 0;
271 cursor: pointer;
272 color: $body-color;
273}
f4143537 274
536f0460
DW
275.form-autocomplete-suggestions li:hover {
276 background-color: lighten($dropdown-link-active-bg, 15%);
277 color: $dropdown-link-active-color;
278}
f4143537 279
536f0460
DW
280.form-autocomplete-suggestions li[aria-selected=true] {
281 background-color: darken($dropdown-bg, 5%);
282 color: $gray;
283}
284
285.form-autocomplete-downarrow {
286 color: $body-color;
287 position: relative;
91bda4cd 288 top: 0.2em;
536f0460
DW
289 left: -1.5em;
290 cursor: pointer;
291}
292
293.form-autocomplete-selection:focus {
294 outline: none;
295}
9629c86f 296/** Undo some bootstrap things */
2fa35b8d 297.form-autocomplete-selection + input.form-control {
9629c86f
DW
298 width: auto;
299 display: inline-block;
2fa35b8d 300 vertical-align: middle;
9629c86f 301}
f4143537 302
536f0460
DW
303.form-autocomplete-selection [data-active-selection=true] {
304 padding: 0.5em;
305 font-size: large;
306}
91bda4cd 307
e44bd69a
DP
308/* Non-bootstrap selects with a size show their contents outside of the element.
309 * Remove when we update to stable bootstrap 4. (MDL-56511) */
fcd41247 310select[size],
91bda4cd
DW
311select[multiple] {
312 overflow: auto;
313}
fcd41247
DW
314select[size=1] {
315 overflow: visible;
316}
963ba889
RW
317
318textarea[data-auto-rows] {
319 overflow-x: hidden;
320}
058f2fb6
DW
321
322/** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
323.form-inline {
324 @include media-breakpoint-up(md) {
325 .col-md-9,
326 .col-md-3 {
327 label {
328 margin-left: 1rem;
329 }
330 margin-bottom: 1rem;
331 width: auto;
332 }
333 }
334}
f43155b6
DW
335
336[data-fieldtype="modgrade"] .form-group {
337 padding-bottom: $input-padding-y;
338}
339
340// We dont' use the mixin because it's expensive.
341[data-fieldtype="modgrade"] {
342 background-color: $card-bg;
343 @include border-radius($card-border-radius);
344 border: $card-border-width solid $card-border-color;
345 padding: $card-spacer-x;
346 margin-left: $grid-gutter-width / 2;
347 max-width: 30rem;
348}
c1ae9079
DW
349
350/** Atto fields do not have form-control because that would break the layout of the editor.
351 So they need these extra styles to highlight the editor when there is a validation error. */
352.has-danger .editor_atto_content.form-control,
353.has-danger .editor_atto_content.form-control-danger {
354 @include form-control-validation($brand-danger);
355 background-image: $form-icon-danger;
356 padding-right: ($input-padding-x * 3);
357 background-repeat: no-repeat;
358 background-position: center right ($input-height / 4);
359 background-size: ($input-height / 2) ($input-height / 2);
360}
8b493eb0
DM
361
362// Styles for the JS file types browser provided by the "filetypes" element.
363[data-filetypesbrowserbody] {
364 [aria-expanded="false"] > [role="group"],
365 [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
366 [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
367 display: none;
368 }
369}