7c1976b82d49514b30912a8291a0ad1566baccd4
[moodle.git] / theme / boost / scss / moodle / modules.scss
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 // Choice module
14 .path-mod-choice {
15     .horizontal .choices .option {
16         display: inline-block;
17     }
18 }
20 .path-mod-feedback .feedback_form .col-form-label {
21     display: block !important; /* stylelint-disable-line declaration-no-important */
22 }
24 // Feedback module
25 .path-mod-feedback .itemactions {
26     float: right;
27 }
28 .path-mod-feedback .itemhandle {
29     position: absolute;
30     right: 1rem;
31 }
33 // Forum module
35 .path-mod-forum .forumsearch {
36     input,
37     .helptooltip {
38         margin: 0 3px;
39     }
40 }
42 .path-mod-forum .forumheaderlist,
43 .path-mod-forum .forumheaderlist td {
44     border: none;
45 }
47 .path-mod-forum {
48     .forumheaderlist {
49         thead .header,
50         tbody .discussion td {
51             white-space: normal;
52             vertical-align: top;
53             padding-left: 0.5em;
54             padding-right: 0.5em;
55         }
57         thead .header {
58             white-space: normal;
59             vertical-align: top;
60         }
62         thead .header.replies {
63             text-align: center;
64         }
66         thead .header.lastpost {
67             text-align: right;
68         }
70         thead .header th,
71         tbody .discussion td {
72             &.discussionsubscription {
73                 width: 16px;
74                 padding-left: 0.5em;
75                 padding-right: 0.5em;
76             }
77         }
79         .discussion {
80             .author,
81             .replies,
82             .lastpost {
83                 white-space: normal;
84             }
86             .discussionsubscription,
87             .replies {
88                 text-align: center;
89             }
91             .topic,
92             .discussionsubscription,
93             .topic.starter,
94             .picture,
95             .author,
96             .replies,
97             .lastpost {
98                 vertical-align: top;
99             }
100         }
101     }
103     // Style for the forum subscription mode node.
104     .subscriptionmode {
105         color: $body-color;
106     }
108     // Style for the currently selected subscription mode.
109     .activesetting {
110         color: $body-color;
111         font-weight: bold;
112     }
115 .forumpost {
116     @extend .card;
117     padding: 6px;
119     .header {
120         margin-bottom: 3px;
121     }
123     .picture img {
124         margin: 3px;
126         &.userpicture {
127             margin-left: 3px;
128             margin-right: 10px;
129         }
130     }
132     .content {
133         .posting.fullpost {
134             margin-top: 8px;
135         }
136     }
138     .row {
139         .topic,
140         .content-mask,
141         .options {
142             margin-left: 48px;
143         }
145         &.side {
146             clear: both;
147         }
148     }
151 .forumpost .row .left {
152     width: 48px;
155 .forumpost .options .commands {
156     margin-left: 0;
159 .forumpost .subject {
160     font-weight: bold;
163 // Override hardcoded forum modules styling
164 .forumsearch input[type=text] {
165     margin-bottom: 0;
168 #page-mod-forum-discuss .discussioncontrols {
169     width: auto;
170     margin: 0;
172     .form-inline input {
173         margin-top: -1px;
174     }
177 .maincalendar .calendarmonth td,
178 .maincalendar .calendarmonth th {
179     border: 1px dotted $table-border-color;
182 .path-grade-report-grader h1 {
183     text-align: inherit;
186 #page-mod-chat-gui_basic input#message {
187     max-width: 100%;
190 #page-mod-data-view #singleimage {
191     width: auto;
194 .path-mod-data form {
195     margin-top: 10px;
198 .template_heading {
199     margin-top: 10px;
202 .breadcrumb-button {
203     margin-top: 4px;
206 .breadcrumb-button .singlebutton {
207     float: left;
208     margin-left: 4px;
211 .navbar-fixed-top,
212 .navbar-fixed-bottom {
213     z-index: 4030;
216 .ie .row-fluid .desktop-first-column {
217     margin-left: 0;
220 .langmenu form {
221     margin: 0;
223 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
224 canvas {
225     -ms-touch-action: auto;
228 div#dock {
229     display: none;
232 // Choice module
234 // Lesson module
236 /** General styles (scope: all of lesson) **/
237 .path-mod-lesson .invisiblefieldset.fieldsetfix {
238     display: block;
241 .path-mod-wiki .wiki_headingtitle,
242 .path-mod-wiki .midpad,
243 .path-mod-wiki .wiki_headingtime {
244     text-align: inherit;
247 .path-mod-wiki .wiki_contentbox {
248     width: 100%;
251 // Dropdown styling.
252 .dropdown-menu {
253     margin-top: 11px;
256 // Survey module
258 .path-mod-survey {
259     .surveytable {
260         > tbody > tr:nth-of-type(odd) {
261             background-color: $table-bg;
262         }
264         > tbody > tr:nth-of-type(even) {
265             background-color: $table-bg-accent;
266         }
268         .rblock label {
269             text-align: center;
270         }
271     }
275 .nav .caret {
276     margin-left: 4px;
279 // Dividers
280 .nav {
281     .divider {
282         overflow: hidden;
283         width: 0;
284     }
287 // Usermenu
288 .usermenu {
289     float: right;
291     .login {
292         line-height: 2.25rem;
294         a {
295             color: $link-color;
296             &:hover,
297             &:focus {
298                 color: $link-hover-color;
299                 text-decoration: underline;
300             }
301         }
302     }
305 .userloggedinas,
306 .userswitchedrole,
307 .loginfailures {
308     .usermenu {
309         .usertext {
310             float: left;
311             text-align: right;
312             margin-right: $spacer / 2;
313             height: 35px;
314             .meta {
315                 display: block;
316                 font-size: $font-size-sm;
317             }
318         }
319         .avatar {
320             img {
321                 margin: 0;
322             }
323         }
324     }
327 .userloggedinas .usermenu {
328     .userbutton .avatars {
329         position: relative;
330         display: inline-block;
331         .avatar {
332             &.current {
333                 display: inline-block;
334                 position: absolute;
335                 bottom: 0;
336                 right: 0;
337                 width: 20px;
338                 height: 20px;
339                 border-radius: 50%;
340                 img {
341                     vertical-align: baseline;
342                 }
343             }
344             img {
345                 width: inherit;
346                 height: inherit;
347             }
348         }
349         .realuser {
350             width: 35px;
351             height: 35px;
352             display: inline-block;
353         }
354     }
357 @include media-breakpoint-down(sm) {
358     .usertext {
359         display: none;
360     }
363 // Quiz module
364 .path-mod-quiz .mod-quiz-edit-content {
365     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
366     margin-bottom: 10rem;
369 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
370 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
371     width: auto;
373 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
374     float: left;
375     width: 20rem;
376     display: inline-block;
377     min-height: 12rem;
380 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
381     line-height: 1.5;
382     vertical-align: bottom;
384 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
385     float: left;
386     clear: left;
388 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
389     width: 90%;
390     height: 22px;
393 // Question navigation block.
394 .path-mod-quiz #mod_quiz_navblock {
395     .qnbutton {
396         text-decoration: none;
397         font-size: 14px;
398         line-height: 20px;
399         font-weight: normal;
400         background-color: $card-bg;
401         background-image: none;
402         height: 40px;
403         width: 30px;
404         border-radius: 3px;
405         border: 0;
406         overflow: visible;
407         margin: 0 6px 6px 0;
408     }
410     span.qnbutton {
411         cursor: default;
412         background-color: $input-bg-disabled;
413         color: $gray;
414     }
416     a.qnbutton:hover,
417     a.qnbutton:active,
418     a.qnbutton:focus {
419         text-decoration: underline;
420     }
422     .qnbutton .thispageholder {
423         border: 1px solid;
424         border-radius: 3px;
425         z-index: 1;
426     }
428     .qnbutton.thispage .thispageholder {
429         border-width: 3px;
430     }
432     .allquestionsononepage .qnbutton.thispage .thispageholder {
433         border-width: 1px;
434     }
436     .qnbutton.flagged .thispageholder {
437         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
438     }
440     .qnbutton .trafficlight {
441         border: 0;
442         background: $card-bg none center / 10px no-repeat scroll;
443         height: 20px;
444         margin-top: 20px;
445         border-radius: 0 0 3px 3px;
446     }
448     .qnbutton.notyetanswered .trafficlight,
449     .qnbutton.invalidanswer .trafficlight {
450         background-color: $card-bg;
451     }
453     .qnbutton.invalidanswer .trafficlight {
454         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
455     }
457     .qnbutton.correct .trafficlight {
458         background-image: url([[pix:theme|mod/quiz/checkmark]]);
459         background-color: $state-success-text;
460     }
462     .qnbutton.blocked .trafficlight {
463         background-image: url([[pix:core|t/locked]]);
464         background-color: $input-bg-disabled;
465     }
467     .qnbutton.notanswered .trafficlight,
468     .qnbutton.incorrect .trafficlight {
469         background-color: $state-danger-text;
470     }
472     .qnbutton.partiallycorrect .trafficlight {
473         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
474         background-color: $state-warning-text;
475     }
477     .qnbutton.complete .trafficlight,
478     .qnbutton.answersaved .trafficlight,
479     .qnbutton.requiresgrading .trafficlight {
480         background-color: $gray-light;
481     }
485 // Assign.
486 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
487     top: auto;
489 .path-mod-assign .no-overflow {
490     overflow: initial;
493 // This section removes the responsiveness from the form in the grading panel
494 $popout-header-font-size: 1.5 * $font-size-base;
495 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
496 $popout-header-height: 4rem;
498 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
499     height: calc(100% - #{$popout-header-height});
502 .path-mod-assign [data-region="grade-panel"] {
503     padding-top: $spacer;
505 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
506 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
507     width: 100%;
508     padding: 0;
510 .path-mod-assign [data-region="grade-panel"] fieldset,
511 .path-mod-assign [data-region="grade-panel"] .fitem.row {
512     margin: 0;
515 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
516     float: none !important; /* stylelint-disable-line declaration-no-important */
519 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
520     width: 100%;
523 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
524     width: auto;
527 // Now styles for the popout sections.
529 .path-mod-assign [data-region="grade-panel"] .popout {
530     background-color: $modal-content-bg;
533 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
534     background-color: $card-bg;
535     @include border-radius($card-border-radius);
536     border: $card-border-width solid $card-border-color;
537     padding: $card-spacer-x;
538     margin-bottom: $spacer;
540 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
541     border-bottom: $hr-border-width solid $hr-border-color;
542     margin-bottom: $spacer;
546 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
547     @extend .modal-header;
548     font-size: $popout-header-font-size;
551 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
552     margin-top: 0;
555 // Now style the fixed header elements.
557 .path-mod-assign [data-region="assignment-info"] {
558     overflow-y: hidden;
561 .path-mod-assign [data-region="grading-navigation"] {
562     padding: 6px;
565 .path-mod-assign [data-region="grade-actions"] {
566     padding: 10px;
569 .path-mod-assign [data-region="user-info"] .img-rounded {
570     margin-top: 0;
573 .path-mod-assign [data-region="grading-navigation-panel"] {
574     height: 85px;
577 @media (max-width: 767px) {
578     .path-mod-assign [data-region="grading-navigation-panel"] {
579         height: auto;
580     }
581     .path-mod-assign [data-region="user-info"] {
582         margin-top: 1rem;
583     }
586 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
587     width: auto;
588     display: inline-block;
591 /**
592  * Assign feedback.
593  */
594 .assignfeedback_editpdf_widget * {
595     box-sizing: content-box;
598 .assignfeedback_editpdf_widget button {
599     box-sizing: border-box;
602 .assignfeedback_editpdf_widget .commentcolourbutton img {
603     border-width: 0;
606 .assignfeedback_editpdf_widget .label {
607     @extend .tag;
608     @extend .tag-info;
611 .assignfeedback_editpdf_menu {
612     padding: 0;
615 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
616     float: none;
618 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
619     width: 100%;
621 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
622     padding-left: $spacer;
623     padding-right: $spacer;
625 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
626 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
627     background-color: $card-bg;
630 /**
631  * Mod LTI.
632  */
633 .path-admin-mod-lti {
634     .btn .loader img,
635     #tool-list-loader-container .loader img {
636         height: auto;
637     }