Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
/* core.less */
2
 
3
$bg-inverse-link-color: $white !default;
4
 
5
$dropzone-border: $gray-900 !default;
6
 
7
$collapse-list-item-padding-y: 0.5rem !default;
8
$collapse-list-item-padding-x: 1rem !default;
9
$collapse-list-item-hover-bg: theme-color-level('info', -11) !default;
10
$collapse-list-item-hover-border: theme-color-level('info', -9) !default;
11
 
12
$thin-scroll-bg-thumb: $gray-600 !default;
13
$thin-scroll-bg-hover: $gray-700 !default;
14
 
15
$font-size-xs: ($font-size-base * .75) !default;
16
 
17
#region-main {
18
    overflow-y: visible;
19
    background-color: $body-bg;
20
}
21
 
22
@include media-breakpoint-up(sm) {
23
    .context-header-settings-menu,
24
    .region-main-settings-menu {
25
        float: right;
26
        width: auto;
27
        max-width: 4em;
28
        height: 2em;
29
        display: block;
30
        margin-top: 4px;
31
    }
32
}
33
 
34
@include media-breakpoint-down(sm) {
35
    .context-header-settings-menu,
36
    .region-main-settings-menu {
37
        display: flex;
38
        justify-content: flex-end;
39
    }
40
}
41
 
42
@mixin optional-animation($animation) {
43
    animation: $animation;
44
 
45
    @media (prefers-reduced-motion: reduce) {
46
        animation: none;
47
    }
48
 
49
    body.behat-site & {
50
        animation: none;
51
    }
52
}
53
 
54
.context-header-settings-menu .dropdown-toggle > .icon,
55
#region-main-settings-menu .dropdown-toggle > .icon {
56
    height: 24px;
57
    font-size: 24px;
58
    width: auto;
59
}
60
/** Prevent user notifications overlapping with region main settings menu */
61
#user-notifications {
62
    display: block;
63
    overflow: hidden;
64
}
65
 
66
/** Page layout CSS starts **/
67
.layout-option-noheader #page-header,
68
.layout-option-nonavbar #page-navbar,
69
.layout-option-nofooter #page-footer,
70
.layout-option-nocourseheader .course-content-header,
71
.layout-option-nocoursefooter .course-content-footer {
72
    display: none;
73
}
74
 
75
/** Page layout CSS ends **/
76
 
77
.mdl-left {
78
    text-align: left;
79
}
80
 
81
.mdl-right {
82
    text-align: right;
83
}
84
 
85
/*rtl:ignore*/
86
.text-ltr {
87
    direction: ltr !important; /* stylelint-disable-line declaration-no-important */
88
}
89
 
90
#add,
91
#remove,
92
.centerpara,
93
.mdl-align {
94
    text-align: center;
95
}
96
 
97
a.dimmed,
98
a.dimmed:link,
99
a.dimmed:visited,
100
a.dimmed_text,
101
a.dimmed_text:link,
102
a.dimmed_text:visited,
103
.dimmed_text,
104
.dimmed_text a,
105
.dimmed_text a:link,
106
.dimmed_text a:visited,
107
.usersuspended,
108
.usersuspended a,
109
.usersuspended a:link,
110
.usersuspended a:visited,
111
.dimmed_category,
112
.dimmed_category a {
113
    color: $text-muted;
114
}
115
 
116
// Accessible focus styling for links, add .aalink to links with custom css classes to get
117
// accessible focus styles.
118
.aalink,
119
#page-footer a:not([class]),
120
.arrow_link,
121
a:not([class]),
122
.activityinstance > a {
123
    &.focus,
124
    &:focus {
125
        outline: $btn-focus-width solid transparent;
126
        color: $gray-900;
127
        background-color: lighten($primary, 50%);
128
        box-shadow: 0 -#{$btn-focus-width} lighten($primary, 50%), 0 $btn-focus-width $gray-800;
129
    }
130
    &:focus:hover {
131
        text-decoration: none;
132
    }
133
}
134
 
135
// Accessible focus styling for buttons like elements that do not use the .btn class. Add
136
// .aabtn to you element if you need the same focus styles.
137
.aabtn,
138
.btn-link,
139
.nav-link,
140
.editor_atto_toolbar button,
141
.editor_atto_toolbar .atto_toolbar_row,
142
[role="button"],
143
.list-group-item-action,
144
input[type="checkbox"],
145
input[type="radio"],
146
input[type="file"],
147
input[type="image"],
148
.sr-only-focusable,
149
a.dropdown-toggle,
150
.moodle-dialogue-base .closebutton,
151
button.close,
152
.form-autocomplete-selection,
153
[role="treeitem"]:not([aria-expanded="true"]) {
154
    &.focus,
155
    &:focus {
156
        outline: 0;
157
        box-shadow: $input-btn-focus-box-shadow;
158
    }
159
    &:focus:hover {
160
        text-decoration: none;
161
    }
162
}
163
 
164
// Modal dialogs border should be rounded too.
165
.modal-dialog[tabindex="0"] {
166
    &.focus,
167
    &:focus {
168
        outline: 0;
169
        .modal-content {
170
            outline: 0;
171
            box-shadow: $input-btn-focus-box-shadow;
172
 
173
            // Modal dialogs border should be rounded too.
174
            @include border-radius($modal-content-border-radius);
175
        }
176
    }
177
}
178
 
179
// We don't want to highlight the whole li when it's expanded. Only the first child is highlighted.
180
[role="treeitem"][aria-expanded="true"] {
181
    outline: 0;
182
    &.focus,
183
    &:focus {
184
        > *:first-child {
185
            outline: 0;
186
            box-shadow: $input-btn-focus-box-shadow;
187
        }
188
    }
189
    &:focus:hover {
190
        text-decoration: none;
191
    }
192
}
193
 
194
// Accessible focus styling for autocomplete elements.
195
.form-autocomplete-suggestions li[aria-selected=true] {
196
    outline: 0;
197
    box-shadow: $input-btn-focus-box-shadow;
198
}
199
 
200
// Safari does not allow custom styling of checkboxes.
201
.safari {
202
    input[type="checkbox"],
203
    input[type="radio"] {
204
        &.focus,
205
        &:focus {
206
            outline: auto;
207
        }
208
    }
209
}
210
 
211
.unlist,
212
.unlist li,
213
.inline-list,
214
.inline-list li,
215
.block .list,
216
.block .list li,
217
.section li.movehere,
218
.tabtree li {
219
    list-style: none;
220
    margin: 0;
221
    padding: 0;
222
}
223
 
224
.section li.movehere a {
225
    display: block;
226
    width: 100%;
227
    height: 2rem;
228
    border: 2px dashed $gray-800;
229
}
230
 
231
.editing .course-content .hidden.sectionname {
232
    visibility: hidden;
233
    display: initial;
234
}
235
 
236
.inline,
237
.inline-list li {
238
    display: inline;
239
}
240
 
241
.notifytiny {
242
    font-size: $font-size-xs;
243
}
244
 
245
.notifytiny li,
246
.notifytiny td {
247
    font-size: 100%;
248
}
249
 
250
.red,
251
.notifyproblem {
252
    color: map-get($theme-colors, 'warning');
253
}
254
 
255
.green,
256
.notifysuccess {
257
    color: map-get($theme-colors, 'success');
258
}
259
 
260
.highlight {
261
    color: map-get($theme-colors, 'info');
262
}
263
 
264
.bg-primary-light {
265
    background-color: $primary-light-background;
266
}
267
 
268
.fitem.advanced .text-info {
269
    font-weight: bold;
270
}
271
 
272
.reportlink {
273
    text-align: right;
274
}
275
 
276
a.autolink {
277
    @extend .aalink;
278
    &.glossary:hover {
279
        cursor: help;
280
    }
281
}
282
/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
283
.collapsibleregioncaption {
284
    white-space: nowrap;
285
    min-height: $line-height-base * $font-size-base;
286
}
287
 
288
.pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
289
    cursor: pointer;
290
}
291
 
292
.pagelayout-mydashboard #region-main {
293
    border: 0;
294
    padding: 0;
295
    background-color: transparent;
296
    margin-top: -1px;
297
}
298
 
299
@include media-breakpoint-down(sm) {
300
    .pagelayout-mydashboard,
301
    .pagelayout-login {
302
        #region-main-box {
303
            padding-left: 0;
304
            padding-right: 0;
305
        }
306
    }
307
}
308
 
309
.collapsibleregioncaption img {
310
    vertical-align: middle;
311
}
312
 
313
.jsenabled .hiddenifjs {
314
    display: none;
315
}
316
 
317
body:not(.jsenabled) .visibleifjs {
318
    display: none;
319
}
320
 
321
.jsenabled .collapsibleregion {
322
    overflow: hidden;
323
    box-sizing: content-box;
324
}
325
 
326
.jsenabled .collapsed .collapsibleregioninner {
327
    visibility: hidden;
328
}
329
 
330
.collapsible-actions {
331
    display: none;
332
    text-align: right;
333
}
334
 
335
.jsenabled .collapsible-actions {
336
    display: block;
337
}
338
 
339
.yui-overlay .yui-widget-bd {
340
    background-color: $yui-overlay-bg;
341
    border: 1px solid $yui-overlay-border-color;
342
    border-top-color: $yui-overlay-border-top-color;
343
    color: $yui-overlay-color;
344
    left: 0;
345
    padding: 2px 5px;
346
    position: relative;
347
    top: 0;
348
    z-index: 1;
349
}
350
 
351
.clearer {
352
    background: transparent;
353
    border-width: 0;
354
    clear: both;
355
    display: block;
356
    height: 1px;
357
    margin: 0;
358
    padding: 0;
359
}
360
 
361
.bold,
362
.warning,
363
.errorbox .title,
364
.pagingbar .title,
365
.pagingbar .thispage {
366
    font-weight: bold;
367
}
368
 
369
img.resize {
370
    height: 1em;
371
    width: 1em;
372
}
373
 
374
.block img.resize {
375
    height: 0.9em;
376
    width: 0.8em;
377
}
378
/* Icon styles */
379
img.activityicon {
380
    height: 32px;
381
    width: 32px;
382
    vertical-align: middle;
383
}
384
 
385
.headermain {
386
    font-weight: bold;
387
}
388
 
389
#maincontent {
390
    display: block;
391
    height: 1px;
392
    overflow: clip;
393
}
394
 
395
img.uihint {
396
    cursor: help;
397
}
398
 
399
#addmembersform table {
400
    margin-left: auto;
401
    margin-right: auto;
402
}
403
 
404
table.flexible .emptyrow {
405
    display: none;
406
}
407
 
408
form.popupform,
409
form.popupform div {
410
    display: inline;
411
}
412
 
