MDL-67264 core_course: Activity chooser new feature
[moodle.git] / theme / boost / scss / moodle / core.scss
CommitLineData
536f0460
DW
1/* core.less */
2
2fd7cdbe
JO
3// When we upgrade boostrap to v4 release, we will need to change this to be used by the text-white class.
4// Because a primary colour that is both AA accessible on grey (footer) and white is not possible, we always
5// want white default colour.
6$bg-inverse-link-color: #fff !default;
7
bf45d7eb 8#region-main {
ba5c5083
DW
9 overflow-x: auto;
10 overflow-y: visible;
bf45d7eb 11 border: $card-border-width solid $card-border-color;
db919724
BB
12 @if $enable-rounded {
13 @include border-radius($card-border-radius);
14 }
bf45d7eb 15 padding: $card-spacer-x;
8e1a1c26 16 background-color: $body-bg;
ba5c5083 17}
99061152
DW
18
19.context-header-settings-menu,
20.region-main-settings-menu {
21 float: right;
b167b415
JD
22 width: auto;
23 max-width: 4em;
99061152
DW
24 height: 2em;
25 display: block;
b167b415 26 margin-top: 4px;
99061152
DW
27}
28
1b5630a0
FR
29$gototop-bottom-position: 50px !default;
30
31#goto-top-link {
32 visibility: hidden;
33 opacity: 0;
34 transition: opacity .7s ease 0s, visibility .1s ease .8s;
35 display: block;
36 position: fixed; /* IE compatibility hack */
37 @supports (position: sticky) {
38 position: sticky;
39 }
303df89d
FR
40 @supports (-ms-ime-align:auto) {
41 position: fixed; /* Edge compatibility hack */
42 }
1b5630a0 43 bottom: $gototop-bottom-position;
303df89d 44 right: 0;
1b5630a0
FR
45 a {
46 position: absolute;
47 right: 0;
48 transform: translateY(-100%);
49 }
50}
51
52body.scrolled #goto-top-link {
53 opacity: 1;
54 visibility: visible;
55 transition: visibility 0s ease 0s, opacity .7s ease .1s;
56}
57
99061152 58.context-header-settings-menu .dropdown-toggle > .icon,
11774d90 59#region-main-settings-menu .dropdown-toggle > .icon {
99061152 60 height: 24px;
9d67a408 61 font-size: 24px;
99061152
DW
62 width: auto;
63}
d8cfd611
DW
64/** Prevent user notifications overlapping with region main settings menu */
65#user-notifications {
66 display: block;
67 overflow: hidden;
68}
99061152 69
536f0460
DW
70/** Page layout CSS starts **/
71.layout-option-noheader #page-header,
72.layout-option-nonavbar #page-navbar,
73.layout-option-nofooter #page-footer,
74.layout-option-nocourseheader .course-content-header,
75.layout-option-nocoursefooter .course-content-footer {
f4143537 76 display: none;
536f0460
DW
77}
78
536f0460
DW
79/** Page layout CSS ends **/
80
536f0460
DW
81.mdl-left {
82 text-align: left;
83}
f4143537 84
536f0460
DW
85.mdl-right {
86 text-align: right;
87}
113efed5
FM
88
89/*rtl:ignore*/
90.text-ltr {
5142f564 91 direction: ltr !important; /* stylelint-disable-line declaration-no-important */
113efed5
FM
92}
93
536f0460
DW
94#add,
95#remove,
96.centerpara,
97.mdl-align {
98 text-align: center;
99}
f4143537 100
536f0460
DW
101a.dimmed,
102a.dimmed:link,
103a.dimmed:visited,
104a.dimmed_text,
105a.dimmed_text:link,
106a.dimmed_text:visited,
107.dimmed_text,
108.dimmed_text a,
109.dimmed_text a:link,
110.dimmed_text a:visited,
111.usersuspended,
112.usersuspended a,
113.usersuspended a:link,
114.usersuspended a:visited,
115.dimmed_category,
116.dimmed_category a {
6239d808 117 color: $text-muted;
536f0460 118}
f4143537 119
536f0460
DW
120.unlist,
121.unlist li,
122.inline-list,
123.inline-list li,
124.block .list,
125.block .list li,
126.section li.activity,
127.section li.movehere,
128.tabtree li {
129 list-style: none;
130 margin: 0;
131 padding: 0;
132}
f4143537 133
536f0460
DW
134.inline,
135.inline-list li {
136 display: inline;
137}
f4143537 138
536f0460
DW
139.notifytiny {
140 font-size: $font-size-xs;
141}
f4143537 142
536f0460
DW
143.notifytiny li,
144.notifytiny td {
145 font-size: 100%;
146}
f4143537 147
536f0460
DW
148.red,
149.notifyproblem {
43817397 150 color: map-get($theme-colors, 'warning');
536f0460 151}
f4143537 152
536f0460
DW
153.green,
154.notifysuccess {
43817397 155 color: map-get($theme-colors, 'success');
536f0460 156}
f4143537 157
536f0460 158.highlight {
43817397 159 color: map-get($theme-colors, 'info');
536f0460 160}
f4143537 161
d91cbe1e
CB
162.fitem.advanced .text-info {
163 font-weight: bold;
164}
165
536f0460
DW
166.reportlink {
167 text-align: right;
168}
f4143537 169
536f0460
DW
170a.autolink.glossary:hover {
171 cursor: help;
172}
173/* Block which is hidden if javascript enabled, prevents fickering visible when JS from footer used! */
174.collapsibleregioncaption {
175 white-space: nowrap;
2f3f8e45 176 min-height: $line-height-base * $font-size-base;
536f0460 177}
f4143537 178
536f0460
DW
179.pagelayout-mydashboard.jsenabled .collapsibleregioncaption {
180 cursor: pointer;
181}
f4143537 182
faff02ae
BB
183.pagelayout-mydashboard #region-main {
184 border: 0;
185 padding: 0;
186 background-color: transparent;
187 margin-top: -1px;
188}
189
536f0460
DW
190.collapsibleregioncaption img {
191 vertical-align: middle;
192}
193
194.jsenabled .hiddenifjs {
195 display: none;
196}
f4143537 197
536f0460
DW
198.visibleifjs {
199 display: none;
200}
f4143537 201
536f0460
DW
202.jsenabled .visibleifjs {
203 display: inline;
204}
f4143537 205
536f0460
DW
206.jsenabled .collapsibleregion {
207 overflow: hidden;
2f3f8e45 208 box-sizing: content-box;
536f0460 209}
f4143537 210
536f0460
DW
211.jsenabled .collapsed .collapsibleregioninner {
212 visibility: hidden;
213}
f4143537 214
536f0460
DW
215.collapsible-actions {
216 display: none;
217 text-align: right;
218}
f4143537 219
536f0460
DW
220.jsenabled .collapsible-actions {
221 display: block;
222}
f4143537 223
536f0460
DW
224.collapsible-actions .collapseexpand {
225 padding-left: 20px;
226 background: url([[pix:t/collapsed]]) 2px center no-repeat;
227}
ed7844b5
FM
228/*rtl:raw:
229.collapsible-actions .collapseexpand {
536f0460
DW
230 background: url([[pix:t/collapsed_rtl]]) right center no-repeat;
231}
ed7844b5 232*/
536f0460
DW
233.collapsible-actions .collapse-all {
234 background-image: url([[pix:t/expanded]]);
235}
f4143537 236
536f0460 237.yui-overlay .yui-widget-bd {
f4143537
DP
238 background-color: #ffee69;
239 border: 1px solid #a6982b;
240 border-top-color: #d4c237;
fde35b8f 241 color: #000;
536f0460
DW
242 left: 0;
243 padding: 2px 5px;
244 position: relative;
245 top: 0;
246 z-index: 1;
247}
f4143537 248
536f0460
DW
249.clearer {
250 background: transparent;
251 border-width: 0;
252 clear: both;
253 display: block;
254 height: 1px;
255 margin: 0;
256 padding: 0;
257}
f4143537 258
536f0460
DW
259.bold,
260.warning,
261.errorbox .title,
262.pagingbar .title,
263.pagingbar .thispage {
264 font-weight: bold;
265}
f4143537 266
91bda4cd
DW
267img.userpicture {
268 margin-right: 0.5rem;
269}
f4143537 270
536f0460
DW
271img.resize {
272 height: 1em;
273 width: 1em;
274}
f4143537 275
91bda4cd 276.action-menu .dropdown-toggle {
91bda4cd
DW
277 text-decoration: none;
278}
f4143537 279
3f0544b8
DW
280.action-menu {
281 white-space: nowrap;
282}
f4143537 283
3ec69c2e 284.block img.resize {
536f0460
DW
285 height: 0.9em;
286 width: 0.8em;
287}
288/* Icon styles */
072364df 289img.activityicon {
536f0460
DW
290 height: 24px;
291 width: 24px;
292 vertical-align: middle;
293}
f4143537 294
536f0460
DW
295.headermain {
296 font-weight: bold;
297}
f4143537 298
536f0460
DW
299#maincontent {
300 display: block;
301 height: 1px;
302 overflow: hidden;
303}
f4143537 304
536f0460
DW
305img.uihint {
306 cursor: help;
307}
f4143537 308
536f0460
DW
309#addmembersform table {
310 margin-left: auto;
311 margin-right: auto;
312}
f4143537 313
536f0460
DW
314table.flexible .emptyrow {
315 display: none;
316}
f4143537 317
536f0460
DW
318form.popupform,
319form.popupform div {
320 display: inline;
321}
f4143537 322
536f0460
DW
323.arrow_button input {
324 overflow: hidden;
325}
536f0460
DW
326.no-overflow {
327 overflow: auto;
536f0460 328}
f4143537 329
a3124b15 330// Minimum height required for a menu in a table inside a scrollable div.
a3a157ae 331// Position required for table sizing inside a flex container.
536f0460 332.no-overflow > .generaltable {
a3a157ae 333 position: relative;
536f0460 334 margin-bottom: 0;
a3124b15 335 min-height: 10em;
536f0460
DW
336}
337// Accessibility features
338
339// Accessibility: text 'seen' by screen readers but not visual users.
340.accesshide {
b188407b 341 @include sr-only();
536f0460 342}
f4143537 343
536f0460 344span.hide,
3d979f96
FM
345div.hide,
346.hidden {
536f0460
DW
347 display: none;
348}
349// Accessibility: Skip block link, for keyboard-only users.
350a.skip-block,
351a.skip {
352 position: absolute;
353 top: -1000em;
354 font-size: 0.85em;
355 text-decoration: none;
356}
f4143537 357
536f0460
DW
358a.skip-block:focus,
359a.skip-block:active,
360a.skip:focus,
361a.skip:active {
362 position: static;
363 display: block;
364}
f4143537 365
536f0460
DW
366.skip-block-to {
367 display: block;
368 height: 1px;
369 overflow: hidden;
370}
371// Blogs
372.addbloglink {
373 text-align: center;
374}
f4143537 375
536f0460
DW
376.blog_entry .audience {
377 text-align: right;
378 padding-right: 4px;
379}
f4143537 380
536f0460
DW
381.blog_entry .tags {
382 margin-top: 15px;
383}
f4143537 384
536f0460
DW
385.blog_entry .content {
386 margin-left: 43px;
387}
388// Group
f4143537 389
536f0460
DW
390#doc-contents h1 {
391 margin: 1em 0 0 0;
392}
f4143537 393
536f0460
DW
394#doc-contents ul {
395 margin: 0;
396 padding: 0;
397 width: 90%;
398}
f4143537 399
536f0460
DW
400#doc-contents ul li {
401 list-style-type: none;
402}
f4143537 403
536f0460
DW
404.groupmanagementtable td {
405 vertical-align: top;
406}
f4143537 407
536f0460
DW
408.groupmanagementtable #existingcell,
409.groupmanagementtable #potentialcell {
410 width: 42%;
411}
f4143537 412
536f0460
DW
413.groupmanagementtable #buttonscell {
414 width: 16%;
415}
f4143537 416
536f0460
DW
417.groupmanagementtable #buttonscell p.arrow_button input {
418 width: auto;
419 min-width: 80%;
420 margin: 0 auto;
1714b6e7 421 display: block;
536f0460 422}
f4143537 423
536f0460
DW
424.groupmanagementtable #removeselect_wrapper,
425.groupmanagementtable #addselect_wrapper {
426 width: 100%;
427}
f4143537 428
536f0460
DW
429.groupmanagementtable #removeselect_wrapper label,
430.groupmanagementtable #addselect_wrapper label {
431 font-weight: normal;
432}
f4143537 433
536f0460
DW
434#group-usersummary {
435 width: 14em;
436}
f4143537 437
536f0460
DW
438.groupselector {
439 margin-top: 3px;
440 margin-bottom: 3px;
441 display: inline-block;
442}
f4143537 443
536f0460
DW
444.groupselector label {
445 display: inline-block;
446}
536f0460
DW
447
448// Login
386f269f
FM
449.login-page {
450 [name="username"] {
451 margin-bottom: -1px;
452 border-bottom-right-radius: 0;
453 border-bottom-left-radius: 0;
454 }
f4143537 455
386f269f
FM
456 [type="password"] {
457 margin-bottom: 10px;
458 border-top-left-radius: 0;
459 border-top-right-radius: 0;
460 }
536f0460
DW
461}
462
536f0460
DW
463// Notes
464.notepost {
465 margin-bottom: 1em;
466}
f4143537 467
536f0460
DW
468.notepost .userpicture {
469 float: left;
470 margin-right: 5px;
471}
f4143537 472
536f0460
DW
473.notepost .content,
474.notepost .footer {
475 clear: both;
476}
f4143537 477
536f0460
DW
478.notesgroup {
479 margin-left: 20px;
480}
481
482// My Moodle
137c289a
FM
483.path-my .coursebox {
484 margin: $spacer-y 0;
485 padding: 0;
f4143537 486
137c289a
FM
487 .overview {
488 margin: 15px 30px 10px 30px;
489 }
536f0460 490}
f4143537 491
536f0460
DW
492.path-my .coursebox .info {
493 float: none;
494 margin: 0;
495}
496
497// Modules
498.mod_introbox {
499 padding: 10px;
500}
f4143537 501
536f0460
DW
502table.mod_index {
503 width: 100%;
504}
505
506// Comments
507.comment-ctrl {
508 font-size: 12px;
509 display: none;
510 margin: 0;
511 padding: 0;
512}
f4143537 513
536f0460
DW
514.comment-ctrl h5 {
515 margin: 0;
516 padding: 5px;
517}
f4143537 518
536f0460
DW
519.comment-area {
520 max-width: 400px;
521 padding: 5px;
522}
f4143537 523
536f0460
DW
524.comment-area textarea {
525 width: 100%;
526 overflow: auto;
f4143537 527
536f0460
DW
528 &.fullwidth {
529 -webkit-box-sizing: border-box;
530 -moz-box-sizing: border-box;
531 box-sizing: border-box;
532 }
533}
f4143537 534
536f0460
DW
535.comment-area .fd {
536 text-align: right;
537}
f4143537 538
536f0460
DW
539.comment-meta span {
540 color: gray;
541}
f4143537 542
536f0460
DW
543.comment-link img {
544 vertical-align: text-bottom;
545}
f4143537 546
536f0460
DW
547.comment-list {
548 font-size: 11px;
549 overflow: auto;
550 list-style: none;
551 padding: 0;
552 margin: 0;
553}
f4143537 554
536f0460
DW
555.comment-list li {
556 margin: 2px;
557 list-style: none;
558 margin-bottom: 5px;
559 clear: both;
560 padding: .3em;
561 position: relative;
562}
f4143537 563
536f0460 564.comment-list li.first {
f4143537 565 display: none;
536f0460 566}
f4143537
DP
567
568.comment-paging {
536f0460
DW
569 text-align: center;
570}
f4143537
DP
571
572.comment-paging .pageno {
536f0460
DW
573 padding: 2px;
574}
f4143537
DP
575
576.comment-paging .curpage {
577 border: 1px solid #ccc;
536f0460 578}
f4143537 579
536f0460
DW
580.comment-message .picture {
581 width: 20px;
582 float: left;
583}
f4143537 584
536f0460
DW
585.comment-message .text {
586 margin: 0;
587 padding: 0;
588}
f4143537 589
536f0460
DW
590.comment-message .text p {
591 padding: 0;
592 margin: 0 18px 0 0;
593}
f4143537 594
536f0460
DW
595.comment-delete {
596 position: absolute;
597 top: 0;
598 right: 0;
599 margin: .3em;
600}
f4143537
DP
601
602.comment-report-selectall {
603 display: none;
536f0460 604}
f4143537 605
536f0460 606.comment-link {
f4143537 607 display: none;
536f0460 608}
f4143537 609
536f0460 610.jsenabled .comment-link {
f4143537 611 display: block;
536f0460 612}
f4143537
DP
613
614.jsenabled .showcommentsnonjs {
615 display: none;
536f0460 616}
f4143537
DP
617
618.jsenabled .comment-report-selectall {
619 display: inline;
536f0460
DW
620}
621/**
622* Completion progress report
623*/
624.completion-expired {
43817397 625 color: map-get($theme-colors, 'warning');
536f0460 626}
f4143537 627
536f0460
DW
628.completion-expected {
629 font-size: $font-size-xs;
630}
f4143537 631
536f0460
DW
632.completion-sortchoice,
633.completion-identifyfield {
634 font-size: $font-size-xs;
635 vertical-align: bottom;
636}
f4143537 637
536f0460
DW
638.completion-progresscell {
639 text-align: right;
640}
f4143537 641
536f0460
DW
642.completion-expired .completion-expected {
643 font-weight: bold;
644}
645/**
646* Tags
647*/
648img.user-image {
649 height: 100px;
650 width: 100px;
651}
f4143537 652
536f0460
DW
653#tag-search-box {
654 text-align: center;
655 margin: 10px auto;
656}
657
658.path-tag .tag-index-items .tagarea {
f4143537 659 border: 1px solid #e3e3e3;
536f0460
DW
660 border-radius: 4px;
661 padding: 10px;
662 margin-top: 10px;
663}
664
665.path-tag .tag-index-items .tagarea h3 {
666 display: block;
667 padding: 3px 0 10px 0;
fde35b8f 668 margin: 0;
536f0460
DW
669 font-size: 1.1em;
670 font-weight: bold;
671 line-height: 20px;
672 color: #999;
fde35b8f 673 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
536f0460
DW
674 text-transform: uppercase;
675 word-wrap: break-word;
f4143537 676 border-bottom: solid 1px #e3e3e3;
536f0460
DW
677 margin-bottom: 10px;
678}
679
680.path-tag .tagarea .controls,
681.path-tag .tagarea .taggeditems {
682 @include clearfix();
683}
f4143537 684
536f0460
DW
685.path-tag .tagarea .controls,
686.path-tag .tag-backtoallitems {
687 text-align: center;
688}
f4143537 689
536f0460
DW
690.path-tag .tagarea .controls .gotopage.nextpage {
691 float: right;
692}
f4143537 693
536f0460
DW
694.path-tag .tagarea .controls .gotopage.prevpage {
695 float: left;
696}
f4143537 697
536f0460
DW
698.path-tag .tagarea .controls .exclusivemode {
699 display: inline-block;
700}
f4143537 701
536f0460
DW
702.path-tag .tagarea .controls.controls-bottom {
703 margin-top: 5px;
704}
f4143537 705
536f0460
DW
706.path-tag .tagarea .controls .gotopage.nextpage::after {
707 padding-right: 5px;
708 padding-left: 5px;
709 content: "»";
710}
f4143537 711
536f0460
DW
712.path-tag .tagarea .controls .gotopage.prevpage::before {
713 padding-right: 5px;
714 padding-left: 5px;
715 content: "«";
716}
717
718span.flagged-tag,
719tr.flagged-tag,
720span.flagged-tag a,
721tr.flagged-tag a {
43817397 722 color: map-get($theme-colors, 'warning');
536f0460 723}
f4143537 724
536f0460
DW
725.tag-management-table td,
726.tag-management-table th {
727 vertical-align: middle;
728 padding: 4px;
729}
f4143537 730
536f0460
DW
731.tag-management-table .inplaceeditable.inplaceeditingon input {
732 width: 150px;
733}
f4143537 734
536f0460
DW
735.path-admin-tag .addstandardtags {
736 float: right;
f4143537 737
536f0460
DW
738 img {
739 margin: 0 5px;
740 }
741}
f4143537 742
536f0460
DW
743.path-tag .tag-relatedtags {
744 padding-top: 10px;
745}
f4143537 746
536f0460
DW
747.path-tag .tag-management-box {
748 text-align: right;
749}
f4143537 750
536f0460
DW
751.path-tag .tag-index-toc {
752 padding: 10px;
753 text-align: center;
754}
f4143537 755
536f0460
DW
756.path-tag .tag-index-toc li,
757.path-tag .tag-management-box li {
758 margin-left: 5px;
759 margin-right: 5px;
760}
f4143537 761
536f0460
DW
762.path-tag .tag-management-box li a.edittag {
763 background-image: url([[pix:moodle|i/settings]]);
764}
f4143537 765
536f0460
DW
766.path-tag .tag-management-box li a.flagasinappropriate {
767 background-image: url([[pix:moodle|i/flagged]]);
768}
f4143537 769
536f0460
DW
770.path-tag .tag-management-box li a.removefrommyinterests {
771 background-image: url([[pix:moodle|t/delete]]);
772}
f4143537 773
536f0460
DW
774.path-tag .tag-management-box li a.addtomyinterests {
775 background-image: url([[pix:moodle|t/add]]);
776}
f4143537 777
536f0460
DW
778.path-tag .tag-management-box li a {
779 background-repeat: no-repeat;
780 background-position: left;
781 padding-left: 17px;
782}
f4143537 783
536f0460
DW
784.tag_feed.media-list .media .itemimage {
785 float: left;
786}
f4143537 787
536f0460
DW
788.tag_feed.media-list .media .itemimage img {
789 height: 35px;
790 width: 35px;
791}
f4143537 792
536f0460
DW
793.tag_feed.media-list .media .media-body {
794 padding-right: 10px;
795 padding-left: 10px;
796}
f4143537 797
536f0460 798.tag_feed .media .muted a {
6239d808 799 color: $text-muted;
536f0460 800}
f4143537 801
536f0460
DW
802.tag_cloud {
803 text-align: center;
804}
f4143537 805
536f0460 806.tag_cloud .inline-list li {
fde35b8f 807 padding: 0 0.2em;
536f0460 808}
f4143537 809
536f0460
DW
810.tag_cloud .tag_overflow {
811 margin-top: 1em;
812 font-style: italic;
813}
f4143537 814
536f0460
DW
815.tag_cloud .s20 {
816 font-size: 2.7em;
817}
f4143537 818
536f0460
DW
819.tag_cloud .s19 {
820 font-size: 2.6em;
821}
f4143537 822
536f0460
DW
823.tag_cloud .s18 {
824 font-size: 2.5em;
825}
f4143537 826
536f0460
DW
827.tag_cloud .s17 {
828 font-size: 2.4em;
829}
f4143537 830
536f0460
DW
831.tag_cloud .s16 {
832 font-size: 2.3em;
833}
f4143537 834
536f0460
DW
835.tag_cloud .s15 {
836 font-size: 2.2em;
837}
f4143537 838
536f0460
DW
839.tag_cloud .s14 {
840 font-size: 2.1em;
841}
f4143537 842
536f0460
DW
843.tag_cloud .s13 {
844 font-size: 2em;
845}
f4143537 846
536f0460
DW
847.tag_cloud .s12 {
848 font-size: 1.9em;
849}
f4143537 850
536f0460
DW
851.tag_cloud .s11 {
852 font-size: 1.8em;
853}
f4143537 854
536f0460
DW
855.tag_cloud .s10 {
856 font-size: 1.7em;
857}
f4143537 858
536f0460
DW
859.tag_cloud .s9 {
860 font-size: 1.6em;
861}
f4143537 862
536f0460
DW
863.tag_cloud .s8 {
864 font-size: 1.5em;
865}
f4143537 866
536f0460
DW
867.tag_cloud .s7 {
868 font-size: 1.4em;
869}
f4143537 870
536f0460
DW
871.tag_cloud .s6 {
872 font-size: 1.3em;
873}
f4143537 874
536f0460
DW
875.tag_cloud .s5 {
876 font-size: 1.2em;
877}
f4143537 878
536f0460
DW
879.tag_cloud .s4 {
880 font-size: 1.1em;
881}
f4143537 882
536f0460
DW
883.tag_cloud .s3 {
884 font-size: 1em;
885}
f4143537 886
536f0460
DW
887.tag_cloud .s2 {
888 font-size: 0.9em;
889}
f4143537 890
536f0460
DW
891.tag_cloud .s1 {
892 font-size: 0.8em;
893}
f4143537 894
536f0460
DW
895.tag_cloud .s0 {
896 font-size: 0.7em;
897}
f4143537 898
536f0460
DW
899.tag_list ul {
900 display: inline;
901}
f4143537 902
536f0460 903.tag_list.hideoverlimit .overlimit {
f4143537 904 display: none;
536f0460 905}
f4143537 906
536f0460 907.tag_list .tagmorelink {
f4143537 908 display: none;
536f0460 909}
f4143537 910
536f0460 911.tag_list.hideoverlimit .tagmorelink {
f4143537 912 display: inline;
536f0460 913}
f4143537 914
536f0460 915.tag_list.hideoverlimit .taglesslink {
f4143537 916 display: none;
536f0460
DW
917}
918
919/**
920* Web Service
921*/
922#webservice-doc-generator td {
923 text-align: left;
924 border: 0 solid black;
925}
45d5594e 926
536f0460
DW
927/**
928* Enrol
929*/
930.userenrolment {
931 width: 100%;
932 border-collapse: collapse;
933}
f4143537 934
536f0460 935.userenrolment tr {
f4143537 936 vertical-align: top;
536f0460 937}
f4143537 938
536f0460
DW
939.userenrolment td {
940 padding: 0;
941 height: 41px;
942}
f4143537 943
536f0460
DW
944.userenrolment .subfield {
945 margin-right: 5px;
946}
f4143537 947
536f0460
DW
948.userenrolment .col_userdetails .subfield {
949 margin-left: 40px;
950}
f4143537 951
536f0460
DW
952.userenrolment .col_userdetails .subfield_picture {
953 float: left;
954 margin-left: 0;
955}
f4143537 956
536f0460
DW
957.userenrolment .col_lastseen {
958 width: 150px;
959}
f4143537 960
536f0460
DW
961.userenrolment .col_role {
962 width: 262px;
963}
f4143537 964
536f0460
DW
965.userenrolment .col_role .roles,
966.userenrolment .col_group .groups {
967 margin-right: 30px;
968}
f4143537 969
f66ab070
LB
970.userenrolment .col_role .role {
971 float: left;
972 padding: 0 3px 3px;
973 margin: 0 3px 3px;
974 white-space: nowrap;
975}
976
536f0460
DW
977.userenrolment .col_group .group {
978 float: left;
979 padding: 3px;
980 margin: 3px;
981 white-space: nowrap;
982}
f4143537 983
536f0460
DW
984.userenrolment .col_role .role a,
985.userenrolment .col_group .group a {
986 margin-left: 3px;
987 cursor: pointer;
988}
f4143537 989
536f0460
DW
990.userenrolment .col_role .addrole,
991.userenrolment .col_group .addgroup {
992 float: right;
993 padding: 3px;
994 margin: 3px;
f4143537 995
536f0460 996 > a:hover {
f4143537 997 border-bottom: 1px solid #666;
536f0460
DW
998 }
999}
f4143537 1000
536f0460
DW
1001.userenrolment .col_role .addrole img,
1002.userenrolment .col_group .addgroup img {
1003 vertical-align: baseline;
1004}
1005
1006.userenrolment .hasAllRoles .col_role .addrole {
1007 display: none;
1008}
1009
1010.userenrolment .col_enrol .enrolment {
1011 float: left;
f66ab070
LB
1012 padding: 0 3px 3px;
1013 margin: 0 3px 3px;
536f0460 1014}
f4143537 1015
536f0460
DW
1016.userenrolment .col_enrol .enrolment a {
1017 float: right;
1018 margin-left: 3px;
1019}
f4143537 1020
536f0460 1021.corelightbox {
f4143537 1022 background-color: #ccc;
536f0460
DW
1023 position: absolute;
1024 top: 0;
1025 left: 0;
1026 width: 100%;
1027 height: 100%;
1028 text-align: center;
1029}
f4143537 1030
536f0460
DW
1031.corelightbox img {
1032 position: fixed;
1033 top: 50%;
1034 left: 50%;
1035}
1036
1037.mod-indent-outer {
1038 display: table;
1039}
f4143537 1040
536f0460
DW
1041.mod-indent {
1042 display: table-cell;
1043}
f4143537 1044
536f0460 1045.label .mod-indent {
f4143537
DP
1046 float: left;
1047 padding-top: 20px;
536f0460 1048}
536f0460
DW
1049$mod-indent-size: 30px;
1050/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
f4143537 1051
536f0460 1052@for $i from 1 through 16 {
9cb41231 1053 $width: ($i * $mod-indent-size);
536f0460 1054
9cb41231
DP
1055 .mod-indent-#{$i} {
1056 width: $width;
1057 }
536f0460 1058}
f4143537 1059
536f0460 1060.mod-indent-huge {
9cb41231 1061 width: (16 * $mod-indent-size);
536f0460
DW
1062}
1063
1064/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1065.resourcecontent .mediaplugin_mp3 object {
1066 height: 25px;
f4143537 1067 width: 600px;
536f0460 1068}
f4143537 1069
536f0460 1070.resourcecontent audio.mediaplugin_html5audio {
f4143537 1071 width: 600px;
536f0460
DW
1072}
1073/** Large resource images should avoid hidden overflow **/
1074.resourceimage {
1075 max-width: 100%;
1076}
1077/* Audio player size in 'inline' mode (can only change width, as above) */
1078.mediaplugin_mp3 object {
1079 height: 15px;
f4143537 1080 width: 300px;
536f0460 1081}
f4143537 1082
536f0460 1083audio.mediaplugin_html5audio {
f4143537 1084 width: 300px;
536f0460
DW
1085}
1086/* TinyMCE moodle media preview frame should not have padding */
1087.core_media_preview.pagelayout-embedded #content {
1088 padding: 0;
1089}
f4143537 1090
536f0460
DW
1091.core_media_preview.pagelayout-embedded #maincontent {
1092 height: 0;
1093}
f4143537 1094
536f0460
DW
1095body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1096 padding: 0;
1097 margin: 0;
1098 min-width: 0;
1099 background: none;
1100}
f4143537 1101
536f0460
DW
1102.path-rating .ratingtable {
1103 width: 100%;
1104 margin-bottom: 1em;
1105}
f4143537 1106
536f0460
DW
1107.path-rating .ratingtable th.rating {
1108 width: 100%;
1109}
f4143537 1110
536f0460
DW
1111.path-rating .ratingtable td.rating,
1112.path-rating .ratingtable td.time {
1113 white-space: nowrap;
1114 text-align: center;
1115}
f4143537 1116
536f0460
DW
1117/* Moodle Dialogue Settings (moodle-core-dialogue) */
1118.moodle-dialogue-base .moodle-dialogue-lightbox {
e72cb21d 1119 background-color: $gray;
536f0460 1120}
f4143537 1121
bfe00e67
BB
1122// Prevent adding backdrops to popups in popups.
1123.pagelayout-popup {
1124 .moodle-dialogue-base {
1125 .moodle-dialogue-lightbox {
1126 background-color: transparent;
1127 }
1128 .moodle-dialogue {
1129 box-shadow: $popover-box-shadow;
1130 }
1131 }
1132}
1133
536f0460
DW
1134.moodle-dialogue-base .hidden,
1135.moodle-dialogue-base .moodle-dialogue-hidden {
1136 display: none;
1137}
f4143537 1138
536f0460
DW
1139.no-scrolling {
1140 overflow: hidden;
1141}
f4143537 1142
536f0460 1143.moodle-dialogue-base .moodle-dialogue-fullscreen {
fde35b8f
DP
1144 left: 0;
1145 top: 0;
1146 right: 0;
536f0460
DW
1147 bottom: -50px;
1148 position: fixed;
1149}
f4143537 1150
536f0460
DW
1151.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1152 overflow: auto;
1153}
f4143537 1154
536f0460
DW
1155.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1156 width: 28px;
1157 height: 16px;
1158 background-size: 100%;
1159}
f4143537 1160
bffc0ef1
FM
1161.moodle-dialogue-base .moodle-dialogue-wrap {
1162 background-color: #fff;
1163 border: 1px solid #ccc;
1164}
f4143537 1165
181179de
DW
1166// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1167// it for a reason (conflicts with jquery .show()).
1168.modal.show {
1169 display: block;
1170}
1171
25f90896 1172.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
807e5244
BB
1173 display: flex;
1174 padding: 1rem 1rem;
1175 border-bottom: 1px solid #dee2e6;
536f0460 1176}
f4143537 1177
536f0460 1178.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1179 // Undo some YUI damage.
88af0208 1180 min-height: 3rem;
25f90896 1181 color: initial;
25f90896
DW
1182 background: initial;
1183 font-size: 1.5rem;
1184 line-height: 1.5;
536f0460 1185}
f4143537 1186
536f0460 1187.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
3ec69c2e 1188 font-size: 1.5rem;
536f0460 1189}
f4143537 1190
536f0460 1191.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
85dd7c6f
NK
1192 /*rtl:raw:
1193 left: 0;
1194 right: auto;
1195 */
807e5244
BB
1196 padding: 0;
1197 position: relative;
1198 margin-left: auto;
536f0460 1199}
f4143537 1200
536f0460 1201.moodle-dialogue-base .closebutton {
807e5244
BB
1202 padding: $modal-header-padding;
1203 margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
1204 position: relative;
1205 background-color: transparent;
1206 border: 0;
1207 background-image: none;
25f90896 1208 box-shadow: none;
807e5244
BB
1209 opacity: 0.7;
1210 &:hover,
1211 &:active {
1212 opacity: 1;
1213 }
5142f564
FM
1214 &::after {
1215 content: "×";
1216 }
536f0460 1217}
f4143537 1218
25f90896 1219.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
3ec69c2e 1220 padding: 0.5rem;
807e5244
BB
1221 body {
1222 background-color: $body-bg;
1223 }
536f0460
DW
1224}
1225
1226.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1227 overflow: auto;
1228 position: absolute;
fde35b8f 1229 top: 0;
536f0460 1230 bottom: 50px;
fde35b8f
DP
1231 left: 0;
1232 right: 0;
1233 margin: 0;
1234 border: 0;
536f0460 1235}
f4143537 1236
536f0460
DW
1237.moodle-dialogue-exception .moodle-exception-param label {
1238 font-weight: bold;
1239}
f4143537 1240
536f0460 1241.moodle-dialogue-exception .param-stacktrace label {
f4143537 1242 background-color: #eee;
536f0460
DW
1243 border: 1px solid #ccc;
1244 border-bottom-width: 0;
1245}
f4143537 1246
536f0460
DW
1247.moodle-dialogue-exception .param-stacktrace pre {
1248 border: 1px solid #ccc;
1249 background-color: #fff;
1250}
f4143537 1251
536f0460
DW
1252.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1253 color: navy;
1254 font-size: $font-size-sm;
1255}
f4143537 1256
536f0460 1257.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
43817397 1258 color: map-get($theme-colors, 'warning');
536f0460
DW
1259 font-size: $font-size-sm;
1260}
f4143537 1261
536f0460
DW
1262.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1263 color: #333;
1264 font-size: 90%;
1265 border-bottom: 1px solid #eee;
1266}
f4143537 1267
bc8594bd
FM
1268.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1269 display: none;
1270}
f4143537 1271
25f90896
DW
1272.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1273 // Undo some YUI damage.
1274 background: initial;
536f0460 1275}
f4143537 1276
536f0460 1277.moodle-dialogue-confirm .confirmation-message {
3ec69c2e 1278 margin: 0.5rem 0;
f2405a5f 1279}
f4143537 1280
536f0460 1281.moodle-dialogue-confirm .confirmation-dialogue input {
f4143537 1282 min-width: 80px;
536f0460 1283}
f4143537 1284
536f0460
DW
1285.moodle-dialogue-exception .moodle-exception-message {
1286 margin: 1em;
1287}
f4143537 1288
536f0460
DW
1289.moodle-dialogue-exception .moodle-exception-param {
1290 margin-bottom: 0.5em;
1291}
f4143537 1292
536f0460
DW
1293.moodle-dialogue-exception .moodle-exception-param label {
1294 width: 150px;
1295}
f4143537 1296
536f0460
DW
1297.moodle-dialogue-exception .param-stacktrace label {
1298 display: block;
1299 margin: 0;
1300 padding: 4px 1em;
1301}
f4143537 1302
536f0460
DW
1303.moodle-dialogue-exception .param-stacktrace pre {
1304 display: block;
1305 height: 200px;
1306 overflow: auto;
1307}
f4143537 1308
536f0460
DW
1309.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1310 display: inline-block;
1311 margin: 4px 0;
1312}
f4143537 1313
536f0460
DW
1314.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1315 display: inline-block;
1316 width: 50px;
1317 margin: 4px 1em;
1318}
f4143537 1319
536f0460
DW
1320.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1321 padding-left: 25px;
1322 margin-bottom: 4px;
1323 padding-bottom: 4px;
1324}
f4143537 1325
536f0460
DW
1326.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1327 opacity: 0.75;
1328 width: 100%;
1329 height: 100%;
1330 top: 0;
1331 left: 0;
1332 background-color: white;
1333 text-align: center;
1334 padding: 10% 0;
1335}
1336/* Apply a default max-height on tooltip text */
1337.moodle-dialogue .tooltiptext {
1338 max-height: 300px;
1339}
1340
1341.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1342 z-index: 3001;
1343
1344 .moodle-dialogue-bd {
1345 overflow: auto;
1346 }
1347}
1348
1349/**
1350 * Chooser Dialogues (moodle-core-chooserdialogue)
1351 *
1352 * This CSS belong to the chooser dialogue which should work both with, and
1353 * without javascript enabled
1354 */
1355/* Hide the dialog and it's title */
1356.chooserdialoguebody,
1357.choosertitle {
1358 display: none;
1359}
f4143537 1360
536f0460
DW
1361.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1362 margin: 0;
1363}
f4143537 1364
536f0460
DW
1365.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1366 padding: 0;
f4143537
DP
1367 background: #f2f2f2;
1368
536f0460
DW
1369 @include border-bottom-radius(10px);
1370}
1371/* Center the submit buttons within the area */
1372.choosercontainer #chooseform .submitbuttons {
1373 padding: 0.7em 0;
f2405a5f 1374 text-align: right;
536f0460
DW
1375}
1376/* Fixed for safari browser on iPhone4S with ios7@mixin */
f4143537 1377
536f0460 1378@media (max-height: 639px) {
a266ae30 1379 .ios .choosercontainer #chooseform .submitbuttons {
536f0460
DW
1380 padding: 45px 0;
1381 }
1382}
f4143537 1383
536f0460
DW
1384.choosercontainer #chooseform .submitbuttons input {
1385 min-width: 100px;
1386 margin: 0 0.5em;
1387}
1388/* Various settings for the options area */
1389.choosercontainer #chooseform .options {
1390 position: relative;
fde35b8f 1391 border-bottom: 1px solid #bbb;
536f0460
DW
1392}
1393/* Only set these options if we're showing the js container */
1394.jschooser .choosercontainer #chooseform .alloptions {
1395 overflow-x: hidden;
1396 overflow-y: auto;
e119bf6f 1397 max-width: 240px;
f4143537 1398
536f0460
DW
1399 .option {
1400 input[type=radio] {
1401 display: inline-block;
1402 }
f4143537 1403
536f0460
DW
1404 .typename {
1405 display: inline-block;
9f76a701 1406 width: 55%;
536f0460
DW
1407 }
1408 }
1409}
1410/* Settings for option rows and option subtypes */
1411.choosercontainer #chooseform .moduletypetitle,
1412.choosercontainer #chooseform .option,
1413.choosercontainer #chooseform .nonoption {
1414 margin-bottom: 0;
1415 padding: 0 1.6em 0 1.6em;
1416}
f4143537 1417
536f0460
DW
1418.choosercontainer #chooseform .moduletypetitle {
1419 text-transform: uppercase;
1420 padding-top: 1.2em;
1421 padding-bottom: 0.4em;
1422}
f4143537 1423
536f0460 1424.choosercontainer #chooseform .option .typename,
072364df 1425.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1426 padding: 0 0 0 0.5em;
1427}
f4143537 1428
e119bf6f
FM
1429.choosercontainer #chooseform .modicon + .typename {
1430 padding-left: 0;
1431}
536f0460 1432
536f0460 1433.choosercontainer #chooseform .option input[type=radio],
072364df 1434.choosercontainer #chooseform .option span.typename {
536f0460
DW
1435 vertical-align: middle;
1436}
f4143537 1437
536f0460
DW
1438.choosercontainer #chooseform .option label {
1439 display: block;
e119bf6f
FM
1440 margin: 0;
1441 padding: ($spacer / 2) 0;
fde35b8f 1442 border-bottom: 1px solid #fff;
536f0460 1443}
f4143537 1444
e119bf6f
FM
1445.choosercontainer #chooseform .option .icon {
1446 margin: 0;
1447 padding: 0 $spacer;
1448}
f4143537 1449
536f0460
DW
1450.choosercontainer #chooseform .nonoption {
1451 padding-left: 2.7em;
1452 padding-top: 0.3em;
1453 padding-bottom: 0.1em;
1454}
f4143537 1455
536f0460
DW
1456.choosercontainer #chooseform .subtype {
1457 margin-bottom: 0;
1458 padding: 0 1.6em 0 3.2em;
1459}
f4143537 1460
536f0460
DW
1461.choosercontainer #chooseform .subtype .typename {
1462 margin: 0 0 0 0.2em;
1463}
1464/* The instruction/help area */
1465.jschooser .choosercontainer #chooseform .instruction,
1466.jschooser .choosercontainer #chooseform .typesummary {
9cb41231 1467 display: none;
536f0460
DW
1468 position: absolute;
1469 top: 0;
1470 right: 0;
1471 bottom: 0;
e119bf6f 1472 left: 240px;
536f0460
DW
1473 margin: 0;
1474 padding: 1.6em;
1475 background-color: #fff;
1476 overflow-x: hidden;
1477 overflow-y: auto;
1478 line-height: 2em;
1479}
1480/* Selected option settings */
1481.jschooser .choosercontainer #chooseform .instruction,
1482.choosercontainer #chooseform .selected .typesummary {
1483 display: block;
1484}
f4143537 1485
536f0460
DW
1486.choosercontainer #chooseform .selected {
1487 background-color: #fff;
e119bf6f
FM
1488 margin-top: -1px;
1489 padding-top: 1px;
1490}
f4143537 1491
ba252fca
FM
1492
1493@include media-breakpoint-down(xs) {
1494 .jsenabled .choosercontainer #chooseform .alloptions {
1495 max-width: 100%;
1496 }
f4143537 1497
ba252fca
FM
1498 .jsenabled .choosercontainer #chooseform .instruction,
1499 .jsenabled .choosercontainer #chooseform .typesummary {
f4143537 1500 position: static;
ba252fca
FM
1501 }
1502}
1503
05b27f21
MM
1504/**
1505 * Module chooser dialogue (moodle-core-chooserdialogue)
1506 *
1507 * This CSS belong to the chooser dialogue which should work both with, and
1508 * without javascript enabled
1509 */
1510.modchooser .modal-body {
1511 padding: 0;
1512 height: 590px;
1513 overflow-y: auto;
1514
1515 .loading-icon {
1516 opacity: 1;
1517 .icon {
1518 display: block;
1519 font-size: 3em;
1520 height: 1em;
1521 width: 1em;
1522 margin: 5em auto;
1523 }
1524 }
1525}
1526
1527.modchoosercontainer.noscroll {
1528 overflow-y: hidden;
1529}
1530
1531.modchoosercontainer .optionscontainer {
1532 overflow-x: hidden;
1533 .option {
1534 // Six items per line.
1535 flex-basis: 16%;
1536 .optionactions {
1537 .optionaction {
1538 cursor: pointer;
1539 margin: 0.2rem;
1540 color: $gray-600;
1541 i {
1542 margin: 0;
1543 }
1544 }
1545 }
1546 .optioninfo {
1547 a {
1548 color: $gray-700;
1549 &:hover {
1550 text-decoration: none;
1551 }
1552 .optionname {
1553 margin-top: 0.5em;
1554 }
1555 .optionicon {
1556 .icon {
1557 margin: 0;
1558 padding: 0;
1559 width: 32px;
1560 height: 32px;
1561 font-size: 32px;
1562 }
1563 }
1564 }
1565 }
1566 }
1567}
1568
1569.modchooser .modal-body .optionsummary {
1570 background-color: $white;
1571 overflow-x: hidden;
1572 overflow-y: auto;
1573 line-height: 2em;
1574 height: 590px;
1575
1576 .content {
1577 overflow-y: auto;
1578 .heading {
1579 .icon {
1580 height: 32px;
1581 width: 32px;
1582 font-size: 32px;
1583 padding: 0;
1584 }
1585 }
1586 }
1587
1588 .actions {
1589 border-top: 1px solid $gray-300;
1590 background: $white;
1591 }
1592}
1593
1594@include media-breakpoint-down(lg) {
1595 .modchoosercontainer .optionscontainer .option {
1596 // Five items per line.
1597 flex-basis: 20%;
1598 }
1599}
1600
1601@include media-breakpoint-down(xs) {
1602 .path-course-view .modal-dialog.modal-lg,
1603 .path-course-view .modal-content,
1604 .modchooser .modal-body,
1605 .modchooser .modal-body .carousel,
1606 .modchooser .modal-body .carousel-inner,
1607 .modchooser .modal-body .carousel-item,
1608 .modchooser .modal-body .optionsummary,
1609 .modchoosercontainer,
1610 .optionscontainer {
1611 height: 100%;
1612 }
1613 .path-course-view .modal-dialog.modal-lg {
1614 margin: 0;
1615 }
1616 .modchoosercontainer .optionscontainer .option {
1617 // Four items per line.
1618 flex-basis: 25%;
1619 }
1620}
1621
536f0460
DW
1622/* Form element: listing */
1623.formlistingradio {
1624 padding-bottom: 25px;
1625 padding-right: 10px;
1626}
f4143537 1627
536f0460
DW
1628.formlistinginputradio {
1629 float: left;
1630}
f4143537 1631
536f0460
DW
1632.formlistingmain {
1633 min-height: 225px;
1634}
f4143537 1635
536f0460
DW
1636.formlisting {
1637 position: relative;
1638 margin: 15px 0;
1639 padding: 1px 19px 14px;
1640 background-color: white;
f4143537
DP
1641 border: 1px solid #ddd;
1642
536f0460
DW
1643 @include border-radius(4px);
1644}
f4143537 1645
536f0460
DW
1646.formlistingmore {
1647 position: absolute;
1648 cursor: pointer;
1649 bottom: -1px;
1650 right: -1px;
1651 padding: 3px 7px;
1652 font-size: 12px;
1653 font-weight: bold;
f4143537 1654 background-color: whitesmoke;
536f0460 1655 border: 1px solid #ddd;
f4143537
DP
1656 color: #9da0a4;
1657
536f0460
DW
1658 @include border-radius(4px 0 4px 0);
1659}
f4143537 1660
536f0460
DW
1661.formlistingall {
1662 margin: 15px 0;
1663 padding: 0;
f4143537 1664
536f0460
DW
1665 @include border-radius(4px);
1666}
f4143537 1667
536f0460
DW
1668.formlistingrow {
1669 cursor: pointer;
1670 border-bottom: 1px solid;
f4143537
DP
1671 border-color: #e1e1e8;
1672 border-left: 1px solid #e1e1e8;
1673 border-right: 1px solid #e1e1e8;
1674 background-color: #f7f7f9;
1675
536f0460
DW
1676 @include border-radius(0 0 4px 4px);
1677 padding: 6px;
1678 top: 50%;
1679 left: 50%;
1680 min-height: 34px;
1681 float: left;
1682 width: 150px;
1683}
f4143537 1684
536f0460
DW
1685body.jsenabled .formlistingradio {
1686 display: none;
1687}
f4143537 1688
536f0460
DW
1689body.jsenabled .formlisting {
1690 display: block;
1691}
1692
536f0460 1693a.criteria-action {
fde35b8f 1694 padding: 0 3px;
536f0460
DW
1695 float: right;
1696}
f4143537 1697
536f0460
DW
1698div.criteria-description {
1699 padding: 10px 15px;
fde35b8f 1700 margin: 5px 0;
536f0460 1701 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1702 border: 1px solid #eee;
536f0460 1703}
f4143537 1704
536f0460
DW
1705ul.badges {
1706 margin: 0;
1707 list-style: none;
1708}
f4143537 1709
536f0460
DW
1710.badges li {
1711 position: relative;
1712 display: inline-block;
1713 padding-top: 1em;
1714 text-align: center;
1715 vertical-align: top;
1716 width: 150px;
1717}
f4143537 1718
536f0460
DW
1719.badges li .badge-name {
1720 display: block;
1721 padding: 5px;
1722}
f4143537 1723
536f0460
DW
1724.badges li > img {
1725 position: absolute;
1726}
f4143537 1727
536f0460
DW
1728.badges li .badge-image {
1729 width: 100px;
1730 height: 100px;
1731 left: 10px;
fde35b8f 1732 top: 0;
536f0460
DW
1733 z-index: 1;
1734}
f4143537 1735
536f0460
DW
1736.badges li .badge-actions {
1737 position: relative;
1738}
f4143537 1739
536f0460
DW
1740.badges li .expireimage {
1741 width: 100px;
1742 height: 100px;
1743 left: 25px;
fde35b8f 1744 top: 0;
536f0460
DW
1745 position: absolute;
1746 z-index: 10;
1747 opacity: 0.85;
1748}
1749
1750#badge-image {
1751 background-color: transparent;
1752 padding: 0;
1753 position: relative;
1754 min-width: 100px;
1755 width: 20%;
1756 display: inline-block;
1757 vertical-align: top;
1758 margin-top: 17px;
ff54d94b 1759 margin-bottom: 20px;
536f0460
DW
1760
1761 .expireimage {
1762 width: 100px;
1763 height: 100px;
fde35b8f
DP
1764 left: 0;
1765 top: 0;
536f0460
DW
1766 opacity: 0.85;
1767 position: absolute;
f4143537 1768 z-index: 10;
536f0460
DW
1769 }
1770
1771 .singlebutton {
1772 padding-top: 5px;
ff54d94b 1773 display: block;
536f0460 1774
ff54d94b
SL
1775 button {
1776 margin-left: 4px;
536f0460
DW
1777 }
1778 }
1779}
f4143537 1780
536f0460
DW
1781#badge-details {
1782 display: inline-block;
1783 width: 79%;
1784}
1785
1786#badge-overview dl,
1787#badge-details dl {
1788 margin: 0;
1789
1790 dt,
1791 dd {
1792 vertical-align: top;
1793 padding: 3px 0;
1794 }
f4143537 1795
536f0460
DW
1796 dt {
1797 clear: both;
1798 display: inline-block;
1799 width: 20%;
1800 min-width: 100px;
1801 }
f4143537 1802
536f0460
DW
1803 dd {
1804 display: inline-block;
1805 width: 79%;
1806 margin-left: 1%;
1807 }
1808}
1809
1810.badge-profile {
1811 vertical-align: top;
1812}
f4143537 1813
536f0460 1814.connected {
43817397 1815 color: map-get($theme-colors, 'success');
536f0460 1816}
f4143537 1817
536f0460 1818.notconnected {
43817397 1819 color: map-get($theme-colors, 'danger');
536f0460 1820}
f4143537 1821
536f0460 1822.connecting {
43817397 1823 color: map-get($theme-colors, 'warning');
536f0460 1824}
f4143537 1825
536f0460
DW
1826#page-badges-award .recipienttable tr td {
1827 vertical-align: top;
1828}
f4143537 1829
536f0460
DW
1830#page-badges-award .recipienttable tr td.actions .actionbutton {
1831 margin: 0.3em 0;
1832 padding: 0.5em 0;
1833 width: 100%;
1834}
f4143537 1835
536f0460
DW
1836#page-badges-award .recipienttable tr td.existing,
1837#page-badges-award .recipienttable tr td.potential {
1838 width: 42%;
1839}
1840
1841#issued-badge-table .activatebadge {
1842 display: inline-block;
1843}
f4143537 1844
536f0460
DW
1845.statusbox.active {
1846 background-color: $state-success-bg;
1847}
f4143537 1848
536f0460
DW
1849.statusbox.inactive {
1850 background-color: $state-warning-bg;
1851}
f4143537 1852
536f0460
DW
1853.statusbox {
1854 text-align: center;
1855 margin-bottom: 5px;
1856 padding: 5px;
1857}
f4143537 1858
536f0460
DW
1859.statusbox .activatebadge {
1860 display: inline-block;
1861}
f4143537
DP
1862
1863.statusbox .activatebadge input[type=submit] {
536f0460
DW
1864 margin: 3px;
1865}
f4143537 1866
536f0460 1867.activatebadge {
fde35b8f 1868 margin: 0;
536f0460
DW
1869 text-align: left;
1870 vertical-align: middle;
1871}
f4143537 1872
536f0460
DW
1873img#persona_signin {
1874 cursor: pointer;
1875}
f4143537 1876
536f0460
DW
1877.addcourse {
1878 float: right;
1879}
f4143537 1880
536f0460
DW
1881.invisiblefieldset {
1882 display: inline;
536f0460
DW
1883 padding: 0;
1884 border-width: 0;
1885}
f4143537 1886
b71c82ad
FM
1887/** Page header */
1888#page-header {
1889 .logo {
1890 margin: $spacer 0;
7ad1d2da 1891 img {
0d5f5f73 1892 max-height: 75px;
7ad1d2da 1893 }
b71c82ad 1894 }
536f0460
DW
1895}
1896
ed0e21c0
BB
1897/** Navbar logo. */
1898nav.navbar .logo img {
1899 max-height: 35px;
5f18da12
FM
1900}
1901
536f0460
DW
1902/** Header-bar styles **/
1903.page-context-header {
1904 // We need to be explicit about the height of the header.
1905 $pageHeaderHeight: 140px;
1906
1907 // Do not remove these rules.
1908 overflow: hidden;
1909
1910 .page-header-image,
1911 .page-header-headings {
b167b415 1912 float: left;
536f0460
DW
1913 display: block;
1914 position: relative;
1915 }
f4143537 1916
536f0460 1917 .page-header-image {
536f0460
DW
1918 margin-right: 1em;
1919 margin-bottom: 1em;
1920 }
536f0460
DW
1921
1922 .page-header-headings,
1923 .header-button-group {
1924 position: relative;
1925 line-height: 24px;
1926 vertical-align: middle;
1927 }
1928
1929 .header-button-group {
1930 display: block;
1931 float: left;
f4143537 1932
536f0460
DW
1933 a {
1934 position: relative;
1935
1936 // Don't touch it unless you know exactly what you are doing.
1937 top: -0.4em;
1938 }
1939 }
1940}
1941
536f0460
DW
1942ul.dragdrop-keyboard-drag li {
1943 list-style-type: none;
1944}
1945
536f0460
DW
1946a.disabled:hover,
1947a.disabled {
1948 text-decoration: none;
1949 cursor: default;
1950 font-style: italic;
1951 color: #808080;
1952}
f4143537 1953
536f0460 1954body.lockscroll {
9cb41231
DP
1955 height: 100%;
1956 overflow: hidden;
536f0460
DW
1957}
1958
1959.progressbar_container {
1960 max-width: 500px;
1961 margin: 0 auto;
1962}
1963
1964/* IE10 only fix for calendar titling */
1965.ie10 .yui3-calendar-header-label {
1966 display: inline-block;
1967}
1968
1969dd:before,
1970dd:after {
9cb41231
DP
1971 display: block;
1972 content: " ";
536f0460 1973}
f4143537 1974
536f0460 1975dd:after {
9cb41231 1976 clear: both;
536f0460
DW
1977}
1978
1979// Active tabs with links should have a different
1980// cursor to indicate they are clickable.
1981.nav-tabs > .active > a[href],
1982.nav-tabs > .active > a[href]:hover,
1983.nav-tabs > .active > a[href]:focus {
1984 cursor: pointer;
1985}
1986
1987.inplaceeditable {
536f0460
DW
1988 &.inplaceeditingon {
1989 position: relative;
1990
1991 .editinstructions {
1992 margin-top: -30px;
1993 font-weight: normal;
1994 margin-right: 0;
1995 margin-left: 0;
1996 left: 0;
1997 right: auto;
1998 white-space: nowrap;
1999 }
2000
2001 input {
2002 width: 330px;
536f0460
DW
2003 vertical-align: text-bottom;
2004 margin-bottom: 0;
2005 }
2006
2007 select {
2008 margin-bottom: 0;
2009 }
2010 }
2011
2012 .quickediticon img {
2013 opacity: 0.2;
2014 }
2015
2016 .quickeditlink {
2017 color: inherit;
2018 text-decoration: inherit;
2019 }
2020
2021 &:hover .quickeditlink .quickediticon img,
2022 .quickeditlink:focus .quickediticon img {
2023 opacity: 1;
2024 }
2025
2026 &.inplaceeditable-toggle .quickediticon {
2027 display: none;
2028 }
fb5bbf14
AN
2029
2030 &.inplaceeditable-autocomplete {
2031 display: block;
2032 }
536f0460
DW
2033}
2034
2035h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
2036 margin-top: -20px;
2037}
89d9895b
FM
2038
2039/** Chart area. */
2040.chart-area {
2041
2042 .chart-table-data {
2043 display: none;
2044 }
2045
2046 .chart-table {
2047 .chart-output-htmltable caption {
2048 white-space: nowrap;
2049 }
2050 /** When accessible, we display the table only. */
2051 &.accesshide {
2052 .chart-table-expand {
2053 display: none;
2054 }
2055 .chart-table-data {
2056 display: block;
2057 }
2058 }
2059 }
2060}
2061
536f0460
DW
2062// Reset for ul.
2063ul {
2064 padding-left: 1rem;
2065}
b843914d
FM
2066
2067/* YUI 2 Tree View */
2068/*rtl:raw:
2069.ygtvtn,
2070.ygtvtm,
2071.ygtvtmh,
2072.ygtvtmhh,
2073.ygtvtp,
2074.ygtvtph,
2075.ygtvtphh,
2076.ygtvln,
2077.ygtvlm,
2078.ygtvlmh,
2079.ygtvlmhh,
2080.ygtvlp,
2081.ygtvlph,
2082.ygtvlphh,
2083.ygtvdepthcell,
2084.ygtvok,
2085.ygtvok:hover,
2086.ygtvcancel,
2087.ygtvcancel:hover {
2088 background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
2089}
2090*/
963ba889
RW
2091
2092.hover-tooltip-container {
2093 position: relative;
2094
2095 .hover-tooltip {
2096 opacity: 0;
2097 visibility: hidden;
2098 position: absolute;
1fb687ea 2099 /*rtl:ignore*/
963ba889
RW
2100 left: 50%;
2101 top: calc(-50% - 5px);
2102 transform: translate(-50%, -50%);
2103 background-color: #fff;
2104 border: 1px solid rgba(0, 0, 0, .2);
2105 border-radius: .3rem;
2106 box-sizing: border-box;
2107 padding: 5px;
2108 white-space: nowrap;
2109 transition: opacity 0.15s, visibility 0.15s;
2110 z-index: 1000;
2111
2112 &:before {
2113 content: '';
2114 display: inline-block;
2115 border-left: 8px solid transparent;
2116 border-right: 8px solid transparent;
2117 border-top: 8px solid rgba(0, 0, 0, .2);
2118 position: absolute;
2119 bottom: -8px;
2120 left: calc(50% - 8px);
2121 }
2122
2123 &:after {
2124 content: '';
2125 display: inline-block;
2126 border-left: 7px solid transparent;
2127 border-right: 7px solid transparent;
2128 border-top: 7px solid #fff;
2129 position: absolute;
2130 bottom: -6px;
2131 left: calc(50% - 7px);
2132 z-index: 2;
2133 }
2134 }
2135
2136 &:hover {
2137 .hover-tooltip {
2138 opacity: 1;
2139 visibility: visible;
2140 transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2141 }
2142 }
2143}
99061152
DW
2144
2145#region-flat-nav {
2146 padding-right: 0;
2147 padding-left: 0;
2148 .nav {
2149 margin-right: $grid-gutter-width / 2;
2150 background-color: $card-bg;
2151 }
2152 @include media-breakpoint-down(sm) {
2153 .nav {
2154 margin-top: $grid-gutter-width;
2155 margin-right: 0;
2156 }
2157 }
2158}
b45fdc68 2159
2fd7cdbe
JO
2160// Footer link colour was added to allow the colour of footer links to be changed,
2161// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2162// rather than being specific to the footer. This is kept for backwards compatibility.
2163$footer-link-color: $bg-inverse-link-color !default;
b45fdc68
DW
2164#page-footer a {
2165 color: $footer-link-color;
2fd7cdbe
JO
2166 text-decoration: underline;
2167 .icon {
2168 color: $footer-link-color;
2169 }
2170}
2171
2172.bg-inverse a {
2173 color: $bg-inverse-link-color;
2174 text-decoration: underline;
2175 .icon {
2176 color: $bg-inverse-link-color;
2177 }
b45fdc68 2178}
70fda55e 2179
15de9ec8
LB
2180.sitelink {
2181 img {
2182 width: 112px;
2183 }
2184}
2185
70fda55e
DW
2186// Make links in a menu clickable anywhere in the row.
2187.dropdown-item a {
2188 display: block;
2189 width: 100%;
2190 color: $body-color;
2191}
20e6ece8
DW
2192.dropdown-item:active a {
2193 color: $dropdown-link-active-color;
2194}
6e79ea58 2195
207136f2
DW
2196.competency-tree {
2197 ul {
2198 padding-left: 1.5rem;
2199 }
2200}
24299774 2201
4b80e95c
NK
2202.sr-only-focusable {
2203 &:active,
2204 &:focus {
2205 z-index: $zindex-navbar-fixed + 1;
2206 position: fixed;
2207 background: #fff;
2208 padding: 7px;
2209 left: 0;
2210 top: 0;
2211 }
2212}
5ca142dc
RW
2213
2214[data-drag-type="move"] {
2215 cursor: move;
f7d1a24e 2216 touch-action: none;
5ca142dc 2217}
f6e8cc83
RW
2218
2219.clickable {
2220 cursor: pointer;
2221}
63cb267c
SL
2222
2223.overlay-icon-container {
2224 position: absolute;
2225 top: 0;
2226 left: 0;
2227 width: 100%;
2228 height: 100%;
2229 background-color: rgba(255, 255, 255, 0.6);
2230
2231 .loading-icon {
2232 position: absolute;
2233 top: 50%;
2234 left: 50%;
2235 transform: translate(-50%, -50%);
2236
2237 .icon {
99df0518
RW
2238 height: 30px;
2239 width: 30px;
2240 font-size: 30px;
63cb267c
SL
2241 }
2242 }
2243}
3ec69c2e 2244
7b87d98d 2245.open.atto_menu > .dropdown-menu {
3ec69c2e
BB
2246 display: block;
2247}
1b217025
BB
2248div.editor_atto_toolbar button .icon {
2249 color: $gray-700;
2250}
2251.w-auto {
2252 width: auto;
2253}
2254
edd7fa33
RW
2255.bg-pulse-grey {
2256 animation: bg-pulse-grey 2s infinite linear;
2257}
2258
2259@keyframes bg-pulse-grey {
2260 0% {
2261 background-color: $gray-100;
2262 }
2263 50% {
2264 background-color: darken($gray-100, 5%);
2265 }
2266 100% {
2267 background-color: $gray-100;
2268 }
2269}
2270
2d41f5b2
RW
2271@each $size, $length in $spacers {
2272 .line-height-#{$size} {
2273 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2274 }
296ff0a7
RW
2275}
2276
2277.dir-rtl {
2278 .dir-rtl-hide {
2279 display: none;
2280 }
2281}
2282
2283.dir-ltr {
2284 .dir-ltr-hide {
2285 display: none;
2286 }
970bb713 2287}
a69193fa 2288
356bfb69
BB
2289.paged-content-page-container {
2290 min-height: 3.125rem;
2291}
c483a8ee 2292
35221a2e 2293body.h5p-embed {
5092133b
BB
2294 #page-content {
2295 display: inherit;
2296 }
35221a2e
SA
2297 #maincontent {
2298 display: none;
2299 }
2300 .h5pmessages {
2301 min-height: 230px; // This should be the same height as default core_h5p iframes.
2302 }
2303}
2304
c483a8ee
RW
2305.text-decoration-none {
2306 text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
12d23810
RW
2307}
2308
b53f15b1
RW
2309.colour-inherit {
2310 color: inherit !important; /* stylelint-disable-line declaration-no-important */
2311}
2312
12d23810
RW
2313.position-right {
2314 right: 0 !important; /* stylelint-disable-line declaration-no-important */
20e6ece8 2315}
3edde4fb
RW
2316
2317.overflow-hidden {
2318 overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2319}
48507e16
BB
2320
2321.text-break {
2322 overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2323}
c516fc11
BB
2324
2325.z-index-1 {
2326 z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2327}
10425e73
BB
2328
2329// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2330.float-left {
2331 float: left !important; /* stylelint-disable-line declaration-no-important */
2332}
2333.float-right {
2334 float: right !important; /* stylelint-disable-line declaration-no-important */
2335}
db65ba45 2336
db65ba45
RW
2337// Emoji picker.
2338$picker-width: 350px !default;
2339$picker-width-xs: 320px !default;
2340$picker-height: 400px !default;
2341$picker-row-height: 40px !default;
2342$picker-emoji-button-size: 40px !default;
2343$picker-emoji-button-font-size: 24px !default;
2344$picker-emoji-category-count: 9 !default;
2345$picker-emojis-per-row: 7 !default;
2346
2347.emoji-picker {
2348 width: $picker-width;
2349 height: $picker-height;
2350
2351 .category-button {
2352 padding: .375rem 0;
2353 height: 100%;
2354 width: $picker-width / $picker-emoji-category-count;
2355 border-top: none;
2356 border-left: none;
2357 border-right: none;
2358 border-bottom: 2px solid transparent;
2359
2360 &.selected {
2361 border-bottom: 2px solid map-get($theme-colors, 'primary');
2362 }
2363 }
2364
2365 .emojis-container,
2366 .search-results-container {
2367 min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2368 }
2369
2370 .picker-row {
2371 height: $picker-row-height;
2372
2373 .category-name {
2374 line-height: $picker-row-height;
2375 }
2376
2377 .emoji-button {
2378 height: $picker-emoji-button-size;
2379 width: $picker-emoji-button-size;
2380 line-height: $picker-emoji-button-size;
2381 font-size: $picker-emoji-button-font-size;
2382 overflow: hidden;
2383
2384 @include hover-focus {
2385 color: inherit;
2386 text-decoration: none;
2387 }
2388 }
2389 }
2390
2391 .emoji-preview {
2392 height: $picker-row-height;
2393 font-size: $picker-row-height;
2394 line-height: $picker-row-height;
2395 }
2396
2397 .emoji-short-name {
2398 line-height: $picker-row-height / 2;
2399 }
2400
2401 @include media-breakpoint-down(xs) {
2402 width: $picker-width-xs;
2403 }
2404}
75962db9
RW
2405
2406.emoji-auto-complete {
2407 height: $picker-row-height;
2408
2409 .btn.btn-link.btn-icon.emoji-button {
2410 height: $picker-emoji-button-size;
2411 width: $picker-emoji-button-size;
2412 line-height: $picker-emoji-button-size;
2413 font-size: $picker-emoji-button-font-size;
2414
2415 &.active {
2416 background-color: $gray-200;
2417 }
2418 }
2419}
224ea04e
AN
2420
2421.toast-wrapper {
2422 max-width: $toast-max-width;
4e796e22 2423 max-height: 0;
224ea04e
AN
2424 // Place these above any modals and other elements.
2425 z-index: 1051;
4d440943
AN
2426
2427 > :first-child {
2428 margin-top: $spacer;
2429 }
224ea04e 2430}