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