modules.scss 13.1 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
/* modules.less */

// The home for small tweaks to modules that don't require
// changes drastic enough to pull in the full module css
// and replace it completely
// Plus some misc. odds and ends

select {
    width: auto;
}

12
13
14
15
16
17
18
19
// Choice module

.path-mod-choice {
    .horizontal .choices .option {
        display: inline-block;
    }
}

20
21
22
.path-mod-feedback .feedback_form .col-form-label {
    display: block !important; /* stylelint-disable-line declaration-no-important */
}
23

24
// Feedback module
25
26
27
.path-mod-feedback .itemactions {
    float: right;
}
28
29
30
31
.path-mod-feedback .itemhandle {
    position: absolute;
    right: 1rem;
}
32

33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// Forum module

.path-mod-forum .forumsearch {
    input,
    .helptooltip {
        margin: 0 3px;
    }
}

.path-mod-forum .forumheaderlist,
.path-mod-forum .forumheaderlist td {
    border: none;
}

.path-mod-forum {
    .forumheaderlist {
        thead .header,
        tbody .discussion td {
            white-space: normal;
            vertical-align: top;
            padding-left: 0.5em;
            padding-right: 0.5em;
        }

        thead .header {
            white-space: normal;
            vertical-align: top;
        }

        thead .header.replies {
            text-align: center;
        }
65

66
67
68
        thead .header.lastpost {
            text-align: right;
        }
69

70
        thead .header th,
71
        tbody .discussion td {
72
73
74
75
76
77
            &.discussionsubscription {
                width: 16px;
                padding-left: 0.5em;
                padding-right: 0.5em;
            }
        }
78

79
        .discussion {
80
81
82
            .author,
            .replies,
            .lastpost {
83
84
                white-space: normal;
            }
85

86
87
88
89
            .discussionsubscription,
            .replies {
                text-align: center;
            }
90

91
92
93
94
95
96
97
98
99
100
101
            .topic,
            .discussionsubscription,
            .topic.starter,
            .picture,
            .author,
            .replies,
            .lastpost {
                vertical-align: top;
            }
        }
    }
102
103
104
105
106
107
108
109
110
111
112

    // Style for the forum subscription mode node.
    .subscriptionmode {
        color: $body-color;
    }

    // Style for the currently selected subscription mode.
    .activesetting {
        color: $body-color;
        font-weight: bold;
    }
113
114
115
116
117
}

.forumpost {
    @extend .card;
    padding: 6px;
118

119
120
121
    .header {
        margin-bottom: 3px;
    }
122

123
124
    .picture img {
        margin: 3px;
125

126
127
128
129
130
        &.userpicture {
            margin-left: 3px;
            margin-right: 10px;
        }
    }
131

132
133
134
135
136
    .content {
        .posting.fullpost {
            margin-top: 8px;
        }
    }
137

138
139
140
141
142
143
    .row {
        .topic,
        .content-mask,
        .options {
            margin-left: 48px;
        }
144

145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
        &.side {
            clear: both;
        }
    }
}

.forumpost .row .left {
    width: 48px;
}

.forumpost .options .commands {
    margin-left: 0;
}

.forumpost .subject {
    font-weight: bold;
}

// Override hardcoded forum modules styling
.forumsearch input[type=text] {
165
    margin-bottom: 0;
166
167
168
169
170
}

#page-mod-forum-discuss .discussioncontrols {
    width: auto;
    margin: 0;
171
172
173
174

    .form-inline input {
        margin-top: -1px;
    }
175
176
}

177
178
.maincalendar .calendarmonth td,
.maincalendar .calendarmonth th {
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
    border: 1px dotted $table-border-color;
}

.path-grade-report-grader h1 {
    text-align: inherit;
}

#page-mod-chat-gui_basic input#message {
    max-width: 100%;
}

#page-mod-data-view #singleimage {
    width: auto;
}

.path-mod-data form {
    margin-top: 10px;
}

.template_heading {
    margin-top: 10px;
}

.breadcrumb-button {
    margin-top: 4px;
}

.breadcrumb-button .singlebutton {
    float: left;
    margin-left: 4px;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    z-index: 4030;
}

.ie .row-fluid .desktop-first-column {
    margin-left: 0;
}
219

220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
.langmenu form {
    margin: 0;
}
// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
canvas {
    -ms-touch-action: auto;
}

div#dock {
    display: none;
}

// Choice module

// Lesson module

236
/** General styles (scope: all of lesson) **/
237
238
239
.path-mod-lesson .invisiblefieldset.fieldsetfix {
    display: block;
}
240
241
242
243
244
245
246
247
248
249
250