413
.arrow_button input {
414
    overflow: hidden;
415
}
416
.no-overflow {
417
    overflow: auto;
418
}
419
 
420
// Position required for table sizing inside a flex container.
421
.no-overflow > .generaltable {
422
    margin-bottom: 0;
423
}
424
 
425
.no-overflow,
426
.table-responsive {
427
    .generaltable {
428
        .sr-only,
429
        .accesshide {
430
            position: relative;
431
            display: block;
432
        }
433
    }
434
}
435
 
436
// Accessibility features
437
 
438
// Accessibility: text 'seen' by screen readers but not visual users.
439
.accesshide {
440
    @include sr-only();
441
}
442
 
443
span.hide,
444
div.hide,
445
.hidden {
446
    display: none;
447
}
448
// Accessibility: Skip block link, for keyboard-only users.
449
a.skip-block,
450
a.skip {
451
    position: absolute;
452
    top: -1000em;
453
    font-size: 0.85em;
454
    text-decoration: none;
455
}
456
 
457
a.skip-block:focus,
458
a.skip-block:active,
459
a.skip:focus,
460
a.skip:active {
461
    position: static;
462
    display: block;
463
}
464
 
465
.skip-block-to {
466
    display: block;
467
    height: 1px;
468
    overflow: hidden;
469
}
470
// Blogs
471
.addbloglink {
472
    text-align: center;
473
}
474
 
475
.blog_entry .audience {
476
    text-align: right;
477
    padding-right: 4px;
478
}
479
 
480
.blog_entry .tags {
481
    margin-top: 15px;
482
}
483
 
484
.blog_entry .content {
485
    margin-left: 43px;
486
}
487
// Group
488
 
489
#doc-contents h1 {
490
    margin: 1em 0 0 0;
491
}
492
 
493
#doc-contents ul {
494
    margin: 0;
495
    padding: 0;
496
    width: 90%;
497
}
498
 
499
#doc-contents ul li {
500
    list-style-type: none;
501
}
502
 
503
.groupmanagementtable td {
504
    vertical-align: top;
505
}
506
 
507
.groupmanagementtable #existingcell,
508
.groupmanagementtable #potentialcell {
509
    width: 42%;
510
}
511
 
512
.groupmanagementtable #buttonscell {
513
    width: 16%;
514
}
515
 
516
.groupmanagementtable #buttonscell p.arrow_button input {
517
    width: auto;
518
    min-width: 80%;
519
    margin: 0 auto;
520
    display: block;
521
}
522
 
523
.groupmanagementtable #removeselect_wrapper,
524
.groupmanagementtable #addselect_wrapper {
525
    width: 100%;
526
}
527
 
528
.groupmanagementtable #removeselect_wrapper label,
529
.groupmanagementtable #addselect_wrapper label {
530
    font-weight: normal;
531
}
532
 
533
#group-usersummary {
534
    width: 14em;
535
}
536
 
537
.groupselector {
538
    margin-top: 3px;
539
    margin-bottom: 3px;
540
    display: inline-block;
541
}
542
 
543
.groupselector label {
544
    display: inline-block;
545
}
546
 
547
// Notes
548
.notepost {
549
    margin-bottom: 1em;
550
}
551
 
552
.notepost .userpicture {
553
    float: left;
554
    margin-right: 5px;
555
}
556
 
557
.notepost .content,
558
.notepost .footer {
559
    clear: both;
560
}
561
 
562
.notesgroup {
563
    margin-left: 20px;
564
}
565
 
566
// My Moodle
567
.path-my .coursebox {
568
    margin: $spacer 0;
569
    padding: 0;
570
 
571
    .overview {
572
        margin: 15px 30px 10px 30px;
573
    }
574
}
575
 
576
.path-my .coursebox .info {
577
    float: none;
578
    margin: 0;
579
}
580
 
581
// Modules
582
.mod_introbox {
583
    padding: 10px;
584
}
585
 
586
table.mod_index {
587
    width: 100%;
588
}
589
 
590
// Comments
591
.comment-ctrl {
592
    font-size: 12px;
593
    display: none;
594
    margin: 0;
595
    padding: 0;
596
}
597
 
598
.comment-ctrl h5 {
599
    margin: 0;
600
    padding: 5px;
601
}
602
 
603
.comment-area {
604
    max-width: 400px;
605
    padding: 5px;
606
}
607
 
608
.comment-area textarea {
609
    width: 100%;
610
    overflow: auto;
611
 
612
    &.fullwidth {
613
        -webkit-box-sizing: border-box;
614
        -moz-box-sizing: border-box;
615
        box-sizing: border-box;
616
    }
617
}
618
 
619
.comment-area .fd {
620
    text-align: right;
621
}
622
 
623
.comment-meta span {
624
    color: $comment-meta-color;
625
}
626
 
627
.comment-link img {
628
    vertical-align: text-bottom;
629
}
630
 
631
.comment-list {
632
    font-size: 11px;
633
    overflow: auto;
634
    list-style: none;
635
    padding: 0;
636
    margin: 0;
637
}
638
 
639
.comment-list li {
640
    margin: 2px;
641
    list-style: none;
642
    margin-bottom: 5px;
643
    clear: both;
644
    padding: .3em;
645
    position: relative;
646
}
647
 
648
.comment-list li.first {
649
    display: none;
650
}
651
 
652
.comment-paging {
653
    text-align: center;
654
}
655
 
656
.comment-paging .pageno {
657
    padding: 2px;
658
}
659
 
660
.comment-paging .curpage {
661
    border: 1px solid $comment-paging-current-border-color;
662
}
663
 
664
.comment-message .picture {
665
    float: left;
666
    margin-right: 0.25rem;
667
}
668
 
669
.comment-message .text {
670
    margin: 0;
671
    padding: 0;
672
}
673
 
674
.comment-message .text p {
675
    padding: 0;
676
    margin: 0 18px 0 0;
677
}
678
 
679
.comment-delete {
680
    position: absolute;
681
    top: 0;
682
    right: 0;
683
    margin: .3em;
684
}
685
 
686
.comment-report-selectall {
687
    display: none;
688
}
689
 
690
.comment-link {
691
    display: none;
692
}
693
 
694
.jsenabled .comment-link {
695
    display: block;
696
}
697
 
698
.jsenabled .showcommentsnonjs {
699
    display: none;
700
}
701
 
702
.jsenabled .comment-report-selectall {
703
    display: inline;
704
}
705
/**
706
* Completion progress report
707
*/
708
.completion-expired {
709
    color: map-get($theme-colors, 'warning');
710
}
711
 
712
.completion-expected {
713
    font-size: $font-size-xs;
714
}
715
 
716
.completion-sortchoice,
717
.completion-identifyfield {
718
    font-size: $font-size-xs;
719
    vertical-align: bottom;
720
}
721
 
722
.completion-progresscell {
723
    text-align: right;
724
}
725
 
726
.completion-expired .completion-expected {
727
    font-weight: bold;
728
}
729
 
730
/**
731
* Tags
732
*/
733
 
734
#tag-search-box {
735
    text-align: center;
736
    margin: 10px auto;
737
}
738
 
739
span.flagged-tag,
740
tr.flagged-tag,
741
span.flagged-tag a,
742
tr.flagged-tag a {
743
    color: map-get($theme-colors, 'warning');
744
}
745
 
746
.tag-management-table {
747
    td,
748
    th {
749
        vertical-align: middle;
750
        padding: 4px;
751
    }
752
    .inplaceeditable.inplaceeditingon input {
753
        width: 150px;
754
    }
755
}
756
 
757
.path-admin-tag .addstandardtags {
758
    float: right;
759
    img {
760
        margin: 0 5px;
761
    }
762
}
763
 
764
.path-tag {
765
    .tag-relatedtags {
766
        padding-top: 10px;
767
    }
768
    .tag-management-box {
769
        text-align: right;
770
    }
771
    .tag-index-toc {
772
        padding: 10px;
773
        text-align: center;
774
    }
775
    .tag-index-toc li {
776
        margin-left: 5px;
777
        margin-right: 5px;
778
    }
779
    .tag-management-box li {
780
        margin-left: 5px;
781
        margin-right: 5px;
782
        a {
783
            background-repeat: no-repeat;
784
            background-position: left;
785
            padding-left: 17px;
786
        }
787
        a.edittag {
788
            background-image: url([[pix:moodle|i/settings]]);
789
        }
790
        a.flagasinappropriate {
791
            background-image: url([[pix:moodle|i/flagged]]);
792
        }
793
        a.removefrommyinterests {
794
            background-image: url([[pix:moodle|t/delete]]);
795
        }
796
        a.addtomyinterests {
797
            background-image: url([[pix:moodle|t/add]]);
798
        }
799
    }
800
    .tag-backtoallitems {
801
        text-align: center;
802
    }
803
    .tag-index-items .tagarea {
804
        border: 1px solid $tags-tagarea-border-color;
805
        border-radius: 4px;
806
        padding: 10px;
807
        margin-top: 10px;
808
        h3 {
809
            display: block;
810
            padding: 3px 0 10px 0;
811
            margin: 0;
812
            font-size: 1.1em;
813
            font-weight: bold;
814
            line-height: 20px;
815
            color: $tags-tagarea-title-color;
816
            text-shadow: 0 1px 0 $tags-tagarea-title-text-shadow-color;
817
            text-transform: uppercase;
818
            word-wrap: break-word;
819
            border-bottom: solid 1px $tags-tagarea-title-border-color;
820
            margin-bottom: 10px;
821
        }
822
        .taggeditems {
823
            @include clearfix();
824
        }
825
        .controls {
826
            @include clearfix();
827
            text-align: center;
828
            &.controls-bottom {
829
                margin-top: 5px;
830
            }
831
            .gotopage.nextpage {
832
                float: right;
833
            }
834
            .gotopage.prevpage {
835
                float: left;
836
            }
837
            .exclusivemode {
838
                display: inline-block;
839
            }
840
            .gotopage.prevpage::before {
841
                padding-right: 5px;
842
                padding-left: 5px;
843
                content: "«";
844
            }
845
            .gotopage.nextpage::after {
846
                padding-right: 5px;
847
                padding-left: 5px;
848
                content: "»";
849
            }
850
        }
851
    }
852
}
853
 
854
.tag_feed {
855
    img {
856
        max-height: 35px;
857
        max-width: 35px;
858
    }
859
    .muted a {
860
        color: $text-muted;
861
    }
862
}
863
 
864
.tag_cloud {
865
    text-align: center;
866
    .inline-list li {
867
        padding: 0 0.2em;
868
    }
869
    .tag_overflow {
870
        margin-top: 1em;
871
        font-style: italic;
872
    }
873
    // Generate a series of .s# rule declarations based on the number of tag sizes.
874
    @for $i from 0 through 20 {
875
        .s#{$i} {
876
            font-size: (0.7 + ($i * 0.1)) * 1em;
877
        }
878
    }
