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