MDL-56197 lesson: Multichoice answers not on same line as radio button
[moodle.git] / theme / bootstrapbase / less / moodle / modules.less
1 /* modules.less */
3 // The home for small tweaks to modules that don't require
4 // changes drastic enough to pull in the full module css
5 // and replace it completely
6 // Plus some misc. odds and ends
8 select {
9     width: auto;
10 }
12 // Assign
13 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) #id_attemptsettings .fitem {
14     .fitemtitle,
15     .felement {
16         display: table-cell;
17         float: none;
18         border-top: 1px solid #ddd;
19         padding: 8px 0;
20     }
21 }
23 // Feedback module
25 body.path-mod-feedback #region-main .mform.feedback_form .feedback-item-pagebreak .felement {
26     width: 100%;
27 }
29 .path-mod-feedback .mform.feedback_form#feedback_viewresponse_form .fitem.feedback_hasvalue:not(.feedback-item-captcha) .felement {
30     background: #fbfbf1;
31     min-height: 1em;
32     box-sizing: border-box;
33     padding: 3px;
34     border: 1px solid #ddd;
35 }
37 .path-mod-feedback .mform.feedback_form .fitem.feedback_hasvalue .fstatic:empty {
38     display: inherit;
39 }
41 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem:hover {
42     background: #f5f5f5;
43 }
45 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle label {
46     width: 100%;
47 }
49 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle {
50     position: relative;
51     width: 100%;
52 }
54 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemdd,
55 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemname {
56     float: left;
57 }
59 .path-mod-feedback .mform.feedback_form#feedback_edit_form .fitem .fitemtitle .itemtitle .itemactions {
60     float: right;
61 }
63 // Forum module
65 .path-mod-forum .forumsearch {
66     input,
67     .helptooltip {
68         margin: 0 3px;
69     }
70 }
72 .path-mod-forum .forumheaderlist,
73 .path-mod-forum .forumheaderlist td {
74     border: none;
75 }
77 .path-mod-forum {
78     .forumheaderlist {
79         thead .header,
80         tbody .discussion td {
81             white-space: normal;
82             vertical-align: top;
83             padding-left: 0.5em;
84             padding-right: 0.5em;
85         }
87         thead .header {
88             white-space: normal;
89             vertical-align: top;
90         }
92         thead .header.replies {
93             text-align: center;
94         }
95         thead .header.lastpost {
96             text-align: right;
97         }
98         thead .header th,
99         tbody .discussion td {
100             &.discussionsubscription {
101                 width: 16px;
102                 padding-left: 0.5em;
103                 padding-right: 0.5em;
104             }
105         }
106         .discussion {
107             .author,
108             .replies,
109             .lastpost {
110                 white-space: normal;
111             }
112             .discussionsubscription,
113             .replies {
114                 text-align: center;
115             }
116             .topic,
117             .discussionsubscription,
118             .topic.starter,
119             .author,
120             .replies,
121             .lastpost {
122                 vertical-align: top;
123             }
124             .picture {
125                 margin: 0 20px;
126                 float: left;
127             }
128             .unread {
129                 img {
130                     margin: 0;
131                 }
132             }
133         }
134     }
137 .forumpost {
138     .well;
139     padding: 6px;
140     .header {
141         margin-bottom: 3px;
142     }
143     .picture img {
144         margin: 3px;
145         &.userpicture {
146             margin-left: 3px;
147             margin-right: 10px;
148         }
149     }
150     .content {
151         .posting.fullpost {
152             margin-top: 8px;
153         }
154     }
155     .row {
156         .topic,
157         .content-mask,
158         .options {
159             margin-left: 48px;
160         }
161         &.side {
162             clear: both;
163         }
164     }
167 .forumpost .row .left {
168     width: 48px;
171 .forumpost .options .commands {
172     margin-left: 0;
175 .forumpost .subject {
176     font-weight: bold;
179 // Override hardcoded forum modules styling
180 .forumsearch input[type=text] {
181     margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
184 #page-mod-forum-discuss .discussioncontrols {
185     width: auto;
186     margin: 0;
189 #page-footer {
190     margin-top: 1em;
191     padding: 1em 0;
192     border-top: 2px solid @tableBorder;
195 .maincalendar .calendarmonth td,
196 .maincalendar .calendarmonth th {
197     border: 1px dotted @tableBorder;
200 .path-grade-report-grader h1 {
201     text-align: inherit;
204 #page-mod-chat-gui_basic input#message {
205     max-width: 100%;
208 #page-mod-data-view #singleimage {
209     width: auto;
212 .path-mod-data form {
213     margin-top: 10px;
216 .template_heading {
217     margin-top: 10px;
220 .breadcrumb-button {
221     float: right;
222     margin-top: 4px;
225 .breadcrumb-button .singlebutton {
226     float: left;
227     margin-left: 4px;
230 .navbar-inverse .logininfo a {
231     color: @navbarInverseLinkColor;
233 .navbar-inverse .logininfo a:hover {
234     background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
235     color: @navbarInverseLinkColorHover;
238 .navbar-fixed-top,
239 .navbar-fixed-bottom {
240     z-index: 4030;
243 .ie .row-fluid .desktop-first-column {
244     margin-left: 0;
246 .langmenu form {
247     margin: 0;
249 .container-fluid {
250     max-width: 1680px;
251     margin: 0 auto;
253 // contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
254 canvas {
255     -ms-touch-action: auto;
258 div#dock {
259     display: none;
262 // Choice module
264 .path-mod-choice {
265     .media-left {
266         float: left;
267         padding-right: 1em;
268     }
270     .horizontal .choices .option {
271         display: inline-block;
272     }
275 // Lesson module
277 .path-mod-lesson .firstpageoptions {
278     margin: auto;
279     min-width: 280px;
280     width: 60%;
283 .path-mod-lesson .centerpadded {
284     padding: 5px;
285     text-align: center;
288 /** General styles (scope: all of lesson) **/
289 .path-mod-lesson .contents,
290 .path-mod-lesson .standardtable,
291 .path-mod-lesson .mform .box.contents,
292 .path-mod-lesson .invisiblefieldset.fieldsetfix tr {
293     text-align: left;
296 .path-mod-lesson #layout-table {
297     width: 100%;
300 .path-mod-lesson .edit_buttons form,
301 .path-mod-lesson .edit_buttons input {
302     display: inline;
305 .path-mod-lesson .userinfotable .cell,
306 .path-mod-lesson .userinfotable .userpicture {
307     vertical-align: middle;
310 .path-mod-lesson .invisiblefieldset.fieldsetfix {
311     display: block;
314 .path-mod-lesson .slideshow {
315     overflow: auto;
316     padding: 15px;
319 .path-mod-lesson .menu .menuwrapper {
320     max-height: 400px;
321     overflow: auto;
322     vertical-align: top;
323     margin-bottom: 10px;
326 .path-mod-lesson .menu ul {
327     list-style: none;
328     padding: 5px 0 0 5px;
329     margin: 0;
331 .path-mod-lesson .menu ul li {
332     padding-bottom: 5px;
334 .path-mod-lesson .skip {
335     position: absolute;
336     top: -1000em;
337     width: 20em;
339 .path-mod-lesson .branchbuttoncontainer.horizontal div,
340 .path-mod-lesson .branchbuttoncontainer.horizontal form {
341     display: inline;
343 .path-mod-lesson .firstpageoptions {
344     width: 30%;
345     margin-left: 35%;
346     margin-top: 1em;
348 .path-mod-lesson .progress_bar_table,
349 .path-mod-lesson .progress_bar_completed,
350 .path-mod-lesson .progress_bar_todo {
351     padding: 0;
352     margin: 0;
354 .path-mod-lesson .progress_bar_token {
355     height: 20px;
356     width: 5px;
357     padding: 0;
358     margin: 0;
360 .path-mod-lesson .edit_pages_box .addlinks {
361     margin: 0;
362     margin-bottom: 1em;
364 .path-mod-lesson .progress_bar_completed {
365     background-color: green;
366     text-align: right;
367     vertical-align: middle;
368     color: #fff;
371 .path-mod-lesson .resourcecontent {
372     text-align: center;
375 .path-mod-lesson .answeroption .fcheckbox > span {
376     position: relative;
377     float: left;
380 .path-mod-lesson .answeroptiongroup .fgroup > span {
381     position: relative;
382     width: 100%;
385 .path-mod-lesson .answeroption .fcheckbox input,
386 .path-mod-lesson .answeroptiongroup input {
387     position: absolute;
388     top: 2px;
389     margin-top: 0;
390     left: 0;
393 .path-mod-lesson .answeroption .fcheckbox label,
394 .path-mod-lesson .mform .fitem.answeroptiongroup fieldset.fgroup label {
395     padding-left: 20px;
396     float: left;
399 .path-mod-lesson .answeroption .felement label p:last-child,
400 .path-mod-lesson .answeroptiongroup .felement label p:last-child {
401     margin-bottom: 0;
403 .path-mod-lesson .answeroption .fradio label p,
404 .path-mod-lesson .answeroption .fcheckbox label p {
405     display: inline;
408 /**
409  * Style for view.php
410  **/
411 #page-mod-lesson-view .password-form .submitbutton {
412     display: inline;
414 .path-mod-lesson .reviewessay {
415     width: 40%;
416     border: 1px solid #ddd;
417     background-color: #eee;
420 /* Countdown timer. */
421 #lesson-timer {
422     text-align: center;
425 .path-mod-lesson .essayungraded {
426     background-color: #efcfcf;
429 .path-mod-lesson .essaygraded {
430     background-color: #efefcf;
433 .path-mod-lesson .essaysent {
434     background-color: #cfefcf;
437 .path-mod-wiki .wiki_headingtitle,
438 .path-mod-wiki .midpad,
439 .path-mod-wiki .wiki_headingtime {
440     text-align: inherit;
443 .path-mod-wiki .wiki_contentbox {
444     width: 100%;
447 // Dropdown styling.
448 .dropdown-menu {
449     > li > a {
450         padding: 3px 20px 3px 8px;
451     }
454 // Survey module
456 .path-mod-survey {
457     .surveytable {
458         > tbody > tr:nth-of-type(odd) {
459             background-color: @tableBackground;
460         }
461         > tbody > tr:nth-of-type(even) {
462             background-color: @tableBackgroundAccent;
463         }
464         .rblock label {
465             text-align: center;
466         }
467     }
468     .resultgraph,
469     .reportsummary,
470     .studentreport,
471     .reportbuttons,
472     .centerpara {
473         text-align: center;
474     }
477 .nav .caret {
478     margin-left: 4px;
481 // Dividers
482 .nav {
483     .divider {
484         overflow: hidden;
485         width: 0;
486         height: @navbarHeight;
487         border-left: 1px solid @navbarBackground;
488         border-right: 1px solid @navbarBackgroundHighlight;
489     }
491 .navbar-inverse {
492     .nav {
493         .divider {
494             border-left-color: @navbarInverseBackground;
495             border-right-color: lighten(@navbarInverseBackground, 25%);
496         }
497     }
499 .dropdown-menu {
500     .divider {
501         width: auto;
502         height: 1px;
503         border-left: 0 none;
504         border-right: 0 none;
505     }
508 // Usermenu
509 .usermenu {
510     .login {
511         color: @navbarText;
512         line-height: 40px;
513         a {
514             color: @linkColor;
515             &:hover,
516             &:focus {
517                 color: @linkColorHover;
518                 text-decoration: underline;
519             }
520         }
521     }
522     .moodle-actionmenu {
524         .toggle-display {
525             display: block;
526             opacity: 1;
527             color: @navbarLinkColor;
528             line-height: 40px;
529             height: 40px;
530             &:hover {
531                 color: @navbarLinkColorHover;
532             }
534             .userbutton {
535                 height: 40px;
536                 line-height: 40px;
537                 .avatars {
538                     display: inline-block;
539                     height: 36px;
540                     width: 36px;
541                     vertical-align: middle;
542                     margin-right: 6px;
543                     margin-left: 6px;
545                     .avatar,
546                     img {
547                         display: block;
548                     }
549                 }
550                 .usertext {
551                     display: inline-block;
552                     vertical-align: middle;
553                     line-height: 1em;
554                     color: inherit;
555                     .meta,
556                     .role {
557                         display: block;
558                         font-size: 12px;
559                         .value {
560                             font-weight: bold;
561                         }
562                     }
563                     .role {
564                         font-weight: bold;
565                     }
566                 }
567             }
569             // Hide caret when JS is disabled.
570             .caret {
571                 display: none;
572             }
573         }
576         // A little bit of visual feedback for the action menu when Javascript is disabled.
577         .menu {
578             .menu-action.icon {
579                 img {
580                     border-radius: 0;
581                     background: transparent;
582                     box-shadow: none;
583                 }
584                 &:hover img {
585                     background: #fff;
586                     border-radius: 4px;
587                     box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
588                 }
589             }
590         }
591         &[data-enhanced] .menu {
592             .menu-action.icon,
593             .menu-action.icon:hover {
594                 img {
595                     border-radius: 0;
596                     background: transparent;
597                     box-shadow: none;
598                 }
599             }
600         }
602     }
604 .navbar-inverse {
605     .usermenu {
606         .login {
607             color: @navbarInverseText;
608             a {
609                 color: @navbarInverseLinkColor;
610                 &:hover {
611                     color: @navbarInverseLinkColorHover;
612                 }
613             }
614         }
615         .moodle-actionmenu {
616             .toggle-display {
617                 color: @navbarInverseLinkColor;
618             }
619             .userbutton {
620                 .usertext {
621                     color: @navbarInverseLinkColor;
622                     .meta {
623                         color: @navbarInverseText;
624                         .value {
625                             color: @navbarInverseLinkColor;
626                         }
627                     }
628                 }
629             }
630             &:hover {
631                 .usertext {
632                     color: @navbarInverseLinkColorHover;
633                     .meta {
634                         color: @navbarInverseText;
635                         .value {
636                             color: @navbarInverseLinkColorHover;
637                         }
638                     }
639                 }
640             }
641             &[data-enhanced] .toggle-display.textmenu {
642                 .caret {
643                     border-top-color: @navbarInverseLinkColorHover;
644                 }
645             }
647             // A little bit of visual feedback for the action menu when Javascript is disabled.
648             .menu {
649                 .menu-action.icon {
650                     img {
651                         border-radius: 0;
652                         background: transparent;
653                         box-shadow: none;
654                     }
655                     &:hover img {
656                         background: #333;
657                         border-radius: 4px;
658                         box-shadow: 0 0 16px rgba(255, 255, 255, 1);
659                     }
660                 }
661             }
662             &[data-enhanced] .menu {
663                 .menu-action.icon,
664                 .menu-action.icon:hover {
665                     img {
666                         border-radius: 0;
667                         background: transparent;
668                         box-shadow: none;
669                     }
670                 }
671             }
672         }
673     }
676 .jsenabled {
677     .usermenu {
678         .moodle-actionmenu {
679             .toggle-display {
680                 display: block;
682                 &.textmenu {
683                     padding-left: 8px;
684                     padding-right: 8px;
685                 }
687                 // Show caret when JS is enabled.
688                 .caret {
689                     display: inline-block;
690                     position: relative;
691                     top: 9px;
692                 }
693             }
695             > .menubar {
696                 display: block;
697                 margin: 0;
698             }
699             > .menu {
700                 min-width: 160px;
701                 .filler {
702                     display: block;
703                     .nav-divider();
704                 }
705             }
707             &.show {
708                 background-color: @navbarLinkBackgroundActive;
709                 .menu {
710                     padding: 5px 0;
711                     margin: 2px 0 0;
712                     background-clip: padding-box;
713                     &:before {
714                         content: '';
715                         display: inline-block;
716                         border-left: 7px solid transparent;
717                         border-right: 7px solid transparent;
718                         border-bottom: 7px solid #ccc;
719                         border-bottom-color: @dropdownBorder;
720                         position: absolute;
721                         top: -7px;
722                     }
723                     &:after {
724                         content: '';
725                         display: inline-block;
726                         border-left: 6px solid transparent;
727                         border-right: 6px solid transparent;
728                         border-bottom: 6px solid @dropdownBackground;
729                         position: absolute;
730                         top: -6px;
731                     }
733                     a {
734                         border-radius: 0;
736                         &:focus {
737                             text-decoration: none;
738                         }
739                         &:hover {
740                             text-decoration: none;
741                             #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
742                         }
743                     }
744                     &.align-tr-br {
745                         margin-top: 2px;
746                     }
747                     .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
748                 }
749             }
750         }
751     }
752     .navbar-inverse {
753         .usermenu {
754             .moodle-actionmenu {
756                 &.show {
757                     background-color: @navbarInverseLinkBackgroundActive;
758                 }
759             }
760         }
761     }
765 .usermenu {
766     float: right;
767     > .moodle-actionmenu {
768         > .menu {
769             &:before {
770                 right: 9px;
771             }
772             &:after {
773                 right: 10px;
774             }
775         }
776         > .menubar li a {
777             text-align: right;
778         }
779     }
781 &.userloggedinas .usermenu .userbutton .avatars {
782     .avatar {
783         &.current {
784             left: 16px;
785         }
786     }
789 .userloggedinas .usermenu .userbutton .avatars {
790     .avatar {
791         &.current {
792             position: relative;
793             top: 4px;
794             left: 4px;
795             width: 20px;
796             height: 20px;
797             margin-top: 11px;
798             margin-bottom: -34px;
799             border: 1px solid #fff;
800             border-radius: 50%;
801             box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
802         }
803         img {
804             width: inherit;
805             height: inherit;
806         }
807         overflow: hidden;
808     }
811 // Quiz module
813 // Question navigation block.
814 .path-mod-quiz #mod_quiz_navblock {
815     .qnbutton {
816         text-decoration: none;
817         font-size: 14px;
818         line-height: 20px;
819         font-weight: normal;
820         background-color: @white;
821         background-image: none;
822         height: 40px;
823         width: 30px;
824         border-radius: 3px;
825         border: 0;
826         overflow: visible;
827         margin: 0 6px 6px 0;
828     }
829     span.qnbutton {
830         cursor: default;
831         background-color: @inputDisabledBackground;
832         color: @gray;
833     }
834     a.qnbutton:hover,
835     a.qnbutton:active,
836     a.qnbutton:focus {
837         text-decoration: underline;
838     }
840     .qnbutton .thispageholder {
841         border: 1px solid;
842         border-radius: 3px;
843         z-index: 1;
844     }
845     .qnbutton.thispage .thispageholder {
846         border-width: 3px;
847     }
848     .allquestionsononepage .qnbutton.thispage .thispageholder {
849         border-width: 1px;
850     }
852     .qnbutton.flagged .thispageholder {
853         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
854     }
856     .qnbutton .trafficlight {
857         border: 0;
858         background: @white none center/10px no-repeat scroll;
859         height: 20px;
860         margin-top: 20px;
861         border-radius: 0 0 3px 3px;
862     }
864     .qnbutton.notyetanswered .trafficlight,
865     .qnbutton.invalidanswer .trafficlight {
866         background-color: @white;
867     }
868     .qnbutton.invalidanswer .trafficlight {
869         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
870     }
871     .qnbutton.correct .trafficlight {
872         background-image: url([[pix:theme|mod/quiz/checkmark]]);
873         background-color: @successText;
874     }
875     .qnbutton.blocked .trafficlight {
876         background-image: url([[pix:core|t/locked]]);
877         background-color: @inputDisabledBackground;
878     }
879     .qnbutton.notanswered .trafficlight,
880     .qnbutton.incorrect .trafficlight {
881         background-color: @errorText;
882     }
883     .qnbutton.partiallycorrect .trafficlight {
884         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
885         background-color: @orange;
886     }
887     .qnbutton.complete .trafficlight,
888     .qnbutton.answersaved .trafficlight,
889     .qnbutton.requiresgrading .trafficlight {
890         background-color: @grayLight;
891     }
894 // Scorm.
895 .path-mod-scorm .scorm-center {
896     text-align: center;
899 .path-mod-scorm.forcejavascript .scorm-center {
900     display: none;
903 .path-mod-scorm.jsenabled .scorm-center {
904     display: block;
907 .path-mod-scorm #region-main #intro {
908     width: auto;