879
}
880
 
881
.tag_list {
882
    ul {
883
        display: inline;
884
    }
885
    .tagmorelink {
886
        display: none;
887
    }
888
    &.hideoverlimit {
889
        .overlimit {
890
            display: none;
891
        }
892
        .tagmorelink {
893
            display: inline;
894
        }
895
        .taglesslink {
896
            display: none;
897
        }
898
    }
899
}
900
 
901
/**
902
* Web Service
903
*/
904
#webservice-doc-generator td {
905
    text-align: left;
906
    border: 0 solid $webservice-doc-td-border-color;
907
}
908
 
909
/**
910
* Enrol
911
*/
912
.userenrolment {
913
    width: 100%;
914
    border-collapse: collapse;
915
}
916
 
917
.userenrolment tr {
918
    vertical-align: top;
919
}
920
 
921
.userenrolment td {
922
    padding: 0;
923
    height: 41px;
924
}
925
 
926
.userenrolment .subfield {
927
    margin-right: 5px;
928
}
929
 
930
.userenrolment .col_userdetails .subfield {
931
    margin-left: 40px;
932
}
933
 
934
.userenrolment .col_userdetails .subfield_picture {
935
    float: left;
936
    margin-left: 0;
937
}
938
 
939
.userenrolment .col_lastseen {
940
    width: 150px;
941
}
942
 
943
.userenrolment .col_role {
944
    width: 262px;
945
}
946
 
947
.userenrolment .col_role .roles,
948
.userenrolment .col_group .groups {
949
    margin-right: 30px;
950
}
951
 
952
.userenrolment .col_role .role {
953
    float: left;
954
    padding: 0 3px 3px;
955
    margin: 0 3px 3px;
956
    white-space: nowrap;
957
}
958
 
959
.userenrolment .col_group .group {
960
    float: left;
961
    padding: 3px;
962
    margin: 3px;
963
    white-space: nowrap;
964
}
965
 
966
.userenrolment .col_role .role a,
967
.userenrolment .col_group .group a {
968
    margin-left: 3px;
969
    cursor: pointer;
970
}
971
 
972
.userenrolment .col_role .addrole,
973
.userenrolment .col_group .addgroup {
974
    float: right;
975
    padding: 3px;
976
    margin: 3px;
977
 
978
    > a:hover {
979
        border-bottom: 1px solid $userenrolment-link-hover-border-color;
980
    }
981
}
982
 
983
.userenrolment .col_role .addrole img,
984
.userenrolment .col_group .addgroup img {
985
    vertical-align: baseline;
986
}
987
 
988
.userenrolment .hasAllRoles .col_role .addrole {
989
    display: none;
990
}
991
 
992
.userenrolment .col_enrol .enrolment {
993
    float: left;
994
    padding: 0 3px 3px;
995
    margin: 0 3px 3px;
996
}
997
 
998
.userenrolment .col_enrol .enrolment a {
999
    float: right;
1000
    margin-left: 3px;
1001
}
1002
 
1003
#page-enrol-otherusers .userenrolment .col_role {
1004
    .role {
1005
        float: none;
1006
        margin: 3px 3px 3px 0;
1007
        padding: 3px 3px 3px 0;
1008
    }
1009
}
1010
 
1011
.corelightbox {
1012
    background-color: $corelightbox-bg;
1013
    position: absolute;
1014
    top: 0;
1015
    left: 0;
1016
    width: 100%;
1017
    height: 100%;
1018
    text-align: center;
1019
}
1020
 
1021
.corelightbox img {
1022
    position: fixed;
1023
    top: 50%;
1024
    left: 50%;
1025
}
1026
 
1027
.mod-indent-outer {
1028
    display: table;
1029
}
1030
 
1031
.mod-indent {
1032
    display: table-cell;
1033
}
1034
 
1035
.label .mod-indent {
1036
    float: left;
1037
    padding-top: 20px;
1038
}
1039
 
1040
.activity.label.modtype_label .mod-indent {
1041
    float: none;
1042
}
1043
 
1044
@include media-breakpoint-up(sm) {
1045
    $mod-indent-size: 30px;
1046
    /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
1047
 
1048
    @for $i from 1 through 16 {
1049
        $width: ($i * $mod-indent-size);
1050
 
1051
        .mod-indent-#{$i} {
1052
            width: $width;
1053
        }
1054
    }
1055
 
1056
    .mod-indent-huge {
1057
        width: (16 * $mod-indent-size);
1058
    }
1059
}
1060
 
1061
/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1062
.resourcecontent .mediaplugin_mp3 object {
1063
    height: 25px;
1064
    width: 600px;
1065
}
1066
 
1067
.resourcecontent audio.mediaplugin_html5audio {
1068
    width: 600px;
1069
}
1070
/** Large resource images should avoid hidden overflow **/
1071
.resourceimage {
1072
    max-width: 100%;
1073
}
1074
/* Audio player size in 'inline' mode (can only change width, as above) */
1075
.mediaplugin_mp3 object {
1076
    height: 15px;
1077
    width: 300px;
1078
}
1079
 
1080
audio.mediaplugin_html5audio {
1081
    width: 300px;
1082
}
1083
 
1084
.core_media_preview.pagelayout-embedded #maincontent {
1085
    height: 0;
1086
}
1087
 
1088
.path-rating .ratingtable {
1089
    width: 100%;
1090
    margin-bottom: 1em;
1091
}
1092
 
1093
.path-rating .ratingtable th.rating {
1094
    width: 100%;
1095
}
1096
 
1097
.path-rating .ratingtable td.rating,
1098
.path-rating .ratingtable td.time {
1099
    white-space: nowrap;
1100
    text-align: center;
1101
}
1102
 
1103
/* Moodle Dialogue Settings (moodle-core-dialogue)  */
1104
.moodle-dialogue-base .moodle-dialogue-lightbox {
1105
    background-color: $gray-700;
1106
}
1107
 
1108
// Prevent adding backdrops to popups in popups.
1109
.pagelayout-popup {
1110
    .moodle-dialogue-base {
1111
        .moodle-dialogue-lightbox {
1112
            background-color: transparent;
1113
        }
1114
        .moodle-dialogue {
1115
            box-shadow: $popover-box-shadow;
1116
        }
1117
    }
1118
}
1119
 
1120
.moodle-dialogue-base .hidden,
1121
.moodle-dialogue-base .moodle-dialogue-hidden {
1122
    display: none;
1123
}
1124
 
1125
.no-scrolling {
1126
    overflow: hidden;
1127
}
1128
 
1129
.moodle-dialogue-base .moodle-dialogue-fullscreen {
1130
    left: 0;
1131
    top: 0;
1132
    right: 0;
1133
    bottom: -50px;
1134
    position: fixed;
1135
}
1136
 
1137
.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1138
    overflow: auto;
1139
}
1140
 
1141
.moodle-dialogue-base .moodle-dialogue-wrap {
1142
    background-color: $dialogue-base-bg;
1143
    border: 1px solid $dialogue-base-border-color;
1144
}
1145
 
1146
// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1147
// it for a reason (conflicts with jquery .show()).
1148
.modal.show {
1149
    display: block;
1150
}
1151
 
1152
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1153
    display: flex;
1154
    padding: 1rem 1rem;
1155
    border-bottom: 1px solid $dialogue-base-hd-border-color;
1156
}
1157
 
1158
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
1159
    // Undo some YUI damage.
1160
    min-height: 3rem;
1161
    color: initial;
1162
    background: initial;
1163
    font-size: 1.5rem;
1164
    line-height: 1.5;
1165
}
1166
 
1167
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h5 {
1168
    font-size: 1.5rem;
1169
    font-weight: $font-weight-base;
1170
    margin-bottom: 0;
1171
    line-height: 1.5;
1172
}
1173
 
1174
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
1175
    /*rtl:raw:
1176
        left: 0;
1177
        right: auto;
1178
    */
1179
    padding: 0;
1180
    position: relative;
1181
    margin-left: auto;
1182
}
1183
 
1184
.moodle-dialogue-base .closebutton {
1185
    padding: $modal-header-padding;
1186
    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1187
    position: relative;
1188
    background-color: transparent;
1189
    border: 0;
1190
    background-image: none;
1191
    box-shadow: none;
1192
    opacity: 0.7;
1193
    &:hover,
1194
    &:active {
1195
        opacity: 1;
1196
    }
1197
    &::after {
1198
        content: "×";
1199
    }
1200
}
1201
 
1202
.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
1203
    padding: 0.5rem;
1204
    body {
1205
        background-color: $body-bg;
1206
    }
1207
}
1208
 
1209
.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1210
    overflow: auto;
1211
    position: absolute;
1212
    top: 0;
1213
    bottom: 50px;
1214
    left: 0;
1215
    right: 0;
1216
    margin: 0;
1217
    border: 0;
1218
}
1219
 
1220
.moodle-dialogue-exception .moodle-exception-param label {
1221
    font-weight: bold;
1222
}
1223
 
1224
.moodle-dialogue-exception .param-stacktrace label {
1225
    background-color: $dialogue-exception-label-bg;
1226
    border: 1px solid $dialogue-exception-label-border-color;
1227
    border-bottom-width: 0;
1228
}
1229
 
1230
.moodle-dialogue-exception .param-stacktrace pre {
1231
    border: 1px solid $dialogue-exception-pre-border-color;
1232
    background-color: $dialogue-exception-pre-bg;
1233
}
1234
 
1235
.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1236
    color: $dialogue-exception-file-color;
1237
    font-size: $font-size-sm;
1238
}
1239
 
1240
.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1241
    color: map-get($theme-colors, 'warning');
1242
    font-size: $font-size-sm;
1243
}
1244
 
1245
.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1246
    color: $dialogue-exception-call-color;
1247
    font-size: 90%;
1248
    border-bottom: 1px solid $dialogue-exception-call-border-color;
1249
}
1250
 
1251
.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1252
    display: none;
1253
}
1254
 
1255
.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1256
    // Undo some YUI damage.
1257
    background: initial;
1258
}
1259
 
1260
.moodle-dialogue-confirm .confirmation-message {
1261
    margin: 0.5rem 0;
1262
}
1263
 
1264
.moodle-dialogue-confirm .confirmation-dialogue input {
1265
    min-width: 80px;
1266
}
1267
 
1268
.moodle-dialogue-exception .moodle-exception-message {
1269
    margin: 1em;
1270
}
1271
 
1272
.moodle-dialogue-exception .moodle-exception-param {
1273
    margin-bottom: 0.5em;
1274
}
1275
 
