modules.scss 13 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
.path-mod-feedback .feedback_form .col-form-label {
    display: block !important; /* stylelint-disable-line declaration-no-important */
}
15

16
// Feedback module
17
18
19
.path-mod-feedback .itemactions {
    float: right;
}
20
21
22
23
.path-mod-feedback .itemhandle {
    position: absolute;
    right: 1rem;
}
24

25
26
27
28
29
30
31
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
// 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;
        }
57

58
59
60
        thead .header.lastpost {
            text-align: right;
        }
61

62
        thead .header th,
63
        tbody .discussion td {
64
65
66
67
68
69
            &.discussionsubscription {
                width: 16px;
                padding-left: 0.5em;
                padding-right: 0.5em;
            }
        }
70

71
        .discussion {
72
73
74
            .author,
            .replies,
            .lastpost {
75
76
                white-space: normal;
            }
77

78
79
80
81
            .discussionsubscription,
            .replies {
                text-align: center;
            }
82

83
84
85
86
87
88
89
90
91
92
93
            .topic,
            .discussionsubscription,
            .topic.starter,
            .picture,
            .author,
            .replies,
            .lastpost {
                vertical-align: top;
            }
        }
    }
94
95
96
97
98
99
100
101
102
103
104

    // 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;
    }
105
106
107
108
109
}

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

111
112
113
    .header {
        margin-bottom: 3px;
    }
114

115
116
    .picture img {
        margin: 3px;
117

118
119
120
121
122
        &.userpicture {
            margin-left: 3px;
            margin-right: 10px;
        }
    }
123

124
125
126
127
128
    .content {
        .posting.fullpost {
            margin-top: 8px;
        }
    }
129

130
131
132
133
134
135
    .row {
        .topic,
        .content-mask,
        .options {
            margin-left: 48px;
        }
136

137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
        &.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] {
157
    margin-bottom: 0;
158
159
160
161
162
}

#page-mod-forum-discuss .discussioncontrols {
    width: auto;
    margin: 0;
163
164
165
166

    .form-inline input {
        margin-top: -1px;
    }
167
168
}

169
170
.maincalendar .calendarmonth td,
.maincalendar .calendarmonth th {
171
172
173
174
175
176
177
178
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
    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;
}
211

212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
.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

228
/** General styles (scope: all of lesson) **/
229
230
231
.path-mod-lesson .invisiblefieldset.fieldsetfix {
    display: block;
}
232
233
234
235
236
237
238
239
240
241
242

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

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

243
244
245
246
247
// Dropdown styling.
.dropdown-menu {
    margin-top: 11px;
}

248
249
250
251
// Survey module

.path-mod-survey {
    .surveytable {
252
253
254
255
256
257
258
259
260
261
262
        > 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;
        }
263
    }
264

265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
}

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

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

// Usermenu
.usermenu {
281
282
    float: right;

283
    .login {
284
        line-height: 2.25rem;
285

286
        a {
287
            color: $link-color;
288
289
            &:hover,
            &:focus {
290
                color: $link-hover-color;
291
292
293
294
                text-decoration: underline;
            }
        }
    }
295
}
296

297
.userloggedinas,
298
299
.userswitchedrole,
.loginfailures {
300
    .usermenu {
301
302
303
304
305
306
        .usertext {
            float: left;
            text-align: right;
            margin-right: $spacer / 2;
            height: 35px;
            .meta {
307
                display: block;
308
                font-size: $font-size-sm;
309
            }
310
311
312
        }
        .avatar {
            img {
313
                margin: 0;
314
315
316
317
318
            }
        }
    }
}

319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
.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;
                }
335
            }
336
337
338
            img {
                width: inherit;
                height: inherit;
339
340
            }
        }
341
342
343
344
        .realuser {
            width: 35px;
            height: 35px;
            display: inline-block;
345
346
347
348
        }
    }
}

349
350
351
@include media-breakpoint-down(sm) {
    .usertext {
        display: none;
352
353
354
355
    }
}

// Quiz module
356
357
358
359
360
361
362
363
364
365
366
367
368
.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;
369
    min-height: 12rem;
370
371
372
373
374
375
376
377
378
379
}

#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;
}
380
#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
381
382
383
    width: 90%;
    height: 22px;
}
384
385
386
387
388
389
390
391

// Question navigation block.
.path-mod-quiz #mod_quiz_navblock {
    .qnbutton {
        text-decoration: none;
        font-size: 14px;
        line-height: 20px;
        font-weight: normal;
392
        background-color: $card-bg;
393
394
395
396
397
398
399
400
        background-image: none;
        height: 40px;
        width: 30px;
        border-radius: 3px;
        border: 0;
        overflow: visible;
        margin: 0 6px 6px 0;
    }