.path-mod-wiki .wiki_headingtitle,
.path-mod-wiki .midpad,
.path-mod-wiki .wiki_headingtime {
    text-align: inherit;
}

.path-mod-wiki .wiki_contentbox {
    width: 100%;
}

251
252
253
254
255
// Dropdown styling.
.dropdown-menu {
    margin-top: 11px;
}

256
257
258
259
// Survey module

.path-mod-survey {
    .surveytable {
260
261
262
263
264
265
266
267
268
269
270
        > tbody > tr:nth-of-type(odd) {
            background-color: $table-bg;
        }

        > tbody > tr:nth-of-type(even) {
            background-color: $table-bg-accent;
        }

        .rblock label {
            text-align: center;
        }
271
    }
272

273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
}

.nav .caret {
    margin-left: 4px;
}

// Dividers
.nav {
    .divider {
        overflow: hidden;
        width: 0;
    }
}

// Usermenu
.usermenu {
289
290
    float: right;

291
    .login {
292
        line-height: 2.25rem;
293

294
        a {
295
            color: $link-color;
296
297
            &:hover,
            &:focus {
298
                color: $link-hover-color;
299
300
301
302
                text-decoration: underline;
            }
        }
    }
303
}
304

305
.userloggedinas,
306
307
.userswitchedrole,
.loginfailures {
308
    .usermenu {
309
310
311
312
313
314
        .usertext {
            float: left;
            text-align: right;
            margin-right: $spacer / 2;
            height: 35px;
            .meta {
315
                display: block;
316
                font-size: $font-size-sm;
317
            }
318
319
320
        }
        .avatar {
            img {
321
                margin: 0;
322
323
324
325
326
            }
        }
    }
}

327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
.userloggedinas .usermenu {
    .userbutton .avatars {
        position: relative;
        display: inline-block;
        .avatar {
            &.current {
                display: inline-block;
                position: absolute;
                bottom: 0;
                right: 0;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                img {
                    vertical-align: baseline;
                }
343
            }
344
345
346
            img {
                width: inherit;
                height: inherit;
347
348
            }
        }
349
350
351
352
        .realuser {
            width: 35px;
            height: 35px;
            display: inline-block;
353
354
355
356
        }
    }
}

357
358
359
@include media-breakpoint-down(sm) {
    .usertext {
        display: none;
360
361
362
363
    }
}

// Quiz module
364
365
366
367
368
369
370
371
372
373
374
375
376
.path-mod-quiz .mod-quiz-edit-content {
    // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
    margin-bottom: 10rem;
}

#page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
#page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
    width: auto;
}
#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
    float: left;
    width: 20rem;
    display: inline-block;
377
    min-height: 12rem;
378
379
380
381
382
383
384
385
386
387
}

#page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
    line-height: 1.5;
    vertical-align: bottom;
}
#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
    float: left;
    clear: left;
}
388
#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
389
390
391
    width: 90%;
    height: 22px;
}
392
393
394
395
396
397
398
399

// Question navigation block.
.path-mod-quiz #mod_quiz_navblock {
    .qnbutton {
        text-decoration: none;
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
400
        background-color: $card-bg;
401
402
403
404
405
406
407
408
        background-image: none;
        height: 40px;
        width: 30px;
        border-radius: 3px;
        border: 0;
        overflow: visible;
        margin: 0 6px 6px 0;
    }
409

410
411
412
413
414
    span.qnbutton {
        cursor: default;
        background-color: $input-bg-disabled;
        color: $gray;
    }
415

416
417
418
419
420
421
422
423
424
425
426
    a.qnbutton:hover,
    a.qnbutton:active,
    a.qnbutton:focus {
        text-decoration: underline;
    }

    .qnbutton .thispageholder {
        border: 1px solid;
        border-radius: 3px;
        z-index: 1;
    }
427

428
429
430
    .qnbutton.thispage .thispageholder {
        border-width: 3px;
    }
431

432
433
434
435
436
    .allquestionsononepage .qnbutton.thispage .thispageholder {
        border-width: 1px;
    }

    .qnbutton.flagged .thispageholder {
437
        background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
438
439
440
441
    }

    .qnbutton .trafficlight {
        border: 0;
442
        background: $card-bg none center / 10px no-repeat scroll;
443
444
445
446
447
448
449
        height: 20px;
        margin-top: 20px;
        border-radius: 0 0 3px 3px;
    }

    .qnbutton.notyetanswered .trafficlight,
    .qnbutton.invalidanswer .trafficlight {
450
        background-color: $card-bg;
451
    }
452

453
454
455
    .qnbutton.invalidanswer .trafficlight {
        background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
    }
456