1276
.moodle-dialogue-exception .moodle-exception-param label {
1277
    width: 150px;
1278
}
1279
 
1280
.moodle-dialogue-exception .param-stacktrace label {
1281
    display: block;
1282
    margin: 0;
1283
    padding: 4px 1em;
1284
}
1285
 
1286
.moodle-dialogue-exception .param-stacktrace pre {
1287
    display: block;
1288
    height: 200px;
1289
    overflow: auto;
1290
}
1291
 
1292
.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1293
    display: inline-block;
1294
    margin: 4px 0;
1295
}
1296
 
1297
.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1298
    display: inline-block;
1299
    width: 50px;
1300
    margin: 4px 1em;
1301
}
1302
 
1303
.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1304
    padding-left: 25px;
1305
    margin-bottom: 4px;
1306
    padding-bottom: 4px;
1307
}
1308
 
1309
.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1310
    opacity: 0.75;
1311
    width: 100%;
1312
    height: 100%;
1313
    top: 0;
1314
    left: 0;
1315
    background-color: $dialogue-lightbox-bg;
1316
    text-align: center;
1317
    padding: 10% 0;
1318
}
1319
/* Apply a default max-height on tooltip text */
1320
.moodle-dialogue .tooltiptext {
1321
    max-height: 300px;
1322
}
1323
 
1324
.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1325
    z-index: 3001;
1326
 
1327
    .moodle-dialogue-bd {
1328
        overflow: auto;
1329
    }
1330
}
1331
 
1332
/**
1333
 * Chooser Dialogues (moodle-core-chooserdialogue)
1334
 *
1335
 * This CSS belong to the chooser dialogue which should work both with, and
1336
 * without javascript enabled
1337
 */
1338
/* Hide the dialog and it's title */
1339
.chooserdialoguebody,
1340
.choosertitle {
1341
    display: none;
1342
}
1343
 
1344
.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1345
    margin: 0;
1346
}
1347
 
1348
.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1349
    padding: 0;
1350
    background: $chooserdialogue-bg;
1351
 
1352
    @include border-bottom-radius(10px);
1353
}
1354
/* Center the submit buttons within the area */
1355
.choosercontainer #chooseform .submitbuttons {
1356
    padding: 0.7em 0;
1357
    text-align: right;
1358
}
1359
/* Fixed for safari browser on iPhone4S with ios7@mixin */
1360
 
1361
@media (max-height: 639px) {
1362
    .ios .choosercontainer #chooseform .submitbuttons {
1363
        padding: 45px 0;
1364
    }
1365
}
1366
 
1367
.choosercontainer #chooseform .submitbuttons input {
1368
    min-width: 100px;
1369
    margin: 0 0.5em;
1370
}
1371
/* Various settings for the options area */
1372
.choosercontainer #chooseform .options {
1373
    position: relative;
1374
    border-bottom: 1px solid $chooserdialogue-options-border-color;
1375
}
1376
/* Only set these options if we're showing the js container */
1377
.jschooser .choosercontainer #chooseform .alloptions {
1378
    overflow-x: hidden;
1379
    overflow-y: auto;
1380
    max-width: 240px;
1381
 
1382
    .option {
1383
        input[type=radio] {
1384
            display: inline-block;
1385
        }
1386
 
1387
        .typename {
1388
            display: inline-block;
1389
            width: 55%;
1390
        }
1391
    }
1392
}
1393
/* Settings for option rows and option subtypes */
1394
.choosercontainer #chooseform .moduletypetitle,
1395
.choosercontainer #chooseform .option,
1396
.choosercontainer #chooseform .nonoption {
1397
    margin-bottom: 0;
1398
    padding: 0 1.6em 0 1.6em;
1399
}
1400
 
1401
.choosercontainer #chooseform .moduletypetitle {
1402
    text-transform: uppercase;
1403
    padding-top: 1.2em;
1404
    padding-bottom: 0.4em;
1405
    margin-bottom: 0.5rem;
1406
    font-size: 100%;
1407
}
1408
 
1409
.choosercontainer #chooseform .option .typename,
1410
.choosercontainer #chooseform .nonoption .typename {
1411
    padding: 0 0 0 0.5em;
1412
}
1413
 
1414
.choosercontainer #chooseform .modicon + .typename {
1415
    padding-left: 0;
1416
}
1417
 
1418
.choosercontainer #chooseform .option input[type=radio],
1419
.choosercontainer #chooseform .option span.typename {
1420
    vertical-align: middle;
1421
}
1422
 
1423
.choosercontainer #chooseform .option label {
1424
    display: block;
1425
    margin: 0;
1426
    padding: ($spacer * 0.5) 0;
1427
    border-bottom: 1px solid $choosercontainer-label-border-color;
1428
}
1429
 
1430
.choosercontainer #chooseform .option .icon {
1431
    margin: 0;
1432
    padding: 0 $spacer;
1433
}
1434
 
1435
.choosercontainer #chooseform .nonoption {
1436
    padding-left: 2.7em;
1437
    padding-top: 0.3em;
1438
    padding-bottom: 0.1em;
1439
}
1440
 
1441
.choosercontainer #chooseform .subtype {
1442
    margin-bottom: 0;
1443
    padding: 0 1.6em 0 3.2em;
1444
}
1445
 
1446
.choosercontainer #chooseform .subtype .typename {
1447
    margin: 0 0 0 0.2em;
1448
}
1449
/* The instruction/help area */
1450
.jschooser .choosercontainer #chooseform .instruction,
1451
.jschooser .choosercontainer #chooseform .typesummary {
1452
    display: none;
1453
    position: absolute;
1454
    top: 0;
1455
    right: 0;
1456
    bottom: 0;
1457
    left: 240px;
1458
    margin: 0;
1459
    padding: 1.6em;
1460
    background-color: $choosercontainer-instruction-bg;
1461
    overflow-x: hidden;
1462
    overflow-y: auto;
1463
    line-height: 2em;
1464
}
1465
/* Selected option settings */
1466
.jschooser .choosercontainer #chooseform .instruction,
1467
.choosercontainer #chooseform .selected .typesummary {
1468
    display: block;
1469
}
1470
 
1471
.choosercontainer #chooseform .selected {
1472
    background-color: $choosercontainer-chooseform-selected-bg;
1473
    margin-top: -1px;
1474
    padding-top: 1px;
1475
}
1476
 
1477
 
1478
@include media-breakpoint-down(xs) {
1479
    .jsenabled .choosercontainer #chooseform .alloptions {
1480
        max-width: 100%;
1481
    }
1482
 
1483
    .jsenabled .choosercontainer #chooseform .instruction,
1484
    .jsenabled .choosercontainer #chooseform .typesummary {
1485
        position: static;
1486
    }
1487
}
1488
 
1489
/**
1490
 * Module chooser dialogue (moodle-core-chooserdialogue)
1491
 *
1492
 * This CSS belong to the chooser dialogue which should work both with, and
1493
 * without javascript enabled
1494
 */
1495
.modchooser .modal-body {
1496
    padding: 0;
1497
    overflow-y: auto;
1498
    min-height: 640px;
1499
    display: flex;
1500
    flex-direction: column;
1501
 
1502
    .searchresultitemscontainer-wrapper {
1503
        min-height: 495px;
1504
    }
1505
 
1506
    .carousel-item.active {
1507
        display: flex;
1508
    }
1509
    .chooser-container {
1510
        display: flex;
1511
        flex-direction: column;
1512
        flex: 1 1 auto;
1513
    }
1514
 
1515
    .loading-icon {
1516
        opacity: 1;
1517
        .icon {
1518
            display: block;
1519
            font-size: 3em;
1520
            max-height: 3em;
1521
            max-width: 3em;
1522
        }
1523
    }
1524
    .carousel-item .loading-icon .icon {
1525
        margin: 1em auto;
1526
    }
1527
    .searchbar {
1528
        width: 100%;
1529
    }
1530
}
1531
 
1532
.modchooser .modal-footer {
1533
    height: 70px;
1534
    background: $modal-content-bg;
1535
    .moodlenet-logo {
1536
        .icon {
1537
            height: 2.5rem;
1538
            width: 6rem;
1539
            max-height: 2.5rem;
1540
            max-width: 6rem;
1541
            margin-bottom: .6rem;
1542
        }
1543
    }
1544
}
1545
 
1546
.modchoosercontainer.noscroll {
1547
    overflow-y: hidden;
1548
}
1549
 
1550
.modchoosercontainer .optionscontainer,
1551
.modchoosercontainer .searchresultitemscontainer {
1552
    overflow-x: hidden;
1553
    .option {
1554
        // 2 items per line.
1555
        flex-basis: calc(50% - 0.5rem);
1556
        .optionactions {
1557
            .optionaction {
1558
                cursor: pointer;
1559
                color: $gray-600;
1560
                i {
1561
                    margin: 0;
1562
                }
1563
            }
1564
        }
1565
        .optioninfo {
1566
            a {
1567
                color: $gray-700;
1568
                &:hover {
1569
                    text-decoration: none;
1570
                }
1571
            }
1572
        }
1573
    }
1574
}
1575
 
1576
.modchooser .modal-body .optionsummary {
1577
    background-color: $white;
1578
    overflow-x: hidden;
1579
    overflow-y: auto;
1580
    height: 640px;
1581
 
1582
    .content {
1583
        overflow-y: auto;
1584
        .heading {
1585
            .icon {
1586
                height: 32px;
1587
                width: 32px;
1588
                font-size: 32px;
1589
                padding: 0;
1590
            }
1591
        }
1592
    }
1593
 
1594
    .actions {
1595
        border-top: 1px solid $gray-300;
1596
        background: $white;
1597
    }
1598
}
1599
 
1600
@include media-breakpoint-down(xs) {
1601
    .path-course-view .modal-dialog.modal-lg,
1602
    .path-course-view .modal-content,
1603
    .modchooser .modal-body,
1604
    .modchooser .modal-body .carousel,
1605
    .modchooser .modal-body .carousel-inner,
1606
    .modchooser .modal-body .carousel-item,
1607
    .modchooser .modal-body .optionsummary,
1608
    .modchoosercontainer,
1609
    .optionscontainer,
1610
    .searchresultitemscontainer {
1611
        min-height: auto;
1612
        height: 100%;
1613
        overflow-y: auto;
1614
    }
1615
    .path-course-view .modal-dialog.modal-lg {
1616
        margin: 0;
1617
    }
1618
    .modchooser .modal-body .searchresultitemscontainer-wrapper {
1619
        min-height: auto;
1620
    }
1621
}
1622
 
1623
@include media-breakpoint-up(sm) {
1624
    .modchoosercontainer .optionscontainer .option,
1625
    .modchoosercontainer .searchresultitemscontainer .option {
1626
        // Three items per line.
1627
        flex-basis: calc(33.33% - 0.5rem);
1628
    }
1629
}
1630
 
