MDL-52167 admin: format dependencies in search results
[moodle.git] / theme / bootstrapbase / less / moodle / forms.less
CommitLineData
8903b17b
BB
1/**
2 * Moodle forms HTML isn't changeable via renderers (yet?) so this
d9df063e 3 * .less file imports styles from the bootstrap @variables file and
8903b17b
BB
4 * adds them to the existing Moodle form CSS ids and classes.
5 *
6 */
7
8form {
9 margin: 0;
10}
11.mform fieldset .advancedbutton {
12 text-align: right;
13}
232affc9 14.jsenabled .mform .containsadvancedelements .advanced {
311c0347 15 display: none;
232affc9
ME
16}
17.mform .containsadvancedelements .advanced.show {
311c0347 18 display: block;
232affc9 19}
8903b17b 20.mform fieldset.group {
23bb9e24 21 margin-bottom: 0;
8903b17b
BB
22}
23.mform fieldset.error {
24 border: 1px solid @errorText;
25}
1920eebc
FM
26.mform span.error,
27#adminsettings span.error {
0c99005a
JF
28 display: inline-block;
29 border: 1px solid @errorBorder;
30 border-radius: 4px;
31 background-color: @errorBackground;
32 padding: 4px;
33 margin-bottom: 4px;
34}
8903b17b
BB
35.mform fieldset.collapsible legend a.fheader {
36 padding: 0 5px 0 20px;
37 margin-left: -20px;
3d66b5a1 38 background: url([[pix:t/expanded]]) left center no-repeat;
8903b17b
BB
39}
40.mform fieldset.collapsed legend a.fheader {
d99949ab 41 /*rtl:raw:
a0d8b511 42 background-image: url([[pix:t/collapsed_rtl]]);
d99949ab
FM
43 */
44 /*rtl:remove*/
45 background-image: url([[pix:t/collapsed]]);
8903b17b 46}
8903b17b
BB
47.jsenabled .mform .collapsed .fcontainer {
48 display: none;
49}
a0d8b511 50
8c16d50e 51// MDL-63512 Override to handle issues in clean where the video styling is off.
94dafd0c 52.mform .fitem .fitemtitle {
8c16d50e 53 & > div:not(.mediaplugin) div {
94dafd0c
P
54 display: inline;
55 }
56
8c16d50e
P
57 // MDL-64450 Override for videos so they don't appear off the screen.
58 .mediaplugin > div {
59 margin: 0;
94dafd0c 60 }
8903b17b 61}
8c16d50e
P
62
63// Reduce the mediaplugin width when using inside forms.
64.que.match .mediaplugin {
65 width: 50vw;
66}
67
1920eebc 68#adminsettings .error,
8903b17b
BB
69.loginpanel .error,
70.mform .error {
71 color: @errorText;
72}
73.mform .fdescription.required {
74 margin-left: @horizontalComponentOffset;
56468ae9
DW
75 & > .icon {
76 width: 8px;
77 height: 12px;
78 }
8903b17b
BB
79}
80.mform .fpassword .unmask {
81 display: inline-block;
82 margin-left: 0.5em;
83 & > input {
84 margin: 0;
85 }
86 & > label {
87 display: inline-block;
88 }
89}
a3e57854
DW
90.mform label {
91 display: inline-block;
92}
93
94.mform .iconhelp {
95 margin-left: 4px;
96}
8903b17b
BB
97.mform .ftextarea #id_alltext {
98 width: 100%;
99}
100.mform ul.file-list {
101 padding: 0;
102 margin: 0;
103 list-style: none;
104}
105.mform label .req,
106.mform label .adv {
107 cursor: help;
56468ae9
DW
108 & > .icon {
109 width: 8px;
110 height: 12px;
111 margin-left: 3px;
112 }
8903b17b
BB
113}
114.mform .fcheckbox input {
115 margin-left: 0;
5c2d847b
AO
116}
117.mform .fcheckbox > span,
118.mform .fradio > span,
d24fab11
BB
119.mform .fgroup > span,
120.mform .fadvcheckbox > span {
5c2d847b 121 display: inline-block;
8903b17b
BB
122 margin-top: 5px;
123}
124.mform .fitem fieldset.fgroup label,
125.mform fieldset.fdate_selector label {
126 display: inline;
127 float: none;
8903b17b 128}
8903b17b
BB
129.mform .helplink img {
130 margin: 0 .45em;
131 padding: 0;
132}
133.mform legend .helplink img {
134 margin: 0 .2em;
135}
136.singleselect label {
137 margin-right: .3em;
138}
525ef9c8 139
357dc2cb
JP
140.custom-select {
141 max-width: 100%;
142}
143
144// Make the submit button align with the .custom-select element.
145.custom-select + input[type="submit"] {
146 margin: 0 0 0 5px;
147}
148
8903b17b
BB
149#portfolio-add-button {
150 display: inline;
151}
152
d9df063e 153// Copying in Bootstrap styles.
8903b17b
BB
154.form-item,
155.mform .fitem {
156 .form-horizontal .control-group;
157 margin-bottom: 10px;
158 // Theres's a mysterious extra 10px inside this item,
d9df063e 159 // so reduce margin by 10px from 20px standard to compensate.
8903b17b
BB
160}
161.form-item .form-label,
162.mform .fitem div.fitemtitle {
163 .form-horizontal .control-label
164}
165.form-defaultinfo,
166.form-label .form-shortname {
167 .muted;
168}
169.form-label .form-shortname {
170 font-size: @fontSizeMini;
171 display: block;
172}
8903b17b
BB
173.form-item .form-setting,
174.form-item .form-description,
6fb04e76 175.form-item .form-dependenton,
8903b17b
BB
176.mform .fitem .felement,
177#page-mod-forum-search .c1 {
178 .form-horizontal .controls
179}
1b217025
BB
180.form-inline label:not(.sr-only):not(.accesshide) + select {
181 margin-left: 0.5rem;
182}
8903b17b
BB
183
184.formsettingheading {
185 .form-horizontal .help-block
186}
d9df063e 187// Moodle doesn't differentiate between what Bootstrap calls
8903b17b
BB
188// .uneditable-inputs and form help text. Styling them both as
189// uneditable looks ugly, styling both as form help is fairly
190// subtle in it's impact. Going for the latter as the best option.
191.form-item .form-description,
6fb04e76 192.form-item .form-dependenton,
8903b17b
BB
193.felement.fstatic {
194 .help-block;
195 padding-top: 5px;
196}
6fb04e76
SA
197.form-item .form-description,
198.form-item .form-dependenton {
8903b17b
BB
199 padding-top: 0;
200}
bbb07332
BB
201.fitem .fstaticlabel {
202 font-weight: bold;
203}
8903b17b
BB
204
205// Pale grey container for submit buttons.
206table#form td.submit,
207.form-buttons,
208.path-admin .buttons,
209#fitem_id_submitbutton,
210.fp-content-center form + div,
211div.backup-section + form,
212#fgroup_id_buttonar {
213 .form-actions;
214 padding-left: 0;
215}
216.path-admin .buttons,
232affc9 217.form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
8903b17b 218 padding-left: @horizontalComponentOffset;
8903b17b 219}
8903b17b 220.form-item .form-setting .form-checkbox.defaultsnext {
d9df063e 221 // Need to specify .defaultsnext and the .form-checkbox class
8903b17b 222 // is somewhat randomly re-used on various actual checkboxes
d9df063e 223 // throughout the admin forms, instead of on the wrapper div.
8903b17b
BB
224 margin-top: 5px; // Push down checkboxes to align.
225 display: inline-block; // So above style sticks.
226}
227
3b42864d 228#adminsettings h3 {
d9df063e 229 // Copied from bootstrap/forms.less tag legend.
8903b17b
BB
230 display: block;
231 width: 100%;
232 padding: 0;
233 margin-bottom: @baseLineHeight;
234 font-size: @baseFontSize * 1.5;
235 line-height: @baseLineHeight * 2;
236 color: @grayDark;
237 border: 0;
238 border-bottom: 1px solid #e5e5e5;
239}
240.mform legend a,
241.mform legend a:hover {
e514c722 242 color: @textColor;
8903b17b
BB
243 text-decoration: none;
244}
113efed5 245
accdf036
AD
246#page-grade-edit-outcome-course .courseoutcomes {
247 margin-left: auto;
248 margin-right: auto;
249 width: 100%;
250}
251#page-grade-edit-outcome-course .courseoutcomes td {
418b9328 252 text-align: center;
accdf036 253}
8903b17b
BB
254
255.mdl-right > label {
256 // Workaround for repository pop-up because the : are outside the label,
d9df063e 257 // can/should be fixed in filemanager renderers.
8903b17b
BB
258 display: inline-block;
259}
260
d9df063e
DW
261// Checkbox labels. Bootstrap puts the associated checkbox inside the label.
262// Moodle puts it beside the label, so we need to make it inline-block
263// to keep it on the same horizontal level.
8903b17b
BB
264input[type="radio"] + label,
265input[type="checkbox"] + label {
266 display: inline;
267 padding-left: 0.2em;
268}
269input[type="radio"],
270input[type="checkbox"] {
d9df063e 271 margin-top: -4px; // Dodgy hack, must be better way.
b5877270 272 margin-right: 7px;
8903b17b
BB
273}
274.singleselect {
275 display: inline-block;
276 form,
0e878352 277 select {
8903b17b
BB
278 margin: 0;
279 }
280}
281.form-item .form-label label {
282 margin-bottom: 0;
283}
284.felement.ffilepicker {
285 margin-top: 5px;
286}
12cb45f1 287div#dateselector-calendar-panel {
311c0347 288 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
12cb45f1 289}
7eff2edc
ME
290
291fieldset.coursesearchbox label {
292 display: inline;
a3e57854 293}
db7092b0
DW
294
295/**
d8383b24 296 * Show the labels above text editors and file managers except on wide screens.
db7092b0 297 */
df9b573d 298#region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
d8383b24
DW
299 font-weight: bold;
300}
20015af5 301.makeFormsVertical() {
3dee4fae 302 &:not(.unresponsive) {
6d55d0f5
DW
303 .fitem {
304 .fitemtitle {
305 display: block;
306 margin-top: 4px;
307 margin-bottom: 4px;
308 text-align: left;
309 width: 100%;
310 }
311 .felement {
312 margin-left: 0;
313 width: 100%;
314 float: left;
315 padding-left: 0;
316 padding-right: 0;
317 }
318 .fstatic:empty {
319 display: none;
320 }
5c2d847b
AO
321 .fcheckbox > span,
322 .fradio > span,
323 .fgroup > span {
120dee7a 324 margin-top: 4px;
5c2d847b
AO
325 }
326
6d55d0f5
DW
327 }
328 .femptylabel {
329 .fitemtitle {
330 display: inline-block;
331 width: auto;
332 margin-right: 8px;
333 }
334 .felement {
335 display: inline-block;
336 margin-top: 4px;
337 padding-top: 5px;
6d55d0f5
DW
338 }
339 }
0e878352 340 .fitem_fcheckbox {
6d55d0f5
DW
341 .fitemtitle,
342 .felement {
343 display: inline-block;
344 width: auto;
345 }
346 .felement {
347 padding: 6px;
348 }
349 }
d8383b24 350 }
db7092b0 351}
20015af5 352
3dee4fae
MG
353/**
354 * Forms marked as vertical always display this way;
355 */
356.mform.full-width-labels {
357 .makeFormsVertical;
358}
359
20015af5
SH
360/**
361 * Make forms vertical when the screen is less than 1200px;
362 */
363@media (max-width: 1199px) {
3dee4fae 364 body #region-main .mform {
20015af5
SH
365 .makeFormsVertical;
366 }
367}
368
bb690849 369
20015af5
SH
370/**
371 * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks.
372 * This is an extra special media rule.
373 * It causes forms to show vertically when the screen size is calculated as:
374 * 1199px + (1199px * 23%)
375 * Where 23% is the width of span3
376 * Full calculation is:
16fed466
DP
377 * @maxWidthForVerticalForms: 1199px * (unit(((@fluidGridColumnWidth1200 * 3) +
378 * (@fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px;
20015af5
SH
379 */
380@maxWidthForVerticalForms: 1474px;
c2d3fe21 381
20015af5 382@media (max-width: @maxWidthForVerticalForms) {
3dee4fae 383 .used-region-side-pre.used-region-side-post #region-main .mform {
20015af5
SH
384 .makeFormsVertical;
385 }
386}
515fe565 387
af1b9b69
RT
388/* Section and module editing forms contain special JS components for the
389 availability system (if enabled). */
390#id_availabilityconditionsjson[aria-hidden=true],
391.availability-field [aria-hidden=true] {
392 display: none;
393}
394.availability-eye,
395.availability-delete {
396 margin-right: 8px;
397}
398/* Eye icons in front of child lists are aligned specially. */
399.availability-list > .availability-eye img {
400 vertical-align: top;
401 margin-top: 12px;
402}
403.availability-plugincontrols {
404 min-height: 40px;
405 padding: 2px 0 0 4px;
406 background: none repeat scroll 0% 0% @wellBackground;
407 border: 1px solid @grayLighter;
408 border-radius: 4px;
409 display: inline-block;
410 margin-right: 8px;
411 select {
412 width: auto;
413 max-width: 200px;
414 }
415}
416.availability-field .availability-plugincontrols .availability-group select {
417 max-width: 12rem;
418}
419/* Nested section is grey. */
420.availability-childlist > .availability-inner {
421 display: inline-block;
422 background: @wellBackground;
423 border: 1px solid @grayLighter;
424 border-radius: 4px;
425 padding: 6px;
426 margin-bottom: 6px;
427}
428/* Second (and more) levels of nested sections are white. */
429.availability-childlist .availability-childlist > .availability-inner {
430 background: white;
431}
00c832d7 432/* Default form styling colours all text red. With availability conditions
433 this looks excessive as we show 'Invalid' markers in specific places. */
434.mform .error .availability-field {
435 color: @textColor;
436}
437
438/* This dialogue is used to add an availability condition. */
439.availability-dialogue {
440 .moodle-dialogue .moodle-dialogue-bd {
441 padding-left: 0;
442 padding-right: 0;
443 padding-bottom: 2px;
444 }
445 ul {
446 display: block;
447 margin: 0;
448 }
449 li {
450 display: block;
451 list-style-type: none;
452 padding: 0 0 4px;
453 clear: both;
454 border-bottom: 1px solid @grayLighter;
455 margin-bottom: 4px;
456 }
457 ul button {
458 float: left;
459 margin-left: 1em;
460 min-width: 140px;
461 margin-top: 4px;
462 }
463 label {
464 margin-left: 170px;
465 margin-right: 1em;
466 margin-bottom: 0;
467 }
468 .availability-buttons button {
469 margin-left: 1em;
470 margin-right: 1em;
471 margin-top: 4px;
472 }
473}
531c263a
AN
474
475/* Revert to the non-fixed width where a textarea has the number of columns
476 specified, or an input has it's size specified. */
477textarea[cols],
478input[size] {
479 width: auto;
480}
60a1ea56
DW
481
482/* Custom styles for autocomplete form element */
d8e57f02
DW
483
484[data-fieldtype=autocomplete] select,
485[data-fieldtype=tags] select,
486select.form-autocomplete-original-select {
487 visibility: hidden;
488 overflow: hidden;
489 width: 15rem;
490 height: 3 * @baseLineHeight + @baseFontSize / 2;
491 margin: 0;
492 margin-bottom: 0.2em;
493 padding: 0;
494 border: 0;
495 vertical-align: top;
496}
497.form-autocomplete-container {
498 display: inline-block;
499 min-height: 4.2rem;
500}
60a1ea56
DW
501.form-autocomplete-selection {
502 margin: 0.2em;
d8e57f02 503 min-height: @baseLineHeight + @baseFontSize / 2;
60a1ea56
DW
504}
505.form-autocomplete-multiple [role=listitem] {
506 cursor: pointer;
507}
508
509.form-autocomplete-suggestions {
510 position: absolute;
511 background-color: white;
512 border: 2px solid @grayLighter;
513 border-radius: 3px;
514 min-width: 206px;
515 max-height: 20em;
516 overflow: auto;
65f9a71f
DP
517 margin: 0;
518 padding: 0;
60a1ea56
DW
519 margin-top: -0.2em;
520 z-index: 1;
521}
522.form-autocomplete-suggestions li {
523 list-style-type: none;
524 padding: 0.2em;
525 margin: 0;
526 cursor: pointer;
527 color: @textColor;
528}
529.form-autocomplete-suggestions li:hover {
530 background-color: lighten(@dropdownLinkBackgroundActive, 15%);
531 color: @dropdownLinkColorActive;
532}
533.form-autocomplete-suggestions li[aria-selected=true] {
534 background-color: darken(@navbarBackground, 5%);
535 color: @gray;
536}
537
538.form-autocomplete-downarrow {
539 color: @textColor;
540 position: relative;
541 top: -0.3em;
542 left: -1.5em;
543 cursor: pointer;
544}
60a1ea56
DW
545
546.form-autocomplete-selection:focus {
547 outline: none;
548}
549.form-autocomplete-selection [data-active-selection=true] {
550 padding: 0.5em;
551 font-size: large;
552}
4131cf1d
DW
553
554textarea[data-auto-rows] {
555 overflow-x: hidden;
556}
ca25005c
AN
557
558div[data-passwordunmask="wrapper"] {
559 height: 30px;
560 line-height: 30px;
561 margin-bottom: 10px;
562}
8b493eb0
DM
563
564// Styles for the JS file types browser provided by the "filetypes" element.
565[data-filetypesbrowserbody] {
566 [aria-expanded="false"] > [role="group"],
567 [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"],
568 [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] {
569 display: none;
570 }
571}