MDL-55402 theme_noname: Convert bootstrapbase to bs4
[moodle.git] / theme / noname / 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
8form {
9 margin: 0;
10}
11.mform fieldset .advancedbutton {
12 text-align: right;
13}
14.jsenabled .mform .containsadvancedelements .advanced {
15 display: none;
16}
17.mform .containsadvancedelements .advanced.show {
18 display: block;
19}
20.mform fieldset.group {
21 margin-bottom: 0
22}
23.mform fieldset.error {
24 border: 1px solid $state-danger-text;
25}
26.mform span.error,
27#adminsettings span.error {
28 display: inline-block;
29 border: 1px solid $state-danger-border;
30 border-radius: 4px;
31 background-color: $state-danger-bg;
32 padding: 4px;
33 margin-bottom: 4px;
34}
35.mform fieldset.collapsible legend a.fheader {
36 padding: 0 5px 0 20px;
37 margin-left: -20px;
38 background: url([[pix:t/expanded]]) 2px center no-repeat;
39}
40.mform fieldset.collapsed legend a.fheader {
41 background-image: url([[pix:t/collapsed]]);
42}
43.jsenabled .mform .collapsed .fcontainer {
44 display: none;
45}
46
47.mform .fitem .fitemtitle div {
48 display: inline;
49}
50#adminsettings .error,
51.loginpanel .error,
52.mform .error {
53 color: $state-danger-text;
54}
55.mform .fdescription.required {
56 margin-left: $display1-size;
57}
58.mform .fpassword .unmask {
59 display: inline-block;
60 margin-left: 0.5em;
61 & > input {
62 margin: 0;
63 }
64 & > label {
65 display: inline-block;
66 }
67}
68.mform label {
69 display: inline-block;
70}
71
72.mform .iconhelp {
73 margin-left: 4px;
74}
75.mform .ftextarea #id_alltext {
76 width: 100%;
77}
78.mform ul.file-list {
79 padding: 0;
80 margin: 0;
81 list-style: none;
82}
83.mform label .req,
84.mform label .adv {
85 cursor: help;
86}
87.mform .fcheckbox input {
88 margin-left: 0;
89}
90.mform .fcheckbox > span,
91.mform .fradio > span,
92.mform .fgroup > span {
93 display: inline-block;
94 margin-top: 5px;
95}
96.mform .fitem fieldset.fgroup label,
97.mform fieldset.fdate_selector label {
98 display: inline;
99 float: none;
100 width: auto;
101}
102.mform .ftags label.accesshide {
103 display: block;
104 position: static;
105}
106.mform .ftags select {
107 margin-bottom: 0.7em;
108 min-width: 22em;
109}
110.mform .helplink img {
111 margin: 0 .45em;
112 padding: 0;
113}
114.mform legend .helplink img {
115 margin: 0 .2em;
116}
117.singleselect label {
118 margin-right: .3em;
119}
120/*rtl:ignore*/
121input#id_externalurl {
122 direction: ltr;
123}
124#portfolio-add-button {
125 display: inline;
126}
127
128// Copying in Bootstrap styles.
129.form-item,
130.mform .fitem {
131 .form-horizontal {
132 @extend .control-group;
133 }
134 margin-bottom: 10px;
135 // Theres's a mysterious extra 10px inside this item,
136 // so reduce margin by 10px from 20px standard to compensate.
137}
138.form-item .form-label,
139.mform .fitem div.fitemtitle .form-horizontal {
140 @extend .control-label;
141}
142.form-defaultinfo,
143.form-label .form-shortname {
144 @extend .text-muted;
145}
146.form-label .form-shortname {
147 font-size: $font-size-xs;
148 display: block;
149}
150.form-item .form-setting,
151.form-item .form-description,
152.mform .fitem .felement,
153#page-mod-forum-search .c1 .form-horizontal {
154 @extend .controls;
155}
156
157
158.formsettingheading .form-horizontal {
159 @extend .text-muted;
160}
161// Moodle doesn't differentiate between what Bootstrap calls
162// .uneditable-inputs and form help text. Styling them both as
163// uneditable looks ugly, styling both as form help is fairly
164// subtle in it's impact. Going for the latter as the best option.
165.form-item .form-description,
166.felement.fstatic {
167 @extend .text-muted;
168 padding-top: 5px;
169}
170.form-item .form-description {
171 padding-top: 0;
172}
173.fitem .fstaticlabel {
174 font-weight: bold;
175}
176
177// Pale grey container for submit buttons.
178table#form td.submit,
179.form-buttons,
180.path-admin .buttons,
181#fitem_id_submitbutton,
182.fp-content-center form + div,
183div.backup-section + form,
184#fgroup_id_buttonar {
185 @extend .form-group;
186 padding-left: 0;
187}
188.path-admin .buttons,
189.form-buttons { // Add back the padding it would usually get from being inside a .form-horizontal.
190 padding-left: $display1-size;
191}
192.form-item .form-setting .form-checkbox.defaultsnext {
193 // Need to specify .defaultsnext and the .form-checkbox class
194 // is somewhat randomly re-used on various actual checkboxes
195 // throughout the admin forms, instead of on the wrapper div.
196 margin-top: 5px; // Push down checkboxes to align.
197 display: inline-block; // So above style sticks.
198}
199
200#adminsettings h3 {
201 // Copied from bootstrap/forms.less tag legend.
202 display: block;
203 width: 100%;
204 padding: 0;
205 margin-bottom: $line-height;
206 font-size: $font-size-lg;
207 line-height: $line-height * 2;
208 border: 0;
209 border-bottom: 1px solid #e5e5e5;
210}
211.mform legend a,
212.mform legend a:hover {
213 color: $body-color;
214 text-decoration: none;
215}
216
217// I think this could be avoided (or at least tidied up) ifr
218// we used HTML5 input types like url, phone, email, number etc.
219/* rtl:ignore */
220.mform .fitem .felement input[name=email],
221.mform .fitem .felement input[name=email2],
222.mform .fitem .felement input[name=url],
223.mform .fitem .felement input[name=idnumber],
224.mform .fitem .felement input[name=phone1],
225.mform .fitem .felement input[name=phone2] {
226 text-align: left;
227 direction: ltr;
228}
229/* rtl:ignore */
230#id_s__pathtodu,
231#id_s__aspellpath,
232#id_s__pathtodot,
233#id_s__supportemail,
234#id_s__supportpage,
235#id_s__sessioncookie,
236#id_s__sessioncookiepath,
237#id_s__sessioncookiedomain,
238#id_s__proxyhost,
239#id_s__proxyuser,
240#id_s__proxypassword,
241#id_s__proxybypass,
242#id_s__jabberhost,
243#id_s__jabberserver,
244#id_s__jabberusername,
245#id_s__jabberpassword,
246#id_s__additionalhtmlhead,
247#id_s__additionalhtmltopofbody,
248#id_s__additionalhtmlfooter,
249#id_s__docroot,
250#id_s__filter_tex_latexpreamble,
251#id_s__filter_tex_latexbackground,
252#id_s__filter_tex_pathlatex,
253#id_s__filter_tex_pathdvips,
254#id_s__filter_tex_pathconvert,
255#id_s__blockedip,
256#id_s__pathtoclam,
257#id_s__quarantinedir,
258#id_s__sitepolicy,
259#id_s__sitepolicyguest,
260#id_s__cronremotepassword,
261#id_s__allowedip,
262#id_s__blockedip,
263#id_s_enrol_meta_nosyncroleids,
264#id_s_enrol_ldap_host_url,
265#id_s_enrol_ldap_ldapencoding,
266#id_s_enrol_ldap_bind_dn,
267#id_s_enrol_ldap_bind_pw,
268#admin-emoticons .form-text,
269#admin-role_mapping input[type=text],
270#id_s_enrol_paypal_paypalbusiness,
271#id_s_enrol_flatfile_location,
272#page-admin-setting-enrolsettingsflatfile input[type=text],
273#page-admin-setting-enrolsettingsdatabase input[type=text],
274#page-admin-auth-db input[type=text] {
275 direction: ltr;
276}
277/* rtl:ignore */
278#page-admin-setting-enrolsettingsflatfile .informationbox {
279 direction: ltr;
280 text-align: left;
281}
282/* rtl:ignore */
283#page-admin-grade-edit-scale-edit .error input#id_name {
284 margin-right: 170px;
285}
286#page-grade-edit-outcome-course .courseoutcomes {
287 margin-left: auto;
288 margin-right: auto;
289 width: 100%;
290}
291#page-grade-edit-outcome-course .courseoutcomes td {
292 text-align:center;
293}
294/* Install Process' text fields Forms, should always be justified to the left */
295/* rtl:ignore */
296#installform #id_wwwroot,
297#installform #id_dirroot,
298#installform #id_dataroot,
299#installform #id_dbhost,
300#installform #id_dbname,
301#installform #id_dbuser,
302#installform #id_dbpass,
303#installform #id_prefix {
304 direction: ltr;
305}
306
307.mdl-right > label {
308 // Workaround for repository pop-up because the : are outside the label,
309 // can/should be fixed in filemanager renderers.
310 display: inline-block;
311}
312
313// Checkbox labels. Bootstrap puts the associated checkbox inside the label.
314// Moodle puts it beside the label, so we need to make it inline-block
315// to keep it on the same horizontal level.
316input[type="radio"] + label,
317input[type="checkbox"] + label {
318 display: inline;
319 padding-left: 0.2em;
320}
321input[type="radio"],
322input[type="checkbox"] {
323 margin-top: -4px; // Dodgy hack, must be better way.
324 margin-right: 7px;
325}
326.singleselect {
327 display: inline-block;
328 form,
329 select{
330 margin: 0;
331 }
332}
333.form-item .form-label label {
334 margin-bottom: 0;
335}
336.felement.ffilepicker {
337 margin-top: 5px;
338}
339div#dateselector-calendar-panel {
340 z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */
341}
342
343fieldset.coursesearchbox label {
344 display: inline;
345}
346
347/**
348 * Show the labels above text editors and file managers except on wide screens.
349 */
350#region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
351 font-weight: bold;
352}
353@mixin makeFormsVertical() {
354 #region-main .mform:not(.unresponsive) {
355 .fitem {
356 .fitemtitle {
357 display: block;
358 margin-top: 4px;
359 margin-bottom: 4px;
360 text-align: left;
361 width: 100%;
362 }
363 .felement {
364 margin-left: 0;
365 width: 100%;
366 float: left;
367 padding-left: 0;
368 padding-right: 0;
369 }
370 .fstatic:empty {
371 display: none;
372 }
373 .fcheckbox > span,
374 .fradio > span,
375 .fgroup > span {
376 margin-top: 4px;
377 }
378
379 }
380 .femptylabel {
381 .fitemtitle {
382 display: inline-block;
383 width: auto;
384 margin-right: 8px;
385 }
386 .felement {
387 display: inline-block;
388 margin-top: 4px;
389 padding-top: 5px;
390 width: auto;
391 }
392 }
393 .fitem_fcheckbox{
394 .fitemtitle,
395 .felement {
396 display: inline-block;
397 width: auto;
398 }
399 .felement {
400 padding: 6px;
401 }
402 }
403 }
404}
405
406/**
407 * Make forms vertical when the screen is less than 1200px;
408 */
409@media (max-width: 1199px) {
410 body {
411 @include makeFormsVertical();
412 }
413}
414
415
416
417/**
418 * Make forms vertical when the screen is less than 1474px AND both side-pre and side-post contain blocks.
419 * This is an extra special media rule.
420 * It causes forms to show vertically when the screen size is calculated as:
421 * 1199px + (1199px * 23%)
422 * Where 23% is the width of span3
423 * Full calculation is:
424 * $maxWidthForVerticalForms: 1199px * (unit((($fluidGridColumnWidth1200 * 3) + ($fluidGridGutterWidth * (3 - 1)))) / 100) + 1199px;
425 */
426$maxWidthForVerticalForms: 1474px;
427@media (max-width: $maxWidthForVerticalForms) {
428 .used-region-side-pre.used-region-side-post {
429 @include makeFormsVertical();
430 }
431}
432
433/* Section and module editing forms contain special JS components for the
434 availability system (if enabled). */
435#fitem_id_availabilityconditionsjson {
436 *[aria-hidden=true] {
437 display: none;
438 }
439 select,
440 input[type=text] {
441 position:relative;
442 top: 4px;
443 }
444 label {
445 display: inline;
446 }
447 .availability-group {
448 margin-right: 8px;
449 }
450 .availability-item {
451 margin-bottom: 6px;
452 }
453 .availability-none {
454 margin-left: 20px;
455 margin-bottom: 4px;
456 }
457 .availability-plugincontrols {
458 padding: 2px 0px 0px 4px;
459 border: 1px solid $gray-lighter;
460 border-radius: 4px;
461 display: inline-block;
462 margin-right: 8px;
463 }
464 /* Eye icon in front of an item and delete icon after it. */
465 .availability-eye,
466 .availability-delete {
467 margin-right: 8px;
468 }
469 /* Hidden eye icon still takes up space. */
470 .availability-eye[aria-hidden=true] {
471 display: inline;
472 visibility: hidden;
473 }
474 /* Eye icons in front of child lists are aligned specially. */
475 .availability-list > .availability-eye img {
476 vertical-align: top;
477 margin-top: 12px;
478 }
479 /* Add button lines up with child elements. */
480 .availability-button {
481 margin-left: 15px;
482 }
483 /* Nested section is grey. */
484 .availability-childlist > .availability-inner {
485 display: inline-block;
486 border: 1px solid $gray-lighter;
487 border-radius: 4px;
488 padding: 6px;
489 margin-bottom: 6px;
490 }
491 /* Second (and more) levels of nested sections are white. */
492 .availability-childlist .availability-childlist > .availability-inner {
493 background: white;
494 }
495 /* Connecting text needs to be indented. */
496 .availability-connector {
497 margin-left: 20px;
498 margin-bottom: 6px;
499 }
500}
501
502/* Default form styling colours all text red. With availability conditions
503 this looks excessive as we show 'Invalid' markers in specific places. */
504.mform .error .availability-field {
505 color: $body-color;
506}
507
508/* This dialogue is used to add an availability condition. */
509.availability-dialogue {
510 .moodle-dialogue .moodle-dialogue-bd {
511 padding-left: 0;
512 padding-right: 0;
513 padding-bottom: 2px;
514 }
515 ul {
516 display: block;
517 margin: 0;
518 }
519 li {
520 display: block;
521 list-style-type: none;
522 padding: 0 0 4px;
523 clear: both;
524 border-bottom: 1px solid $gray-lighter;
525 margin-bottom: 4px;
526 }
527 ul button {
528 float: left;
529 margin-left: 1em;
530 min-width: 140px;
531 margin-top: 4px;
532 }
533 label {
534 margin-left: 170px;
535 margin-right: 1em;
536 margin-bottom: 0;
537 }
538 .availability-buttons button {
539 margin-left: 1em;
540 margin-right: 1em;
541 margin-top: 4px;
542 }
543}
544
545/* Revert to the non-fixed width where a textarea has the number of columns
546 specified, or an input has it's size specified. */
547textarea[cols],
548input[size] {
549 width: auto;
550}
551
552/* Custom styles for autocomplete form element */
553.form-autocomplete-selection {
554 margin: 0.2em;
555 min-height: 21px;
556}
557.form-autocomplete-multiple [role=listitem] {
558 cursor: pointer;
559}
560
561.form-autocomplete-suggestions {
562 position: absolute;
563 background-color: white;
564 border: 2px solid $gray-lighter;
565 border-radius: 3px;
566 min-width: 206px;
567 max-height: 20em;
568 overflow: auto;
569 margin: 0px;
570 padding: 0px;
571 margin-top: -0.2em;
572 z-index: 1;
573}
574.form-autocomplete-suggestions li {
575 list-style-type: none;
576 padding: 0.2em;
577 margin: 0;
578 cursor: pointer;
579 color: $body-color;
580}
581.form-autocomplete-suggestions li:hover {
582 background-color: lighten($dropdown-link-active-bg, 15%);
583 color: $dropdown-link-active-color;
584}
585.form-autocomplete-suggestions li[aria-selected=true] {
586 background-color: darken($dropdown-bg, 5%);
587 color: $gray;
588}
589
590.form-autocomplete-downarrow {
591 color: $body-color;
592 position: relative;
593 top: -0.3em;
594 left: -1.5em;
595 cursor: pointer;
596}
597
598.form-autocomplete-selection:focus {
599 outline: none;
600}
601.form-autocomplete-selection [data-active-selection=true] {
602 padding: 0.5em;
603 font-size: large;
604}