1631
@include media-breakpoint-up(lg) {
1632
    .modchoosercontainer .optionscontainer .option,
1633
    .modchoosercontainer .searchresultitemscontainer .option {
1634
        // Six items per line.
1635
        flex-basis: calc(16.66% - 0.5rem);
1636
    }
1637
}
1638
 
1639
/* Form element: listing */
1640
.formlistingradio {
1641
    padding-bottom: 25px;
1642
    padding-right: 10px;
1643
}
1644
 
1645
.formlistinginputradio {
1646
    float: left;
1647
}
1648
 
1649
.formlistingmain {
1650
    min-height: 225px;
1651
}
1652
 
1653
.formlisting {
1654
    position: relative;
1655
    margin: 15px 0;
1656
    padding: 1px 19px 14px;
1657
    background-color: $formlisting-bg;
1658
    border: 1px solid $formlisting-border-color;
1659
 
1660
    @include border-radius(4px);
1661
}
1662
 
1663
.formlistingmore {
1664
    position: absolute;
1665
    cursor: pointer;
1666
    bottom: -1px;
1667
    right: -1px;
1668
    padding: 3px 7px;
1669
    font-size: 12px;
1670
    font-weight: bold;
1671
    background-color: $formlistingmore-bg;
1672
    border: 1px solid $formlistingmore-border-color;
1673
    color: $formlistingmore-color;
1674
 
1675
    @include border-radius(4px 0 4px 0);
1676
}
1677
 
1678
.formlistingall {
1679
    margin: 15px 0;
1680
    padding: 0;
1681
 
1682
    @include border-radius(4px);
1683
}
1684
 
1685
.formlistingrow {
1686
    cursor: pointer;
1687
    border-bottom: 1px solid;
1688
    border-color: $formlistingrow-border-color;
1689
    border-left: 1px solid $formlistingrow-border-color;
1690
    border-right: 1px solid $formlistingrow-border-color;
1691
    background-color: $formlistingrow-bg;
1692
 
1693
    @include border-radius(0 0 4px 4px);
1694
    padding: 6px;
1695
    top: 50%;
1696
    left: 50%;
1697
    min-height: 34px;
1698
    float: left;
1699
    width: 150px;
1700
}
1701
 
1702
body.jsenabled .formlistingradio {
1703
    display: none;
1704
}
1705
 
1706
body.jsenabled .formlisting {
1707
    display: block;
1708
}
1709
 
1710
a.criteria-action {
1711
    padding: 0 3px;
1712
    float: right;
1713
}
1714
 
1715
div.criteria-description {
1716
    padding: 10px 15px;
1717
    margin: 5px 0;
1718
    background: none repeat scroll 0 0 $criteria-desc-bg;
1719
    border: 1px solid $criteria-desc-border-color;
1720
}
1721
 
1722
ul.badges {
1723
    margin: 0;
1724
    list-style: none;
1725
}
1726
 
1727
.badges li {
1728
    position: relative;
1729
    display: inline-block;
1730
    padding-top: 1em;
1731
    text-align: center;
1732
    vertical-align: top;
1733
    width: 150px;
1734
}
1735
 
1736
.badges li .badge-name {
1737
    display: block;
1738
    padding: 5px;
1739
}
1740
 
1741
.badges li > img {
1742
    position: absolute;
1743
}
1744
 
1745
.badges li .badge-image {
1746
    width: 100px;
1747
    height: 100px;
1748
    left: 10px;
1749
    top: 0;
1750
    z-index: 1;
1751
}
1752
 
1753
.badges li .badge-actions {
1754
    position: relative;
1755
}
1756
 
1757
.badges li .expireimage {
1758
    background-image: url([[pix:i/expired]]);
1759
    background-repeat: no-repeat;
1760
    background-size: 100px 100px;
1761
    width: 100px;
1762
    height: 100px;
1763
    left: 25px;
1764
    top: 15px;
1765
    position: absolute;
1766
    z-index: 10;
1767
    opacity: 0.85;
1768
}
1769
 
1770
#badge-image {
1771
    background-color: transparent;
1772
    padding: 0;
1773
    position: relative;
1774
    min-width: 100px;
1775
    width: 20%;
1776
    display: inline-block;
1777
    vertical-align: top;
1778
    margin-top: 17px;
1779
    margin-bottom: 20px;
1780
 
1781
    .expireimage {
1782
        background-image: url([[pix:i/expired]]);
1783
        background-repeat: no-repeat;
1784
        background-size: 100px 100px;
1785
        width: 100px;
1786
        height: 100px;
1787
        left: 0;
1788
        top: 0;
1789
        opacity: 0.85;
1790
        position: absolute;
1791
        z-index: 10;
1792
    }
1793
 
1794
    .singlebutton {
1795
        padding-top: 5px;
1796
        display: block;
1797
 
1798
        button {
1799
            margin-left: 4px;
1800
        }
1801
    }
1802
}
1803
 
1804
#badge-details {
1805
    display: inline-block;
1806
    width: 79%;
1807
}
1808
 
1809
#badge-overview dl,
1810
#badge-details dl {
1811
    margin: 0;
1812
 
1813
    dt,
1814
    dd {
1815
        vertical-align: top;
1816
        padding: 3px 0;
1817
    }
1818
 
1819
    dt {
1820
        clear: both;
1821
        display: inline-block;
1822
        width: 20%;
1823
        min-width: 100px;
1824
    }
1825
 
1826
    dd {
1827
        display: inline-block;
1828
        width: 79%;
1829
        margin-left: 1%;
1830
    }
1831
}
1832
 
1833
#badge-criteria li li {
1834
    list-style-type: none;
1835
}
1836
 
1837
#badge-image-col {
1838
    flex: 0 0 400px;
1839
}
1840
 
1841
.badge-profile {
1842
    vertical-align: top;
1843
}
1844
 
1845
.connected {
1846
    color: map-get($theme-colors, 'success');
1847
}
1848
 
1849
.notconnected {
1850
    color: map-get($theme-colors, 'danger');
1851
}
1852
 
1853
.connecting {
1854
    color: map-get($theme-colors, 'warning');
1855
}
1856
 
1857
#page-badges-award .recipienttable tr td {
1858
    vertical-align: top;
1859
}
1860
 
1861
#page-badges-award .recipienttable tr td.actions .actionbutton {
1862
    margin: 0.3em 0;
1863
    padding: 0.5em 0;
1864
    width: 100%;
1865
}
1866
 
1867
#page-badges-award .recipienttable tr td.existing,
1868
#page-badges-award .recipienttable tr td.potential {
1869
    width: 42%;
1870
}
1871
 
1872
#issued-badge-table .activatebadge {
1873
    display: inline-block;
1874
}
1875
 
1876
.statusbox.active {
1877
    background-color: $state-success-bg;
1878
}
1879
 
1880
.statusbox.inactive {
1881
    background-color: $state-warning-bg;
1882
}
1883
 
1884
.statusbox {
1885
    text-align: center;
1886
    margin-bottom: 5px;
1887
    padding: 5px;
1888
}
1889
 
1890
.statusbox .activatebadge {
1891
    display: inline-block;
1892
}
1893
 
1894
.statusbox .activatebadge input[type=submit] {
1895
    margin: 3px;
1896
}
1897
 
1898
.activatebadge {
1899
    margin: 0;
1900
    text-align: left;
1901
    vertical-align: middle;
1902
}
1903
 
1904
img#persona_signin {
1905
    cursor: pointer;
1906
}
1907
 
1908
.addcourse {
1909
    float: right;
1910
}
1911
 
1912
.invisiblefieldset {
1913
    display: inline;
1914
    padding: 0;
1915
    border-width: 0;
1916
}
1917
 
1918
/** Page header */
1919
#page-header {
1920
    h1.h2 {
1921
        font-weight: bold;
1922
    }
1923
    .logo {
1924
        margin: $spacer 0;
1925
        img {
1926
            max-height: 75px;
1927
        }
1928
    }
1929
}
1930
 
1931
/** Navbar logo. */
1932
nav.navbar .logo img {
1933
    max-height: 35px;
1934
}
1935
 
1936
.nav.usernav {
1937
    .nav-item {
1938
        display: flex;
1939
    }
1940
    .usermenu .dropdown-toggle {
1941
        padding: 0 0.5rem;
1942
    }
1943
}
1944
 
1945
/** Header-bar styles **/
1946
.page-context-header {
1947
    // We need to be explicit about the height of the header.
1948
    $pageHeaderHeight: 140px;
1949
 
1950
    // Do not remove these rules.
1951
    overflow: hidden;
1952
    padding: 0.25rem 0;
1953
 
1954
    .page-header-image {
1955
        & > a {
1956
            display: inline-block;
1957
        }
1958
        .userinitials,
1959
        .userpicture {
1960
            margin-right: map-get($spacers, 3);
1961
        }
1962
    }
1963
}
1964
 
1965
ul.dragdrop-keyboard-drag li {
1966
    list-style-type: none;
1967
}
1968
 
1969
a.disabled:hover,
1970
a.disabled {
1971
    text-decoration: none;
1972
    cursor: default;
1973
    font-style: italic;
1974
    color: $text-muted;
1975
}
1976
 
11 efrain 1977
a.btn.disabled {
1978
    opacity: 1;
1979
}
1980
 
1 efrain 1981
body.lockscroll {
1982
    height: 100%;
1983
    overflow: hidden;
1984
}
1985
 
1986
.progressbar_container {
1987
    max-width: 500px;
1988
    margin: 0 auto;
1989
}
1990
 
1991
/* IE10 only fix for calendar titling */
1992
.ie10 .yui3-calendar-header-label {
1993
    display: inline-block;
1994
}
1995
 
1996
dd:before,
1997
dd:after {
1998
    display: block;
1999
    content: " ";
2000
}
2001
 
2002
dd:after {
2003
    clear: both;
2004
}
2005
 
2006
// Active tabs with links should have a different
2007
// cursor to indicate they are clickable.
2008
.nav-tabs > .active > a[href],
2009
.nav-tabs > .active > a[href]:hover,
2010
.nav-tabs > .active > a[href]:focus {
2011
    cursor: pointer;
2012
}
2013
 