457
458
459
460
    .qnbutton.correct .trafficlight {
        background-image: url([[pix:theme|mod/quiz/checkmark]]);
        background-color: $state-success-text;
    }
461

462
463
464
465
    .qnbutton.blocked .trafficlight {
        background-image: url([[pix:core|t/locked]]);
        background-color: $input-bg-disabled;
    }
466

467
468
469
470
    .qnbutton.notanswered .trafficlight,
    .qnbutton.incorrect .trafficlight {
        background-color: $state-danger-text;
    }
471

472
473
474
475
    .qnbutton.partiallycorrect .trafficlight {
        background-image: url([[pix:theme|mod/quiz/whitecircle]]);
        background-color: $state-warning-text;
    }
476

477
478
479
480
481
482
    .qnbutton.complete .trafficlight,
    .qnbutton.answersaved .trafficlight,
    .qnbutton.requiresgrading .trafficlight {
        background-color: $gray-light;
    }
}
483

484
485

// Assign.
486
487
488
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
    top: auto;
}
489
490
491
.path-mod-assign .no-overflow {
    overflow: initial;
}
492

493
494
495
496
// This section removes the responsiveness from the form in the grading panel
$popout-header-font-size: 1.5 * $font-size-base;
// This can't be calculated from modal-title-padding because we are mixing px and rem units.
$popout-header-height: 4rem;
497

498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
    height: calc(100% - #{$popout-header-height});
}

.path-mod-assign [data-region="grade-panel"] {
    padding-top: $spacer;
}
.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
    width: 100%;
    padding: 0;
}
.path-mod-assign [data-region="grade-panel"] fieldset,
.path-mod-assign [data-region="grade-panel"] .fitem.row {
    margin: 0;
}

.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
    float: none !important; /* stylelint-disable-line declaration-no-important */
}

.path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
    width: 100%;
521
}
522

523
524
525
526
527
528
.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
    width: auto;
}

// Now styles for the popout sections.

529
530
531
.path-mod-assign [data-region="grade-panel"] .popout {
    background-color: $modal-content-bg;
}
532

533
534
535
536
537
538
539
540
541
542
.path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
    background-color: $card-bg;
    @include border-radius($card-border-radius);
    border: $card-border-width solid $card-border-color;
    padding: $card-spacer-x;
    margin-bottom: $spacer;
}
.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
    border-bottom: $hr-border-width solid $hr-border-color;
    margin-bottom: $spacer;
543
}
544

545

546
547
.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
    @extend .modal-header;
548
    font-size: $popout-header-font-size;
549
}
550

551
552
553
.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
    margin-top: 0;
}
554

555
// Now style the fixed header elements.
556

557
558
559
560
.path-mod-assign [data-region="assignment-info"] {
    overflow-y: hidden;
}

561
562
563
.path-mod-assign [data-region="grading-navigation"] {
    padding: 6px;
}
564

565
566
567
.path-mod-assign [data-region="grade-actions"] {
    padding: 10px;
}
568

569
570
571
.path-mod-assign [data-region="user-info"] .img-rounded {
    margin-top: 0;
}
572

573
574
575
.path-mod-assign [data-region="grading-navigation-panel"] {
    height: 85px;
}
576

577
578
579
580
581
582
583
584
585
@media (max-width: 767px) {
    .path-mod-assign [data-region="grading-navigation-panel"] {
        height: auto;
    }
    .path-mod-assign [data-region="user-info"] {
        margin-top: 1rem;
    }
}

586
587
588
589
590
591
592
593
594
595
596
.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
    width: auto;
    display: inline-block;
}

/**
 * Assign feedback.
 */
.assignfeedback_editpdf_widget * {
    box-sizing: content-box;
}
597

598
599
600
.assignfeedback_editpdf_widget button {
    box-sizing: border-box;
}
601

602
603
604
.assignfeedback_editpdf_widget .commentcolourbutton img {
    border-width: 0;
}
605

606
607
608
609
610
611
612
613
.assignfeedback_editpdf_widget .label {
    @extend .tag;
    @extend .tag-info;
}

.assignfeedback_editpdf_menu {
    padding: 0;
}
614

615
616
617
618
619
620
621
622
623
624
625
626
627
628
.path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
    float: none;
}
.path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
    width: 100%;
}
.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
    padding-left: $spacer;
    padding-right: $spacer;
}
.path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
.path-mod-assign [data-region="grade-panel"] .showstudentdesc {
    background-color: $card-bg;
}
629
630
631
632
633
634
635
636
637
638

/**
 * Mod LTI.
 */
.path-admin-mod-lti {
    .btn .loader img,
    #tool-list-loader-container .loader img {
        height: auto;
    }
}