401

402
403
404
405
406
    span.qnbutton {
        cursor: default;
        background-color: $input-bg-disabled;
        color: $gray;
    }
407

408
409
410
411
412
413
414
415
416
417
418
    a.qnbutton:hover,
    a.qnbutton:active,
    a.qnbutton:focus {
        text-decoration: underline;
    }

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

420
421
422
    .qnbutton.thispage .thispageholder {
        border-width: 3px;
    }
423

424
425
426
427
428
    .allquestionsononepage .qnbutton.thispage .thispageholder {
        border-width: 1px;
    }

    .qnbutton.flagged .thispageholder {
429
        background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
430
431
432
433
    }

    .qnbutton .trafficlight {
        border: 0;
434
        background: $card-bg none center / 10px no-repeat scroll;
435
436
437
438
439
440
441
        height: 20px;
        margin-top: 20px;
        border-radius: 0 0 3px 3px;
    }

    .qnbutton.notyetanswered .trafficlight,
    .qnbutton.invalidanswer .trafficlight {
442
        background-color: $card-bg;
443
    }
444

445
446
447
    .qnbutton.invalidanswer .trafficlight {
        background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
    }
448

449
450
451
452
    .qnbutton.correct .trafficlight {
        background-image: url([[pix:theme|mod/quiz/checkmark]]);
        background-color: $state-success-text;
    }
453

454
455
456
457
    .qnbutton.blocked .trafficlight {
        background-image: url([[pix:core|t/locked]]);
        background-color: $input-bg-disabled;
    }
458

459
460
461
462
    .qnbutton.notanswered .trafficlight,
    .qnbutton.incorrect .trafficlight {
        background-color: $state-danger-text;
    }
463

464
465
466
467
    .qnbutton.partiallycorrect .trafficlight {
        background-image: url([[pix:theme|mod/quiz/whitecircle]]);
        background-color: $state-warning-text;
    }
468

469
470
471
472
473
474
    .qnbutton.complete .trafficlight,
    .qnbutton.answersaved .trafficlight,
    .qnbutton.requiresgrading .trafficlight {
        background-color: $gray-light;
    }
}
475

476
477

// Assign.
478
479
480
.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
    top: auto;
}
481
482
483
.path-mod-assign .no-overflow {
    overflow: initial;
}
484

485
486
487
488
// 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;
489

490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
.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%;
513
}
514

515
516
517
518
519
520
.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
    width: auto;
}

// Now styles for the popout sections.

521
522
523
.path-mod-assign [data-region="grade-panel"] .popout {
    background-color: $modal-content-bg;
}
524

525
526
527
528
529
530
531
532
533
534
.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;
535
}
536

537

538
539
.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
    @extend .modal-header;
540
    font-size: $popout-header-font-size;
541
}
542

543
544
545
.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
    margin-top: 0;
}
546

547
// Now style the fixed header elements.
548

549
550
551
552
.path-mod-assign [data-region="assignment-info"] {
    overflow-y: hidden;
}

553
554
555
.path-mod-assign [data-region="grading-navigation"] {
    padding: 6px;
}
556

557
558
559
.path-mod-assign [data-region="grade-actions"] {
    padding: 10px;
}
560

561
562
563
.path-mod-assign [data-region="user-info"] .img-rounded {
    margin-top: 0;
}
564

565
566
567
.path-mod-assign [data-region="grading-navigation-panel"] {
    height: 85px;
}
568

569
570
571
572
573
574
575
576
577
@media (max-width: 767px) {
    .path-mod-assign [data-region="grading-navigation-panel"] {
        height: auto;
    }
    .path-mod-assign [data-region="user-info"] {
        margin-top: 1rem;
    }
}

578
579
580
581
582
583
584
585
586
587
588
.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;
}
589

590
591
592
.assignfeedback_editpdf_widget button {
    box-sizing: border-box;
}
593

594
595
596
.assignfeedback_editpdf_widget .commentcolourbutton img {
    border-width: 0;
}
597

598
599
600
601
602
603
604
605
.assignfeedback_editpdf_widget .label {
    @extend .tag;
    @extend .tag-info;
}

.assignfeedback_editpdf_menu {
    padding: 0;
}
606

607
608
609
610
611
612
613
614
615
616
617
618
619
620
.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;
}
621
622
623
624
625
626
627
628
629
630

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