2014
.inplaceeditable {
2015
    &.inplaceeditingon {
2016
        position: relative;
2017
 
2018
        .editinstructions {
2019
            margin-top: -30px;
2020
            font-weight: normal;
2021
            margin-right: 0;
2022
            margin-left: 0;
2023
            left: 0;
2024
            right: auto;
2025
            white-space: nowrap;
2026
        }
2027
        @include media-breakpoint-up(sm) {
2028
            input {
2029
                width: 330px;
2030
                vertical-align: text-bottom;
2031
                margin-bottom: 0;
2032
                &[role="combobox"] {
2033
                    width: auto;
2034
                }
2035
            }
2036
        }
2037
 
2038
        select {
2039
            margin-bottom: 0;
2040
        }
2041
    }
2042
 
2043
    .quickediticon img {
2044
        opacity: 0.2;
2045
    }
2046
 
2047
    .quickeditlink {
2048
        color: inherit;
2049
        text-decoration: inherit;
2050
    }
2051
 
2052
    &:hover .quickeditlink .quickediticon img,
2053
    .quickeditlink:focus .quickediticon img {
2054
        opacity: 1;
2055
    }
2056
 
2057
    &.inplaceeditable-toggle .quickediticon {
2058
        display: none;
2059
    }
2060
 
2061
    &.inplaceeditable-autocomplete {
2062
        display: block;
2063
    }
2064
}
2065
 
2066
h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2067
    margin-top: -20px;
2068
}
2069
 
2070
/** Chart area. */
2071
.chart-area {
2072
    @include media-breakpoint-up(lg) {
2073
        .chart-image {
2074
            position: relative;
2075
            margin: auto;
2076
            height: 48vh;
2077
            width: 46vw;
2078
        }
2079
    }
2080
 
2081
    .chart-table-data {
2082
        display: none;
2083
    }
2084
 
2085
    .chart-table {
2086
        .chart-output-htmltable caption {
2087
            white-space: nowrap;
2088
        }
2089
        /** When accessible, we display the table only. */
2090
        &.accesshide {
2091
            .chart-table-expand {
2092
                display: none;
2093
            }
2094
            .chart-table-data {
2095
                display: block;
2096
            }
2097
        }
2098
    }
2099
}
2100
 
2101
/* YUI 2 Tree View */
2102
/*rtl:raw:
2103
.ygtvtn,
2104
.ygtvtm,
2105
.ygtvtmh,
2106
.ygtvtmhh,
2107
.ygtvtp,
2108
.ygtvtph,
2109
.ygtvtphh,
2110
.ygtvln,
2111
.ygtvlm,
2112
.ygtvlmh,
2113
.ygtvlmhh,
2114
.ygtvlp,
2115
.ygtvlph,
2116
.ygtvlphh,
2117
.ygtvdepthcell,
2118
.ygtvok,
2119
.ygtvok:hover,
2120
.ygtvcancel,
2121
.ygtvcancel:hover {
2122
    background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2123
}
2124
*/
2125
 
2126
.hover-tooltip-container {
2127
    position: relative;
2128
 
2129
    .hover-tooltip {
2130
        opacity: 0;
2131
        visibility: hidden;
2132
        position: absolute;
2133
        /*rtl:ignore*/
2134
        left: 50%;
2135
        top: calc(-50% - 5px);
2136
        transform: translate(-50%, -50%);
2137
        background-color: $hover-tooltip-bg;
2138
        border: 1px solid $hover-tooltip-border-color;
2139
        border-radius: .3rem;
2140
        box-sizing: border-box;
2141
        padding: 5px;
2142
        white-space: nowrap;
2143
        transition: opacity 0.15s, visibility 0.15s;
2144
        z-index: 1000;
2145
 
2146
        &:before {
2147
            content: '';
2148
            display: inline-block;
2149
            border-left: 8px solid transparent;
2150
            border-right: 8px solid transparent;
2151
            border-top: 8px solid $hover-tooltip-border-color;
2152
            position: absolute;
2153
            bottom: -8px;
2154
            left: calc(50% - 8px);
2155
        }
2156
 
2157
        &:after {
2158
            content: '';
2159
            display: inline-block;
2160
            border-left: 7px solid transparent;
2161
            border-right: 7px solid transparent;
2162
            border-top: 7px solid $hover-tooltip-border-top-color;
2163
            position: absolute;
2164
            bottom: -6px;
2165
            left: calc(50% - 7px);
2166
            z-index: 2;
2167
        }
2168
    }
2169
 
2170
    &:hover {
2171
        .hover-tooltip {
2172
            opacity: 1;
2173
            visibility: visible;
2174
            transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2175
        }
2176
    }
2177
}
2178
 
2179
#region-flat-nav {
2180
    padding-right: 0;
2181
    padding-left: 0;
2182
    .nav {
2183
        margin-right: $grid-gutter-width * 0.5;
2184
        background-color: $card-bg;
2185
    }
2186
    @include media-breakpoint-down(sm) {
2187
        .nav {
2188
            margin-top: $grid-gutter-width;
2189
            margin-right: 0;
2190
        }
2191
    }
2192
}
2193
 
2194
// Footer link colour was added to allow the colour of footer links to be changed,
2195
// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2196
// rather than being specific to the footer. This is kept for backwards compatibility.
2197
$footer-link-color: $bg-inverse-link-color !default;
2198
 
2199
.footer-dark {
2200
    a {
2201
        color: $footer-link-color;
2202
        text-decoration: underline;
2203
        padding-top: map-get($spacers, 1);
2204
        padding-bottom: map-get($spacers, 1);
2205
 
2206
        .icon {
2207
            color: $footer-link-color;
2208
        }
2209
 
2210
        &:focus .icon {
2211
            color: $body-color;
2212
        }
2213
    }
2214
}
2215
 
2216
.btn-footer-popover {
2217
    display: none;
2218
    position: fixed;
2219
    bottom: 2rem;
2220
    right: 2rem;
2221
    @include box-shadow($popover-box-shadow);
2222
}
2223
 
2224
.btn-footer-communication {
2225
    display: none;
2226
    position: fixed;
2227
    bottom: 5rem;
2228
    right: 2rem;
2229
    @include box-shadow($popover-box-shadow);
2230
}
2231
 
2232
.hasstickyfooter .btn-footer-popover {
2233
    bottom: calc(1rem + #{$stickyfooter-height});
2234
}
2235
 
2236
.hasstickyfooter .btn-footer-communication {
2237
    bottom: calc(4rem + #{$stickyfooter-height});
2238
}
2239
 
2240
.popover.footer {
2241
    .popover-body {
2242
        padding: 0;
2243
        .footer-section {
2244
            a {
2245
                color: $body-color;
2246
                text-decoration: underline;
2247
                .icon {
2248
                    color: $body-color;
2249
                }
2250
                &:focus {
2251
                    text-decoration: none;
2252
                }
2253
            }
2254
        }
2255
    }
2256
}
2257
 
2258
.footer-support-link {
2259
    padding-bottom: 5px;
2260
}
2261
 
2262
@include media-breakpoint-up(sm) {
2263
    .jsenabled #page-footer .footer-content-popover {
2264
        display: none;
2265
    }
2266
    .jsenabled .btn-footer-popover,
2267
    .jsenabled .btn-footer-communication {
2268
        display: block;
2269
        z-index: $zindex-dropdown;
2270
    }
2271
}
2272
 
2273
.bg-inverse a {
2274
    color: $bg-inverse-link-color;
2275
    text-decoration: underline;
2276
    .icon {
2277
        color: $bg-inverse-link-color;
2278
    }
2279
}
2280
 
2281
.sitelink {
2282
    img {
2283
        width: 112px;
2284
    }
2285
}
2286
 
2287
.competency-tree {
2288
    ul {
2289
        padding-left: 1.5rem;
2290
    }
2291
}
2292
 
2293
.sr-only-focusable {
2294
    &:active,
2295
    &:focus {
2296
        z-index: 1031;
2297
        position: fixed;
2298
        background: $sr-only-active-bg;
2299
        padding: 7px;
2300
        left: 0;
2301
        top: 0;
2302
    }
2303
}
2304
 
2305
[data-drag-type="move"] {
2306
    cursor: move;
2307
    touch-action: none;
2308
}
2309
 
2310
.clickable {
2311
    cursor: pointer;
2312
}
2313
 
2314
.overlay-icon-container {
2315
    position: absolute;
2316
    top: 0;
2317
    left: 0;
2318
    width: 100%;
2319
    height: 100%;
2320
    background-color: $overlay-icon-bg;
2321
 
2322
    .loading-icon {
2323
        position: absolute;
2324
        top: 50%;
2325
        left: 50%;
2326
        transform: translate(-50%, -50%);
2327
 
2328
        .icon {
2329
            max-height: 2em;
2330
            max-width: 2em;
2331
            font-size: 2em;
2332
        }
2333
    }
2334
}
2335
 
2336
.w-auto {
2337
    width: auto;
2338
}
2339
 
2340
.bg-pulse-grey {
2341
    animation: bg-pulse-grey 2s infinite linear;
2342
}
2343
 
2344
@keyframes bg-pulse-grey {
2345
    0% {
2346
        background-color: $gray-100;
2347
    }
2348
    50% {
2349
        background-color: darken($gray-100, 5%);
2350
    }
2351
    100% {
2352
        background-color: $gray-100;
2353
    }
2354
}
2355
 
2356
@each $size, $length in $spacers {
2357
    .line-height-#{$size} {
2358
        line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2359
    }
2360
}
2361
 
2362
.dir-rtl {
2363
    .dir-rtl-hide {
2364
        display: none;
2365
    }
2366
}
2367
 
2368
.dir-ltr {
2369
    .dir-ltr-hide {
2370
        display: none;
2371
    }
2372
}
2373
 
2374
.paged-content-page-container {
2375
    min-height: 3.125rem;
2376
}
2377
 
2378
body.h5p-embed {
2379
    #page-content {
2380
        display: inherit;
2381
    }
2382
    #maincontent {
2383
        display: none;
2384
    }
2385
    .h5pmessages {
2386
        min-height: 230px; // This should be the same height as default core_h5p iframes.
2387
    }
2388
}
2389
 
2390
#h5pcontenttypes td {
2391
    vertical-align: middle;
2392
}
2393
 
2394
#page.drawers {
2395
    form#h5peditor,
2396
    form#coolh5peditor,
2397
    .core_contentbank_viewcontent {
2398
        max-width: $h5p-content-maxwidth;
2399
        margin: 0 auto;
2400
    }
2401
}
2402
 
2403
.text-decoration-none {
2404
    text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
2405
}
2406
 
2407
.colour-inherit {
2408
    color: inherit !important; /* stylelint-disable-line declaration-no-important */
2409
}
2410
 
2411
.position-right {
2412
    right: 0 !important; /* stylelint-disable-line declaration-no-important */
2413
}
2414
 
2415
.overflow-hidden {
2416
    overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2417
}
2418
 
2419
.text-break {
2420
    overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2421
}
2422
 
2423
.word-break {
2424
    word-break: break-word !important; /* stylelint-disable-line declaration-no-important */
2425
}
2426
 
