modules.scss 13.2 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
#page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
    white-space: normal;
}
243
244
245
246
247
248
249
250
251
252
253

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

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

254
255
256
257
258
// Dropdown styling.
.dropdown-menu {
    margin-top: 11px;
}

259
260
261
262
// Survey module

.path-mod-survey {
    .surveytable {
263
264
265
266
267
268
269
270
271
272
273
        > 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;
        }
274
    }
275

276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
}

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

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

// Usermenu
.usermenu {
292
293
    float: right;

294
    .login {
295
        line-height: 2.25rem;
296

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

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

330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
.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;
                }
346
            }
347
348
349
            img {
                width: inherit;
                height: inherit;
350
351
            }
        }
352
353
354
355
        .realuser {
            width: 35px;
            height: 35px;
            display: inline-block;
356
357
358
359
        }
    }
}

360
361
362
@include media-breakpoint-down(sm) {
    .usertext {
        display: none;
363
364
365
366
    }
}

// Quiz module
367
368
369
370
371
372
373
374
375
376
377
378
379
.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;
380
    min-height: 12rem;
381
382
383
384
385
386
387
388
389
390
}

#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;
}
391
#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
392
393
394
    width: 90%;
    height: 22px;
}
395
396
397
398
399
400
401
402

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

413
414
415
416
417
    span.qnbutton {
        cursor: default;
        background-color: $input-bg-disabled;
        color: $gray;
    }
418

419
420
421
422
423
424
425
426
427
428
429
    a.qnbutton:hover,
    a.qnbutton:active,
    a.qnbutton:focus {
        text-decoration: underline;
    }

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

431
432
433
    .qnbutton.thispage .thispageholder {
        border-width: 3px;
    }
434

435
436
437
438
439
    .allquestionsononepage .qnbutton.thispage .thispageholder {
        border-width: 1px;
    }

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

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

    .qnbutton.notyetanswered .trafficlight,
    .qnbutton.invalidanswer .trafficlight {
453
        background-color: $card-bg;
454
    }
455

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

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

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

470
471
472
473
    .qnbutton.notanswered .trafficlight,
    .qnbutton.incorrect .trafficlight {
        background-color: $state-danger-text;
    }
474

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

480
481
482
483
484
485
    .qnbutton.complete .trafficlight,
    .qnbutton.answersaved .trafficlight,
    .qnbutton.requiresgrading .trafficlight {
        background-color: $gray-light;
    }
}
486

487
488

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

496
497
498
499
// 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;
500

501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
.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%;
524
}
525

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

// Now styles for the popout sections.

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

536
537
538
539
540
541
542
543
544
545
.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;
546
}
547

548

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

554
555
556
.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
    margin-top: 0;
}
557

558
// Now style the fixed header elements.
559

560
561
562
563
.path-mod-assign [data-region="assignment-info"] {
    overflow-y: hidden;
}

564
565
566
.path-mod-assign [data-region="grading-navigation"] {
    padding: 6px;
}
567

568
569
570
.path-mod-assign [data-region="grade-actions"] {
    padding: 10px;
}
571

572
573
574
.path-mod-assign [data-region="user-info"] .img-rounded {
    margin-top: 0;
}
575

576
577
578
.path-mod-assign [data-region="grading-navigation-panel"] {
    height: 85px;
}
579

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

589
590
591
592
593
594
595
596
597
598
599
.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;
}
600

601
602
603
.assignfeedback_editpdf_widget button {
    box-sizing: border-box;
}
604

605
606
607
.assignfeedback_editpdf_widget .commentcolourbutton img {
    border-width: 0;
}
608

609
610
611
612
613
614
615
616
.assignfeedback_editpdf_widget .label {
    @extend .tag;
    @extend .tag-info;
}

.assignfeedback_editpdf_menu {
    padding: 0;
}
617

618
619
620
621
622
623
624
625
626
627
628
629
630
631
.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;
}
632
633
634
635
636
637
638
639
640
641

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