on-demand release 3.5beta+
[moodle.git] / theme / boost / scss / moodle / modules.scss
CommitLineData
536f0460
DW
1/* modules.less */
2
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
7
8select {
9 width: auto;
10}
11
1d6964dc
TL
12// Choice module
13
14.path-mod-choice {
15 .horizontal .choices .option {
16 display: inline-block;
17 }
18}
19
50302c40
DW
20.path-mod-feedback .feedback_form .col-form-label {
21 display: block !important; /* stylelint-disable-line declaration-no-important */
22}
f25185d7 23
63e4df60 24// Feedback module
ba5c5083
DW
25.path-mod-feedback .itemactions {
26 float: right;
27}
a5d4b548
DW
28.path-mod-feedback .itemhandle {
29 position: absolute;
30 right: 1rem;
31}
ba5c5083 32
536f0460
DW
33// Forum module
34
35.path-mod-forum .forumsearch {
36 input,
37 .helptooltip {
38 margin: 0 3px;
39 }
40}
41
42.path-mod-forum .forumheaderlist,
43.path-mod-forum .forumheaderlist td {
44 border: none;
45}
46
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 }
56
57 thead .header {
58 white-space: normal;
59 vertical-align: top;
60 }
61
62 thead .header.replies {
63 text-align: center;
64 }
f4143537 65
536f0460
DW
66 thead .header.lastpost {
67 text-align: right;
68 }
f4143537 69
536f0460 70 thead .header th,
f4143537 71 tbody .discussion td {
536f0460
DW
72 &.discussionsubscription {
73 width: 16px;
74 padding-left: 0.5em;
75 padding-right: 0.5em;
76 }
77 }
f4143537 78
536f0460 79 .discussion {
f4143537
DP
80 .author,
81 .replies,
82 .lastpost {
536f0460
DW
83 white-space: normal;
84 }
f4143537 85
536f0460
DW
86 .discussionsubscription,
87 .replies {
88 text-align: center;
89 }
f4143537 90
536f0460
DW
91 .topic,
92 .discussionsubscription,
93 .topic.starter,
94 .picture,
95 .author,
96 .replies,
97 .lastpost {
98 vertical-align: top;
99 }
100 }
101 }
01dc1c11
JP
102
103 // Style for the forum subscription mode node.
104 .subscriptionmode {
105 color: $body-color;
106 }
107
108 // Style for the currently selected subscription mode.
109 .activesetting {
110 color: $body-color;
111 font-weight: bold;
112 }
536f0460
DW
113}
114
115.forumpost {
540ea1bc
BB
116 border: $border-width solid $border-color;
117 display: block;
536f0460 118 padding: 6px;
f4143537 119
536f0460
DW
120 .header {
121 margin-bottom: 3px;
122 }
f4143537 123
536f0460
DW
124 .picture img {
125 margin: 3px;
f4143537 126
536f0460
DW
127 &.userpicture {
128 margin-left: 3px;
129 margin-right: 10px;
130 }
131 }
f4143537 132
536f0460
DW
133 .content {
134 .posting.fullpost {
135 margin-top: 8px;
136 }
137 }
f4143537 138
536f0460 139 .row {
540ea1bc 140 display: block;
536f0460
DW
141 .topic,
142 .content-mask,
143 .options {
144 margin-left: 48px;
145 }
f4143537 146
536f0460
DW
147 &.side {
148 clear: both;
149 }
150 }
151}
152
153.forumpost .row .left {
154 width: 48px;
155}
156
157.forumpost .options .commands {
158 margin-left: 0;
159}
160
161.forumpost .subject {
162 font-weight: bold;
163}
164
165// Override hardcoded forum modules styling
166.forumsearch input[type=text] {
5142f564 167 margin-bottom: 0;
536f0460
DW
168}
169
170#page-mod-forum-discuss .discussioncontrols {
171 width: auto;
172 margin: 0;
7d41ccf0
DW
173
174 .form-inline input {
175 margin-top: -1px;
176 }
536f0460
DW
177}
178
f4143537
DP
179.maincalendar .calendarmonth td,
180.maincalendar .calendarmonth th {
536f0460
DW
181 border: 1px dotted $table-border-color;
182}
183
184.path-grade-report-grader h1 {
185 text-align: inherit;
186}
187
188#page-mod-chat-gui_basic input#message {
189 max-width: 100%;
190}
191
192#page-mod-data-view #singleimage {
193 width: auto;
194}
195
196.path-mod-data form {
197 margin-top: 10px;
198}
199
200.template_heading {
201 margin-top: 10px;
202}
203
204.breadcrumb-button {
536f0460
DW
205 margin-top: 4px;
206}
207
208.breadcrumb-button .singlebutton {
209 float: left;
210 margin-left: 4px;
211}
212
536f0460
DW
213.ie .row-fluid .desktop-first-column {
214 margin-left: 0;
215}
f4143537 216
536f0460
DW
217.langmenu form {
218 margin: 0;
219}
536f0460
DW
220// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
221canvas {
222 -ms-touch-action: auto;
223}
224
225div#dock {
226 display: none;
227}
228
229// Choice module
230
536f0460
DW
231// Lesson module
232
63e4df60 233/** General styles (scope: all of lesson) **/
f4143537
DP
234.path-mod-lesson .invisiblefieldset.fieldsetfix {
235 display: block;
236}
83b9a7c8
MG
237.path-mod-lesson .answeroption .checkbox label p {
238 display: inline;
239}
473391b6
MG
240#page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
241 white-space: normal;
242}
536f0460
DW
243
244.path-mod-wiki .wiki_headingtitle,
245.path-mod-wiki .midpad,
246.path-mod-wiki .wiki_headingtime {
247 text-align: inherit;
248}
249
250.path-mod-wiki .wiki_contentbox {
251 width: 100%;
252}
253
536f0460
DW
254// Survey module
255
256.path-mod-survey {
257 .surveytable {
f4143537
DP
258 > tbody > tr:nth-of-type(odd) {
259 background-color: $table-bg;
260 }
261
262 > tbody > tr:nth-of-type(even) {
263 background-color: $table-bg-accent;
264 }
265
266 .rblock label {
267 text-align: center;
268 }
536f0460 269 }
f4143537 270
536f0460
DW
271}
272
273.nav .caret {
274 margin-left: 4px;
275}
276
277// Dividers
278.nav {
279 .divider {
280 overflow: hidden;
281 width: 0;
536f0460
DW
282 }
283}
536f0460
DW
284
285// Usermenu
286.usermenu {
287 .login {
5f18da12 288 line-height: 2.25rem;
f4143537 289
536f0460 290 a {
5f18da12 291 color: $link-color;
536f0460
DW
292 &:hover,
293 &:focus {
5f18da12 294 color: $link-hover-color;
536f0460
DW
295 text-decoration: underline;
296 }
297 }
298 }
3313fdd6 299}
f4143537 300
7001a3b2 301.userloggedinas,
45cd101f
SL
302.userswitchedrole,
303.loginfailures {
536f0460 304 .usermenu {
7001a3b2
FM
305 .usertext {
306 float: left;
307 text-align: right;
308 margin-right: $spacer / 2;
309 height: 35px;
310 .meta {
536f0460 311 display: block;
7001a3b2 312 font-size: $font-size-sm;
536f0460 313 }
7001a3b2
FM
314 }
315 .avatar {
316 img {
fde35b8f 317 margin: 0;
536f0460 318 }
536f0460
DW
319 }
320 }
321}
322
7001a3b2
FM
323.userloggedinas .usermenu {
324 .userbutton .avatars {
325 position: relative;
326 display: inline-block;
327 .avatar {
328 &.current {
329 display: inline-block;
330 position: absolute;
331 bottom: 0;
332 right: 0;
333 width: 20px;
334 height: 20px;
335 border-radius: 50%;
336 img {
337 vertical-align: baseline;
338 }
536f0460 339 }
7001a3b2
FM
340 img {
341 width: inherit;
342 height: inherit;
536f0460
DW
343 }
344 }
7001a3b2
FM
345 .realuser {
346 width: 35px;
347 height: 35px;
348 display: inline-block;
536f0460
DW
349 }
350 }
351}
352
7001a3b2
FM
353@include media-breakpoint-down(sm) {
354 .usertext {
355 display: none;
536f0460
DW
356 }
357}
358
359// Quiz module
12d6dfc1
DW
360.path-mod-quiz .mod-quiz-edit-content {
361 // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
362 margin-bottom: 10rem;
363}
364
365#page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
366#page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
367 width: auto;
a3893e1b 368 max-width: none;
12d6dfc1
DW
369}
370#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
371 float: left;
372 width: 20rem;
373 display: inline-block;
e283c6ca 374 min-height: 12rem;
12d6dfc1
DW
375}
376
377#page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
378 line-height: 1.5;
379 vertical-align: bottom;
380}
381#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
382 float: left;
383 clear: left;
384}
e283c6ca 385#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
12d6dfc1
DW
386 width: 90%;
387 height: 22px;
a3893e1b 388 justify-content: flex-start;
12d6dfc1 389}
536f0460
DW
390
391// Question navigation block.
392.path-mod-quiz #mod_quiz_navblock {
393 .qnbutton {
394 text-decoration: none;
395 font-size: 14px;
396 line-height: 20px;
397 font-weight: normal;
12d6dfc1 398 background-color: $card-bg;
536f0460
DW
399 background-image: none;
400 height: 40px;
401 width: 30px;
402 border-radius: 3px;
403 border: 0;
404 overflow: visible;
405 margin: 0 6px 6px 0;
406 }
f4143537 407
536f0460
DW
408 span.qnbutton {
409 cursor: default;
410 background-color: $input-bg-disabled;
411 color: $gray;
412 }
f4143537 413
536f0460
DW
414 a.qnbutton:hover,
415 a.qnbutton:active,
416 a.qnbutton:focus {
417 text-decoration: underline;
418 }
419
420 .qnbutton .thispageholder {
421 border: 1px solid;
422 border-radius: 3px;
423 z-index: 1;
424 }
f4143537 425
536f0460
DW
426 .qnbutton.thispage .thispageholder {
427 border-width: 3px;
428 }
f4143537 429
536f0460
DW
430 .allquestionsononepage .qnbutton.thispage .thispageholder {
431 border-width: 1px;
432 }
433
434 .qnbutton.flagged .thispageholder {
fde35b8f 435 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
536f0460
DW
436 }
437
438 .qnbutton .trafficlight {
439 border: 0;
12d6dfc1 440 background: $card-bg none center / 10px no-repeat scroll;
536f0460
DW
441 height: 20px;
442 margin-top: 20px;
443 border-radius: 0 0 3px 3px;
444 }
445
446 .qnbutton.notyetanswered .trafficlight,
447 .qnbutton.invalidanswer .trafficlight {
12d6dfc1 448 background-color: $card-bg;
536f0460 449 }
f4143537 450
536f0460
DW
451 .qnbutton.invalidanswer .trafficlight {
452 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
453 }
f4143537 454
536f0460
DW
455 .qnbutton.correct .trafficlight {
456 background-image: url([[pix:theme|mod/quiz/checkmark]]);
457 background-color: $state-success-text;
458 }
f4143537 459
536f0460
DW
460 .qnbutton.blocked .trafficlight {
461 background-image: url([[pix:core|t/locked]]);
462 background-color: $input-bg-disabled;
463 }
f4143537 464
536f0460
DW
465 .qnbutton.notanswered .trafficlight,
466 .qnbutton.incorrect .trafficlight {
467 background-color: $state-danger-text;
468 }
f4143537 469
536f0460
DW
470 .qnbutton.partiallycorrect .trafficlight {
471 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
472 background-color: $state-warning-text;
473 }
f4143537 474
536f0460
DW
475 .qnbutton.complete .trafficlight,
476 .qnbutton.answersaved .trafficlight,
477 .qnbutton.requiresgrading .trafficlight {
478 background-color: $gray-light;
479 }
480}
bffc0ef1 481
3bf57241
SL
482#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
483 height: 1.4em;
484 vertical-align: middle;
485}
21a5c3c4 486
10acff4a
BB
487#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
488 padding: 0;
489 margin: 0 0.4em;
490}
491
21a5c3c4 492// Assign.
bffc0ef1
FM
493.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
494 top: auto;
495}
ba5c5083
DW
496.path-mod-assign .no-overflow {
497 overflow: initial;
498}
f4143537 499
21a5c3c4
DW
500// This section removes the responsiveness from the form in the grading panel
501$popout-header-font-size: 1.5 * $font-size-base;
502// This can't be calculated from modal-title-padding because we are mixing px and rem units.
503$popout-header-height: 4rem;
f4143537 504
21a5c3c4
DW
505.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
506 height: calc(100% - #{$popout-header-height});
507}
508
509.path-mod-assign [data-region="grade-panel"] {
510 padding-top: $spacer;
511}
512.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
513.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
514 width: 100%;
515 padding: 0;
3ec69c2e
BB
516 max-width: 100%;
517 flex: none;
21a5c3c4
DW
518}
519.path-mod-assign [data-region="grade-panel"] fieldset,
520.path-mod-assign [data-region="grade-panel"] .fitem.row {
521 margin: 0;
522}
523
524.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
525 float: none !important; /* stylelint-disable-line declaration-no-important */
526}
527
528.path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
529 width: 100%;
63e4df60 530}
f4143537 531
21a5c3c4
DW
532.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
533 width: auto;
534}
535
536// Now styles for the popout sections.
537
63e4df60
DW
538.path-mod-assign [data-region="grade-panel"] .popout {
539 background-color: $modal-content-bg;
540}
f4143537 541
21a5c3c4
DW
542.path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
543 background-color: $card-bg;
544 @include border-radius($card-border-radius);
545 border: $card-border-width solid $card-border-color;
546 padding: $card-spacer-x;
547 margin-bottom: $spacer;
548}
549.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
550 border-bottom: $hr-border-width solid $hr-border-color;
551 margin-bottom: $spacer;
63e4df60 552}
f4143537 553
21a5c3c4 554
63e4df60
DW
555.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
556 @extend .modal-header;
21a5c3c4 557 font-size: $popout-header-font-size;
63e4df60 558}
f4143537 559
63e4df60
DW
560.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
561 margin-top: 0;
562}
f4143537 563
21a5c3c4 564// Now style the fixed header elements.
f4143537 565
ba5c5083
DW
566.path-mod-assign [data-region="assignment-info"] {
567 overflow-y: hidden;
568}
569
bffc0ef1
FM
570.path-mod-assign [data-region="grading-navigation"] {
571 padding: 6px;
572}
f4143537 573
bffc0ef1
FM
574.path-mod-assign [data-region="grade-actions"] {
575 padding: 10px;
576}
f4143537 577
bffc0ef1
FM
578.path-mod-assign [data-region="user-info"] .img-rounded {
579 margin-top: 0;
580}
f4143537 581
bffc0ef1
FM
582.path-mod-assign [data-region="grading-navigation-panel"] {
583 height: 85px;
584}
f4143537 585
21a5c3c4
DW
586@media (max-width: 767px) {
587 .path-mod-assign [data-region="grading-navigation-panel"] {
588 height: auto;
589 }
590 .path-mod-assign [data-region="user-info"] {
591 margin-top: 1rem;
592 }
593}
594
bffc0ef1
FM
595.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
596 width: auto;
597 display: inline-block;
598}
599
600/**
601 * Assign feedback.
602 */
603.assignfeedback_editpdf_widget * {
604 box-sizing: content-box;
605}
f4143537 606
bffc0ef1
FM
607.assignfeedback_editpdf_widget button {
608 box-sizing: border-box;
609}
f4143537 610
bffc0ef1
FM
611.assignfeedback_editpdf_widget .commentcolourbutton img {
612 border-width: 0;
613}
f4143537 614
bffc0ef1
FM
615.assignfeedback_editpdf_widget .label {
616 @extend .tag;
617 @extend .tag-info;
618}
619
620.assignfeedback_editpdf_menu {
621 padding: 0;
622}
63e4df60 623
a5112298
DW
624.path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
625 float: none;
626}
627.path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
628 width: 100%;
629}
630.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
631 padding-left: $spacer;
632 padding-right: $spacer;
633}
634.path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
635.path-mod-assign [data-region="grade-panel"] .showstudentdesc {
636 background-color: $card-bg;
637}
3d979f96
FM
638
639/**
640 * Mod LTI.
641 */
642.path-admin-mod-lti {
643 .btn .loader img,
644 #tool-list-loader-container .loader img {
645 height: auto;
646 }
647}