2427
.z-index-0 {
2428
    z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
2429
}
2430
 
2431
.z-index-1 {
2432
    z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2433
}
2434
 
2435
// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2436
.float-left {
2437
    float: left !important; /* stylelint-disable-line declaration-no-important */
2438
}
2439
 
2440
.float-right {
2441
    float: right !important; /* stylelint-disable-line declaration-no-important */
2442
}
2443
 
2444
.img-responsive {
2445
    @include img-fluid();
2446
}
2447
 
2448
input[disabled] {
2449
    cursor: not-allowed;
2450
}
2451
 
2452
.fade.in {
2453
    opacity: 1;
2454
}
2455
 
2456
.clamp-2 {
2457
    display: -webkit-box;
2458
    -webkit-box-orient: vertical;
2459
    -webkit-line-clamp: 2;
2460
    overflow: hidden;
2461
}
2462
 
2463
.word-break-all {
2464
    word-break: break-all;
2465
}
2466
 
2467
.matchtext {
2468
    background-color: lighten($primary, 40%);
2469
    color: $body-color;
2470
    height: 1.5rem;
2471
}
2472
 
2473
.border-radius {
2474
    @if $enable-rounded {
2475
        @include border-radius($card-border-radius);
2476
    }
2477
}
2478
 
2479
.v-hidden {
2480
    visibility: hidden;
2481
}
2482
 
2483
// Any dialog (modal or dropdown) forced max-widths limits.
2484
.dialog-big {
2485
    max-width: $modal-md;
2486
}
2487
 
2488
.dialog-small {
2489
    max-width: $modal-sm;
2490
}
2491
 
2492
@include media-breakpoint-up(sm) {
2493
    .dialog-big {
2494
        width: $modal-md;
2495
    }
2496
 
2497
    .dialog-small {
2498
        width: $modal-sm;
2499
    }
2500
}
2501
 
2502
/*
2503
 * Helpers to show elements only when a parent element has focus or hover.
2504
 */
2505
 
2506
// Add this class to the element to hide.
2507
.v-parent-focus {
2508
    opacity: 0;
2509
    visibility: hidden;
2510
}
2511
 
2512
// Add this class to the parent element to control focus.
2513
.focus-control:focus-within .v-parent-focus,
2514
.focus-control:hover .v-parent-focus {
2515
    opacity: 1;
2516
    visibility: visible;
2517
}
2518
 
2519
// Emoji picker.
2520
$picker-width: 350px !default;
2521
$picker-width-xs: 320px !default;
2522
$picker-height: 400px !default;
2523
$picker-row-height: 40px !default;
2524
$picker-emoji-button-size: 40px !default;
2525
$picker-emoji-button-font-size: 24px !default;
2526
$picker-emoji-category-count: 9 !default;
2527
$picker-emojis-per-row: 7 !default;
2528
 
2529
.emoji-picker {
2530
    width: $picker-width;
2531
    height: $picker-height;
2532
 
2533
    .category-button {
2534
        padding: .375rem 0;
2535
        height: 100%;
2536
        width: divide($picker-width, $picker-emoji-category-count);
2537
        border-top: none;
2538
        border-left: none;
2539
        border-right: none;
2540
        border-bottom: 2px solid transparent;
2541
 
2542
        &.selected {
2543
            border-bottom: 2px solid map-get($theme-colors, 'primary');
2544
        }
2545
    }
2546
 
2547
    .emojis-container,
2548
    .search-results-container {
2549
        min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2550
    }
2551
 
2552
    .picker-row {
2553
        height: $picker-row-height;
2554
 
2555
        .category-name {
2556
            line-height: $picker-row-height;
2557
        }
2558
 
2559
        .emoji-button {
2560
            height: $picker-emoji-button-size;
2561
            width: $picker-emoji-button-size;
2562
            line-height: $picker-emoji-button-size;
2563
            font-size: $picker-emoji-button-font-size;
2564
            overflow: hidden;
2565
        }
2566
    }
2567
 
2568
    .emoji-preview {
2569
        height: $picker-row-height;
2570
        font-size: $picker-row-height;
2571
        line-height: $picker-row-height;
2572
    }
2573
 
2574
    .emoji-short-name {
2575
        line-height: $picker-row-height * 0.5;
2576
    }
2577
 
2578
    @include media-breakpoint-down(xs) {
2579
        width: $picker-width-xs;
2580
    }
2581
}
2582
 
2583
.emoji-auto-complete {
2584
    height: $picker-row-height;
2585
 
2586
    .btn.btn-link.btn-icon.emoji-button {
2587
        height: $picker-emoji-button-size;
2588
        width: $picker-emoji-button-size;
2589
        line-height: $picker-emoji-button-size;
2590
        font-size: $picker-emoji-button-font-size;
2591
 
2592
        &.active {
2593
            background-color: $gray-200;
2594
        }
2595
    }
2596
}
2597
 
2598
.toast-wrapper {
2599
    max-width: $toast-max-width;
2600
    max-height: 0;
2601
    // Place these above any modals and other elements.
2602
    z-index: 1051;
2603
 
2604
    > :first-child {
2605
        margin-top: $spacer;
2606
    }
2607
}
2608
 
2609
@each $color, $value in $theme-colors {
2610
    .alert-#{$color} {
2611
        a {
2612
            color: darken(theme-color-level($color, $alert-color-level), 10%);
2613
        }
2614
        // Darken the close button text colour inside notification alerts for better contrast.
2615
        .close {
2616
            color: darken(theme-color-level($color, $alert-color-level), 20%);
2617
            opacity: 0.6;
2618
        }
2619
    }
2620
}
2621
.alert a {
2622
    font-weight: $font-weight-bold;
2623
}
2624
 
2625
.breadcrumb:empty {
2626
    padding: 0;
2627
}
2628
 
2629
@include media-breakpoint-down(sm) {
2630
    #page-navbar {
2631
        width: 100%;
2632
    }
2633
 
2634
    .breadcrumb:not(:empty) {
2635
        width: 100%;
2636
        flex-wrap: nowrap;
2637
        margin-bottom: $spacer * 0.5;
2638
        .breadcrumb-item {
2639
            padding-top: $spacer * 0.33333;
2640
            padding-bottom: $spacer * 0.33333;
2641
            display: inline-flex;
2642
            overflow: hidden;
2643
        }
2644
        .breadcrumb-item a,
2645
        .breadcrumb-item span {
2646
            overflow: hidden;
2647
            text-overflow: ellipsis;
2648
            white-space: nowrap;
2649
        }
2650
    }
2651
 
2652
    .mform {
2653
        width: 100%;
2654
        padding-right: 15px;
2655
        padding-left: 15px;
2656
    }
2657
    .pagination {
2658
        flex-wrap: wrap;
2659
        justify-content: center;
2660
    }
2661
    .custom-select {
2662
        max-width: 100%;
2663
    }
2664
    .card .card-body {
2665
        padding: $card-spacer-x * 0.5;
2666
    }
2667
    #page-header {
2668
        .card {
2669
            border: 0;
2670
            .card-body {
2671
                padding: 0;
2672
            }
2673
        }
2674
    }
2675
    .nav-tabs:not(.more-nav),
2676
    .nav-pills {
2677
        margin: 0;
2678
        border: 0;
2679
        padding: $spacer * 0.125;
2680
        background-color: $gray-200;
2681
        .nav-item {
2682
            flex: 1 1 auto;
2683
            text-align: center;
2684
        }
2685
        .nav-link {
2686
            background: $white;
2687
            border: 0;
2688
            margin: $spacer * 0.125;
2689
            &.active {
2690
                @include button-outline-variant($gray-600);
2691
                border-color: $gray-600;
2692
            }
2693
        }
2694
    }
2695
}
2696
 
2697
@media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
2698
    div#page {
2699
        margin-top: 0;
2700
    }
2701
    .navbar.fixed-top {
2702
        position: relative;
2703
        z-index: inherit;
2704
    }
2705
}
2706
 
2707
.link-underline {
2708
    text-decoration: underline;
2709
    &:focus {
2710
        text-decoration: none;
2711
    }
2712
}
2713
 
2714
.alert.cta {
2715
    .cta-icon {
2716
        .icon {
2717
            padding: 0.3rem;
2718
            &.fa {
2719
                border-radius: 50%;
2720
                border-style: solid;
2721
                border-width: 0.125rem;
2722
            }
2723
        }
2724
    }
2725
}
2726
.core_payment_gateways_modal .custom-control-label::before,
2727
.core_payment_gateways_modal .custom-control-label::after {
2728
    top: 45%;
2729
}
2730
 
2731
$scrollbar-thumb: $primary;
2732
$scrollbar-track: lighten($primary, 40%);
2733
// simple scrollbars
2734
.visual-scroll-x {
2735
    scrollbar-width: thin;
2736
    scrollbar-color: $scrollbar-thumb $scrollbar-track;
2737
    -ms-overflow-style: -ms-autohiding-scrollbar;
2738
    &::-webkit-scrollbar {
2739
        height: 8px; // for horizontal scrollbars
2740
        -webkit-appearance: none;
2741
        appearance: none;
2742
    }
2743
    &::-webkit-scrollbar-thumb {
2744
        background-color: $scrollbar-thumb;
2745
        border-right: $border-width solid $white;
2746
    }
2747
    &::-webkit-scrollbar-track {
2748
        background-color: $scrollbar-track;
2749
        border-right: $border-width solid $white;
2750
    }
2751
}
2752
 
2753
// Thin scrollbars.
2754
@mixin thin-scrolls($bg-track) {
2755
 
2756
    // Firefox.
2757
    scrollbar-width: thin;
2758
    scrollbar-color: $thin-scroll-bg-thumb $bg-track;
2759
 
2760
    // Chrome, Edge and Safari.
2761
    &::-webkit-scrollbar {
2762
        width: 12px;
2763
    }
2764
 
2765
    &::-webkit-scrollbar-track {
2766
        background: $bg-track;
2767
    }
2768
 
2769
    &::-webkit-scrollbar-thumb {
2770
        background-color: $thin-scroll-bg-thumb;
2771
        border-radius: 20px;
2772
        border: 3px solid $bg-track;
2773
    }
2774
 
2775
    &::-webkit-scrollbar-thumb:hover {
2776
        background-color: $thin-scroll-bg-hover;
2777
    }
2778
}
2779
 
2780
// Add top/bottom shadow to scrolling area.
2781
@mixin scroll-shadow($background-colour: $white, $shadow-colour: $black, $shadow-size: 1rem) {
2782
    background:
2783
        linear-gradient($background-colour 30%, rgba($background-colour, 0)) center top,
2784
        linear-gradient(rgba($background-colour, 0), $background-colour 70%) center bottom,
2785
        radial-gradient(farthest-side at 50% 0, rgba($shadow-colour, 0.2), rgba($shadow-colour, 0)) center top,
2786
        radial-gradient(farthest-side at 50% 100%, rgba($shadow-colour, 0.2), rgba($shadow-colour, 0)) center bottom;
2787
    background-repeat: no-repeat;
2788
    background-size: 100% $shadow-size, 100% $shadow-size, 100% calc(#{$shadow-size} / 2), 100% calc(#{$shadow-size} / 2);
2789
    background-attachment: local, local, scroll, scroll;
2790
}
2791
 
2792
// Generic dropzones and dragging styles.
2793
 
2794
body.dragging {
2795
 
2796
    .drop-zone {
2797
        border: 1px dashed $dropzone-border;
2798
    }
2799
 
2800
    .drop-up {
2801
        border-top: 1px solid $dropzone-border;
2802
        border-top-left-radius: 0;
2803
        border-top-right-radius: 0;
2804
    }
2805
 
2806
    .drop-down {
2807
        border-bottom: 1px solid $dropzone-border;
2808
        border-bottom-left-radius: 0;
2809
        border-bottom-right-radius: 0;
2810
    }
2811
 
2812
    .dragging {
2813
        opacity: .6;
2814
    }
2815
}
2816
 
2817
.dragicon {
2818
    visibility: hidden;
2819
}
2820
 
2821
.draggable:hover .dragicon {
2822
    visibility: visible;
2823
    cursor: move;
2824
}
2825
 
2826
.dropzone-container {
2827
    cursor: pointer;
2828
 
2829
    .dropzone {
2830
        display: flex;
2831
        justify-content: center;
2832
        align-items: center;
2833
        flex-direction: column;
2834
        border: 2px dashed $filemanager-dnd-border-color;
2835
        border-radius: 0.5rem;
2836
 
2837
        &.dragover {
2838
            border: 2px dashed $filemanager-dnd-upload-over-border-color;
2839
        }
2840
    }
2841
 
2842
    .dropzone-icon {
2843
        color: $gray-500;
2844
 
2845
        .icon {
2846
            font-size: 6em;
2847
            width: auto;
2848
            height: auto;
2849
            max-width: initial;
2850
            max-height: initial;
2851
            margin-right: 0;
2852
        }
2853
    }
2854
 
2855
    .dropzone-sr-only-focusable {
2856
        &:active,
2857
        &:focus {
2858
            outline: 0;
2859
            box-shadow: $input-btn-focus-box-shadow;
2860
            z-index: $zindex-popover;
2861
            position: relative;
2862
            background: $sr-only-active-bg;
2863
            padding: 7px;
2864
        }
2865
    }
2866
}
2867
 
2868
// Generic classes reactive components can use.
2869
 
2870
.overlay-preview {
2871
    background-color: $overlay-preview-bg;
2872
    border: 2px dashed $primary;
2873
    position: absolute;
2874
    top: 0;
2875
    left: 0;
2876
    width: 100%;
2877
    height: 100%;
2878
 
2879
    .overlay-preview-wrapper {
2880
        position: absolute;
2881
        top: 0;
2882
        padding: 2rem;
2883
        width: 100%;
2884
    }
2885
 
2886
    .overlay-preview-content {
2887
        position: relative;
2888
        top: 0;
2889
        padding: $modal-inner-padding;
2890
        margin: 0 auto;
2891
        width: 100%;
2892
        max-width: 600px;
2893
        background-color: $primary;
2894
        color: $white;
2895
        text-align: center;
2896
        font-size: $font-size-lg;
2897
        @include border-radius();
2898
    }
2899
}
2900
 
2901
.overlay-preview-borders {
2902
    outline: 2px dashed $primary;
2903
}
2904
 
2905
.waitstate {
2906
    display: none;
2907
}
2908
 
2909
.stateready {
2910
    .waitstate {
2911
        display: inherit;
2912
    }
2913
    .whilenostate {
2914
        display: none;
2915
    }
2916
}
2917
 
2918
// Collapsible list.
2919
 
2920
.collapse-list {
2921
    .collapse-list-item {
2922
        padding: $collapse-list-item-padding-y $collapse-list-item-padding-x;
2923
        &:hover,
2924
        &:focus {
2925
            background-color: $collapse-list-item-hover-bg;
2926
            border-color: $collapse-list-item-hover-border;
2927
        }
2928
    }
2929
    .collapse-list-item-content {
2930
        .collapse-list-item {
2931
            padding-left: calc(#{$collapse-list-item-padding-x} * 3);
2932
        }
2933
    }
2934
}
2935
 
2936
.drawers {
2937
    .block_myoverview {
2938
        border: 0;
2939
        & > .card-body {
2940
            padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
2941
            padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
2942
            padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
2943
        }
2944
    }
2945
}
2946
 
2947
.dropdown-toggle::after {
2948
    @extend .fa-solid;
2949
    content: fa-content($fa-var-chevron-down);
2950
    margin-right: 0;
2951
    margin-left: 4px;
2952
    font-size: 9px;
2953
    width: 9px;
2954
    border: 0;
2955
 
2956
}
2957
 
2958
.dropleft .dropdown-toggle::before {
2959
    border: 0;
2960
    @extend .fa-solid;
2961
    content: fa-content($fa-var-chevron-left);
2962
    font-size: 9px;
2963
    margin-left: 0;
2964
    margin-right: 4px;
2965
    width: 9px;
2966
}
2967
 
2968
.dir-rtl .dropleft .dropdown-toggle::before {
2969
    content: fa-content($fa-var-chevron-right);
2970
}
2971
 
2972
.dropright .dropdown-toggle::after {
2973
    border: 0;
2974
    @extend .fa-solid;
2975
    content: fa-content($fa-var-chevron-right);
2976
}
2977
 
2978
.dir-rtl .dropright .dropdown-toggle::after {
2979
    content: fa-content($fa-var-chevron-left);
2980
}
2981
 
2982
 
2983
.dropup .dropdown-toggle::after {
2984
    border: 0;
2985
    @extend .fa-solid;
2986
    content: fa-content($fa-var-chevron-up);
2987
}
2988
 
2989
.select-menu {
2990
    li:first-child {
2991
        ul[role="group"] {
2992
            padding: 0;
2993
        }
2994
    }
2995
 
2996
    ul[role="group"] {
2997
        padding: 0.3rem 0 0 0;
2998
        margin: 0;
2999
        li:first-child {
3000
            cursor: default;
3001
            color: $gray-600;
3002
            padding: 0.25rem 1.5rem;
3003
            display: block;
3004
        }
3005
        .dropdown-item {
3006
            padding-left: 2.5rem;
3007
        }
3008
    }
3009
    .dropdown-item[aria-selected="true"] {
3010
        font-weight: bold;
3011
    }
3012
}
3013
 
3014
[role="listbox"] [role="option"] {
3015
    cursor: pointer;
3016
 
3017
    &[aria-selected="true"] {
3018
        font-weight: bold;
3019
    }
3020
}
3021
 
3022
.initialbargroups ul {
3023
    -webkit-margin-start: 0; /* stylelint-disable-line */
3024
    margin-right: -1px;
3025
}
3026
 
3027
.page-item {
3028
    &:first-child {
3029
        .page-link {
3030
            .initialbargroups & {
3031
                @include border-left-radius(0);
3032
                @include border-right-radius(0);
3033
            }
3034
            .initialbargroups .pagination-lg:first-child & {
3035
                @include border-left-radius($pagination-border-radius-lg);
3036
            }
3037
            .initialbargroups .pagination-sm:first-child & {
3038
                @include border-left-radius($pagination-border-radius-sm);
3039
            }
3040
        }
3041
    }
3042
    &:last-child {
3043
        .page-link {
3044
            .initialbargroups & {
3045
                @include border-left-radius(0);
3046
                @include border-right-radius(0);
3047
            }
3048
            .initialbargroups .pagination-lg:last-child & {
3049
                @include border-right-radius($pagination-border-radius-lg);
3050
            }
3051
            .initialbargroups .pagination-sm:last-child & {
3052
                @include border-right-radius($pagination-border-radius-sm);
3053
            }
3054
        }
3055
    }
3056
}
3057
 
3058
blockquote {
3059
    margin: 0 0.5rem 1rem;
3060
    padding-left: 1rem;
3061
    color: $gray-700;
3062
    border-left: 5px solid $gray-400;
3063
}
3064
 
3065
/* Prevent long strings exceeding page width */
3066
.page-header-headings,
3067
.coursename,
3068
.categoryname,
3069
.breadcrumb-item {
3070
 
3071
    &:not(.text-truncate) {
3072
        word-break: normal;
3073
        overflow-wrap: anywhere;
3074
        white-space: normal;
3075
    }
3076
}
3077
 
3078
/* Showmore component */
3079
.showmore-container {
3080
    &.collapsed {
3081
        .collapsed-content {
3082
            display: block;
3083
        }
3084
        .expanded-content {
3085
            display: none;
3086
        }
3087
    }
3088
    &:not(.collapsed) {
3089
        .collapsed-content {
3090
            display: none;
3091
        }
3092
        .expanded-content {
3093
            display: block;
3094
        }
3095
    }
3096
    button {
3097
        float: right;
3098
        &.btn-link {
3099
            text-decoration: none;
3100
        }
3101
        .icon {
3102
            font-size: $btn-font-size-sm;
3103
            margin: 0;
3104
        }
3105
    }
3106
}
3107
 
3108
/* Combobox search dropdowns */
3109
.usersearchdropdown,
3110
.gradesearchdropdown,
3111
.groupsearchdropdown {
3112
    &.dropdown-menu {
3113
        width: 350px;
3114
        .searchresultitemscontainer {
3115
            max-height: 170px;
3116
            overflow: auto;
3117
            /* stylelint-disable declaration-no-important */
3118
            img {
3119
                height: 48px !important;
3120
                width: 48px !important;
3121
            }
3122
        }
3123
    }
3124
}
3125
 
3126
/* Bulk actions in sticky footer. */
3127
#sticky-footer {
3128
    [data-type="bulkactions"] {
3129
        display: flex;
3130
        flex: 0 0 100%;
3131
        align-items: center;
3132
    }
3133
}
3134
 
3135
/* Choice list component. */
3136
.choicelist {
3137
    // Choicelist is designed to fit inside a small modal.
3138
    min-width: calc(#{$modal-sm} - 25px);
3139
 
3140
    // Align the font based icons.
3141
    i.icon {
3142
        vertical-align: middle;
3143
    }
3144
}
3145
 
3146
/* General card customisations. */
3147
.card.active {
3148
    border-color: $gray-500;
3149
}