MDL-66999 theme_boost: @extend get colours from map
[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
DW
992#page-enrol-users {
993 .enrol_user_buttons {
058f2fb6 994 text-align: right;
f4143537 995
536f0460 996 }
f4143537 997
536f0460
DW
998 #filterform {
999 @extend .card;
058f2fb6 1000 @extend .card-block;
536f0460 1001 }
536f0460 1002}
f4143537 1003
536f0460 1004#page-enrol-users .enrol-users-page-action input {
f4143537 1005 margin-left: 0;
536f0460 1006}
f4143537 1007
536f0460 1008.corelightbox {
f4143537 1009 background-color: #ccc;
536f0460
DW
1010 position: absolute;
1011 top: 0;
1012 left: 0;
1013 width: 100%;
1014 height: 100%;
1015 text-align: center;
1016}
f4143537 1017
536f0460
DW
1018.corelightbox img {
1019 position: fixed;
1020 top: 50%;
1021 left: 50%;
1022}
1023
1024.mod-indent-outer {
1025 display: table;
1026}
f4143537 1027
536f0460
DW
1028.mod-indent {
1029 display: table-cell;
1030}
f4143537 1031
536f0460 1032.label .mod-indent {
f4143537
DP
1033 float: left;
1034 padding-top: 20px;
536f0460 1035}
536f0460
DW
1036$mod-indent-size: 30px;
1037/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
f4143537 1038
536f0460 1039@for $i from 1 through 16 {
9cb41231 1040 $width: ($i * $mod-indent-size);
536f0460 1041
9cb41231
DP
1042 .mod-indent-#{$i} {
1043 width: $width;
1044 }
536f0460 1045}
f4143537 1046
536f0460 1047.mod-indent-huge {
9cb41231 1048 width: (16 * $mod-indent-size);
536f0460
DW
1049}
1050
1051/* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
1052.resourcecontent .mediaplugin_mp3 object {
1053 height: 25px;
f4143537 1054 width: 600px;
536f0460 1055}
f4143537 1056
536f0460 1057.resourcecontent audio.mediaplugin_html5audio {
f4143537 1058 width: 600px;
536f0460
DW
1059}
1060/** Large resource images should avoid hidden overflow **/
1061.resourceimage {
1062 max-width: 100%;
1063}
1064/* Audio player size in 'inline' mode (can only change width, as above) */
1065.mediaplugin_mp3 object {
1066 height: 15px;
f4143537 1067 width: 300px;
536f0460 1068}
f4143537 1069
536f0460 1070audio.mediaplugin_html5audio {
f4143537 1071 width: 300px;
536f0460
DW
1072}
1073/* TinyMCE moodle media preview frame should not have padding */
1074.core_media_preview.pagelayout-embedded #content {
1075 padding: 0;
1076}
f4143537 1077
536f0460
DW
1078.core_media_preview.pagelayout-embedded #maincontent {
1079 height: 0;
1080}
f4143537 1081
536f0460
DW
1082body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
1083 padding: 0;
1084 margin: 0;
1085 min-width: 0;
1086 background: none;
1087}
f4143537 1088
536f0460
DW
1089.path-rating .ratingtable {
1090 width: 100%;
1091 margin-bottom: 1em;
1092}
f4143537 1093
536f0460
DW
1094.path-rating .ratingtable th.rating {
1095 width: 100%;
1096}
f4143537 1097
536f0460
DW
1098.path-rating .ratingtable td.rating,
1099.path-rating .ratingtable td.time {
1100 white-space: nowrap;
1101 text-align: center;
1102}
f4143537 1103
536f0460
DW
1104/* Moodle Dialogue Settings (moodle-core-dialogue) */
1105.moodle-dialogue-base .moodle-dialogue-lightbox {
e72cb21d 1106 background-color: $gray;
536f0460 1107}
f4143537 1108
bfe00e67
BB
1109// Prevent adding backdrops to popups in popups.
1110.pagelayout-popup {
1111 .moodle-dialogue-base {
1112 .moodle-dialogue-lightbox {
1113 background-color: transparent;
1114 }
1115 .moodle-dialogue {
1116 box-shadow: $popover-box-shadow;
1117 }
1118 }
1119}
1120
536f0460
DW
1121.moodle-dialogue-base .hidden,
1122.moodle-dialogue-base .moodle-dialogue-hidden {
1123 display: none;
1124}
f4143537 1125
536f0460
DW
1126.no-scrolling {
1127 overflow: hidden;
1128}
f4143537 1129
536f0460 1130.moodle-dialogue-base .moodle-dialogue-fullscreen {
fde35b8f
DP
1131 left: 0;
1132 top: 0;
1133 right: 0;
536f0460
DW
1134 bottom: -50px;
1135 position: fixed;
1136}
f4143537 1137
536f0460
DW
1138.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1139 overflow: auto;
1140}
f4143537 1141
536f0460
DW
1142.moodle-dialogue-base .moodle-dialogue-fullscreen .closebutton {
1143 width: 28px;
1144 height: 16px;
1145 background-size: 100%;
1146}
f4143537 1147
bffc0ef1
FM
1148.moodle-dialogue-base .moodle-dialogue-wrap {
1149 background-color: #fff;
1150 border: 1px solid #ccc;
1151}
f4143537 1152
181179de
DW
1153// Show is a bootstrap 2 class - but we use it for modals. We don't want to enable it everywhere because they removed
1154// it for a reason (conflicts with jquery .show()).
1155.modal.show {
1156 display: block;
1157}
1158
25f90896
DW
1159.moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
1160 @extend .modal-content;
536f0460 1161}
f4143537 1162
25f90896
DW
1163.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {
1164 @extend .modal-header;
536f0460 1165}
f4143537 1166
536f0460 1167.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd.yui3-widget-hd {
25f90896 1168 // Undo some YUI damage.
88af0208 1169 min-height: 3rem;
25f90896 1170 color: initial;
25f90896
DW
1171 background: initial;
1172 font-size: 1.5rem;
1173 line-height: 1.5;
536f0460 1174}
f4143537 1175
536f0460 1176.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd h1 {
25f90896 1177 @extend .modal-title;
3ec69c2e 1178 font-size: 1.5rem;
536f0460 1179}
f4143537 1180
536f0460 1181.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {
85dd7c6f
NK
1182 /*rtl:raw:
1183 left: 0;
1184 right: auto;
1185 */
5142f564 1186 padding: $spacer;
536f0460 1187}
f4143537 1188
536f0460 1189.moodle-dialogue-base .closebutton {
25f90896 1190 @extend .close;
25f90896 1191 box-shadow: none;
5142f564
FM
1192 &::after {
1193 content: "×";
1194 }
536f0460 1195}
f4143537 1196
25f90896 1197.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-bd {
3ec69c2e 1198 padding: 0.5rem;
536f0460
DW
1199}
1200
1201.moodle-dialogue-base .moodle-dialogue-fullscreen .moodle-dialogue-content {
1202 overflow: auto;
1203 position: absolute;
fde35b8f 1204 top: 0;
536f0460 1205 bottom: 50px;
fde35b8f
DP
1206 left: 0;
1207 right: 0;
1208 margin: 0;
1209 border: 0;
536f0460 1210}
f4143537 1211
536f0460
DW
1212.moodle-dialogue-exception .moodle-exception-param label {
1213 font-weight: bold;
1214}
f4143537 1215
536f0460 1216.moodle-dialogue-exception .param-stacktrace label {
f4143537 1217 background-color: #eee;
536f0460
DW
1218 border: 1px solid #ccc;
1219 border-bottom-width: 0;
1220}
f4143537 1221
536f0460
DW
1222.moodle-dialogue-exception .param-stacktrace pre {
1223 border: 1px solid #ccc;
1224 background-color: #fff;
1225}
f4143537 1226
536f0460
DW
1227.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1228 color: navy;
1229 font-size: $font-size-sm;
1230}
f4143537 1231
536f0460 1232.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
43817397 1233 color: map-get($theme-colors, 'warning');
536f0460
DW
1234 font-size: $font-size-sm;
1235}
f4143537 1236
536f0460
DW
1237.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1238 color: #333;
1239 font-size: 90%;
1240 border-bottom: 1px solid #eee;
1241}
f4143537 1242
536f0460 1243.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft {
25f90896
DW
1244 @extend .modal-footer;
1245}
f4143537 1246
bc8594bd
FM
1247.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft:empty {
1248 display: none;
1249}
f4143537 1250
25f90896
DW
1251.moodle-dialogue-base .moodle-dialogue .moodle-dialogue-content .moodle-dialogue-ft.yui3-widget-ft {
1252 // Undo some YUI damage.
1253 background: initial;
536f0460 1254}
f4143537 1255
536f0460 1256.moodle-dialogue-confirm .confirmation-message {
3ec69c2e 1257 margin: 0.5rem 0;
f2405a5f 1258}
f4143537 1259
536f0460 1260.moodle-dialogue-confirm .confirmation-dialogue input {
f4143537 1261 min-width: 80px;
536f0460 1262}
f4143537 1263
536f0460
DW
1264.moodle-dialogue-exception .moodle-exception-message {
1265 margin: 1em;
1266}
f4143537 1267
536f0460
DW
1268.moodle-dialogue-exception .moodle-exception-param {
1269 margin-bottom: 0.5em;
1270}
f4143537 1271
536f0460
DW
1272.moodle-dialogue-exception .moodle-exception-param label {
1273 width: 150px;
1274}
f4143537 1275
536f0460
DW
1276.moodle-dialogue-exception .param-stacktrace label {
1277 display: block;
1278 margin: 0;
1279 padding: 4px 1em;
1280}
f4143537 1281
536f0460
DW
1282.moodle-dialogue-exception .param-stacktrace pre {
1283 display: block;
1284 height: 200px;
1285 overflow: auto;
1286}
f4143537 1287
536f0460
DW
1288.moodle-dialogue-exception .param-stacktrace .stacktrace-file {
1289 display: inline-block;
1290 margin: 4px 0;
1291}
f4143537 1292
536f0460
DW
1293.moodle-dialogue-exception .param-stacktrace .stacktrace-line {
1294 display: inline-block;
1295 width: 50px;
1296 margin: 4px 1em;
1297}
f4143537 1298
536f0460
DW
1299.moodle-dialogue-exception .param-stacktrace .stacktrace-call {
1300 padding-left: 25px;
1301 margin-bottom: 4px;
1302 padding-bottom: 4px;
1303}
f4143537 1304
536f0460
DW
1305.moodle-dialogue .moodle-dialogue-bd .content-lightbox {
1306 opacity: 0.75;
1307 width: 100%;
1308 height: 100%;
1309 top: 0;
1310 left: 0;
1311 background-color: white;
1312 text-align: center;
1313 padding: 10% 0;
1314}
1315/* Apply a default max-height on tooltip text */
1316.moodle-dialogue .tooltiptext {
1317 max-height: 300px;
1318}
1319
1320.moodle-dialogue-base .moodle-dialogue.moodle-dialogue-tooltip {
1321 z-index: 3001;
1322
1323 .moodle-dialogue-bd {
1324 overflow: auto;
1325 }
1326}
1327
1328/**
1329 * Chooser Dialogues (moodle-core-chooserdialogue)
1330 *
1331 * This CSS belong to the chooser dialogue which should work both with, and
1332 * without javascript enabled
1333 */
1334/* Hide the dialog and it's title */
1335.chooserdialoguebody,
1336.choosertitle {
1337 display: none;
1338}
f4143537 1339
536f0460
DW
1340.moodle-dialogue.chooserdialogue .moodle-dialogue-content .moodle-dialogue-ft {
1341 margin: 0;
1342}
f4143537 1343
536f0460
DW
1344.chooserdialogue .moodle-dialogue-wrap .moodle-dialogue-bd {
1345 padding: 0;
f4143537
DP
1346 background: #f2f2f2;
1347
536f0460
DW
1348 @include border-bottom-radius(10px);
1349}
1350/* Center the submit buttons within the area */
1351.choosercontainer #chooseform .submitbuttons {
1352 padding: 0.7em 0;
f2405a5f 1353 text-align: right;
536f0460
DW
1354}
1355/* Fixed for safari browser on iPhone4S with ios7@mixin */
f4143537 1356
536f0460 1357@media (max-height: 639px) {
a266ae30 1358 .ios .choosercontainer #chooseform .submitbuttons {
536f0460
DW
1359 padding: 45px 0;
1360 }
1361}
f4143537 1362
536f0460
DW
1363.choosercontainer #chooseform .submitbuttons input {
1364 min-width: 100px;
1365 margin: 0 0.5em;
1366}
1367/* Various settings for the options area */
1368.choosercontainer #chooseform .options {
1369 position: relative;
fde35b8f 1370 border-bottom: 1px solid #bbb;
536f0460
DW
1371}
1372/* Only set these options if we're showing the js container */
1373.jschooser .choosercontainer #chooseform .alloptions {
1374 overflow-x: hidden;
1375 overflow-y: auto;
e119bf6f 1376 max-width: 240px;
f4143537 1377
536f0460
DW
1378 .option {
1379 input[type=radio] {
1380 display: inline-block;
1381 }
f4143537 1382
536f0460
DW
1383 .typename {
1384 display: inline-block;
9f76a701 1385 width: 55%;
536f0460
DW
1386 }
1387 }
1388}
1389/* Settings for option rows and option subtypes */
1390.choosercontainer #chooseform .moduletypetitle,
1391.choosercontainer #chooseform .option,
1392.choosercontainer #chooseform .nonoption {
1393 margin-bottom: 0;
1394 padding: 0 1.6em 0 1.6em;
1395}
f4143537 1396
536f0460
DW
1397.choosercontainer #chooseform .moduletypetitle {
1398 text-transform: uppercase;
1399 padding-top: 1.2em;
1400 padding-bottom: 0.4em;
1401}
f4143537 1402
536f0460 1403.choosercontainer #chooseform .option .typename,
072364df 1404.choosercontainer #chooseform .nonoption .typename {
536f0460
DW
1405 padding: 0 0 0 0.5em;
1406}
f4143537 1407
e119bf6f
FM
1408.choosercontainer #chooseform .modicon + .typename {
1409 padding-left: 0;
1410}
536f0460 1411
536f0460 1412.choosercontainer #chooseform .option input[type=radio],
072364df 1413.choosercontainer #chooseform .option span.typename {
536f0460
DW
1414 vertical-align: middle;
1415}
f4143537 1416
536f0460
DW
1417.choosercontainer #chooseform .option label {
1418 display: block;
e119bf6f
FM
1419 margin: 0;
1420 padding: ($spacer / 2) 0;
fde35b8f 1421 border-bottom: 1px solid #fff;
536f0460 1422}
f4143537 1423
e119bf6f
FM
1424.choosercontainer #chooseform .option .icon {
1425 margin: 0;
1426 padding: 0 $spacer;
1427}
f4143537 1428
536f0460
DW
1429.choosercontainer #chooseform .nonoption {
1430 padding-left: 2.7em;
1431 padding-top: 0.3em;
1432 padding-bottom: 0.1em;
1433}
f4143537 1434
536f0460
DW
1435.choosercontainer #chooseform .subtype {
1436 margin-bottom: 0;
1437 padding: 0 1.6em 0 3.2em;
1438}
f4143537 1439
536f0460
DW
1440.choosercontainer #chooseform .subtype .typename {
1441 margin: 0 0 0 0.2em;
1442}
1443/* The instruction/help area */
1444.jschooser .choosercontainer #chooseform .instruction,
1445.jschooser .choosercontainer #chooseform .typesummary {
9cb41231 1446 display: none;
536f0460
DW
1447 position: absolute;
1448 top: 0;
1449 right: 0;
1450 bottom: 0;
e119bf6f 1451 left: 240px;
536f0460
DW
1452 margin: 0;
1453 padding: 1.6em;
1454 background-color: #fff;
1455 overflow-x: hidden;
1456 overflow-y: auto;
1457 line-height: 2em;
1458}
1459/* Selected option settings */
1460.jschooser .choosercontainer #chooseform .instruction,
1461.choosercontainer #chooseform .selected .typesummary {
1462 display: block;
1463}
f4143537 1464
536f0460
DW
1465.choosercontainer #chooseform .selected {
1466 background-color: #fff;
e119bf6f
FM
1467 margin-top: -1px;
1468 padding-top: 1px;
1469}
f4143537 1470
e119bf6f
FM
1471.chooserdialogue-course-modchooser .modicon .icon {
1472 width: 24px;
1473 height: 24px;
9d67a408 1474 font-size: 24px;
536f0460 1475}
ba252fca
FM
1476
1477@include media-breakpoint-down(xs) {
1478 .jsenabled .choosercontainer #chooseform .alloptions {
1479 max-width: 100%;
1480 }
f4143537 1481
ba252fca
FM
1482 .jsenabled .choosercontainer #chooseform .instruction,
1483 .jsenabled .choosercontainer #chooseform .typesummary {
f4143537 1484 position: static;
ba252fca
FM
1485 }
1486}
1487
536f0460
DW
1488/* Form element: listing */
1489.formlistingradio {
1490 padding-bottom: 25px;
1491 padding-right: 10px;
1492}
f4143537 1493
536f0460
DW
1494.formlistinginputradio {
1495 float: left;
1496}
f4143537 1497
536f0460
DW
1498.formlistingmain {
1499 min-height: 225px;
1500}
f4143537 1501
536f0460
DW
1502.formlisting {
1503 position: relative;
1504 margin: 15px 0;
1505 padding: 1px 19px 14px;
1506 background-color: white;
f4143537
DP
1507 border: 1px solid #ddd;
1508
536f0460
DW
1509 @include border-radius(4px);
1510}
f4143537 1511
536f0460
DW
1512.formlistingmore {
1513 position: absolute;
1514 cursor: pointer;
1515 bottom: -1px;
1516 right: -1px;
1517 padding: 3px 7px;
1518 font-size: 12px;
1519 font-weight: bold;
f4143537 1520 background-color: whitesmoke;
536f0460 1521 border: 1px solid #ddd;
f4143537
DP
1522 color: #9da0a4;
1523
536f0460
DW
1524 @include border-radius(4px 0 4px 0);
1525}
f4143537 1526
536f0460
DW
1527.formlistingall {
1528 margin: 15px 0;
1529 padding: 0;
f4143537 1530
536f0460
DW
1531 @include border-radius(4px);
1532}
f4143537 1533
536f0460
DW
1534.formlistingrow {
1535 cursor: pointer;
1536 border-bottom: 1px solid;
f4143537
DP
1537 border-color: #e1e1e8;
1538 border-left: 1px solid #e1e1e8;
1539 border-right: 1px solid #e1e1e8;
1540 background-color: #f7f7f9;
1541
536f0460
DW
1542 @include border-radius(0 0 4px 4px);
1543 padding: 6px;
1544 top: 50%;
1545 left: 50%;
1546 min-height: 34px;
1547 float: left;
1548 width: 150px;
1549}
f4143537 1550
536f0460
DW
1551body.jsenabled .formlistingradio {
1552 display: none;
1553}
f4143537 1554
536f0460
DW
1555body.jsenabled .formlisting {
1556 display: block;
1557}
1558
1559/* Badges styles */
1560table.collection {
1561 @extend .table;
1562 @extend .table-bordered;
1563 @extend .table-striped;
1564}
f4143537 1565
536f0460 1566a.criteria-action {
fde35b8f 1567 padding: 0 3px;
536f0460
DW
1568 float: right;
1569}
f4143537 1570
536f0460
DW
1571div.criteria-description {
1572 padding: 10px 15px;
fde35b8f 1573 margin: 5px 0;
536f0460 1574 background: none repeat scroll 0 0 #f9f9f9;
f4143537 1575 border: 1px solid #eee;
536f0460 1576}
f4143537 1577
536f0460
DW
1578ul.badges {
1579 margin: 0;
1580 list-style: none;
1581}
f4143537 1582
536f0460
DW
1583.badges li {
1584 position: relative;
1585 display: inline-block;
1586 padding-top: 1em;
1587 text-align: center;
1588 vertical-align: top;
1589 width: 150px;
1590}
f4143537 1591
536f0460
DW
1592.badges li .badge-name {
1593 display: block;
1594 padding: 5px;
1595}
f4143537 1596
536f0460
DW
1597.badges li > img {
1598 position: absolute;
1599}
f4143537 1600
536f0460
DW
1601.badges li .badge-image {
1602 width: 100px;
1603 height: 100px;
1604 left: 10px;
fde35b8f 1605 top: 0;
536f0460
DW
1606 z-index: 1;
1607}
f4143537 1608
536f0460
DW
1609.badges li .badge-actions {
1610 position: relative;
1611}
f4143537 1612
536f0460
DW
1613.badges li .expireimage {
1614 width: 100px;
1615 height: 100px;
1616 left: 25px;
fde35b8f 1617 top: 0;
536f0460
DW
1618 position: absolute;
1619 z-index: 10;
1620 opacity: 0.85;
1621}
1622
1623#badge-image {
1624 background-color: transparent;
1625 padding: 0;
1626 position: relative;
1627 min-width: 100px;
1628 width: 20%;
1629 display: inline-block;
1630 vertical-align: top;
1631 margin-top: 17px;
ff54d94b 1632 margin-bottom: 20px;
536f0460
DW
1633
1634 .expireimage {
1635 width: 100px;
1636 height: 100px;
fde35b8f
DP
1637 left: 0;
1638 top: 0;
536f0460
DW
1639 opacity: 0.85;
1640 position: absolute;
f4143537 1641 z-index: 10;
536f0460
DW
1642 }
1643
1644 .singlebutton {
1645 padding-top: 5px;
ff54d94b 1646 display: block;
536f0460 1647
ff54d94b
SL
1648 button {
1649 margin-left: 4px;
536f0460
DW
1650 }
1651 }
1652}
f4143537 1653
536f0460
DW
1654#badge-details {
1655 display: inline-block;
1656 width: 79%;
1657}
1658
1659#badge-overview dl,
1660#badge-details dl {
1661 margin: 0;
1662
1663 dt,
1664 dd {
1665 vertical-align: top;
1666 padding: 3px 0;
1667 }
f4143537 1668
536f0460
DW
1669 dt {
1670 clear: both;
1671 display: inline-block;
1672 width: 20%;
1673 min-width: 100px;
1674 }
f4143537 1675
536f0460
DW
1676 dd {
1677 display: inline-block;
1678 width: 79%;
1679 margin-left: 1%;
1680 }
1681}
1682
1683.badge-profile {
1684 vertical-align: top;
1685}
f4143537 1686
536f0460 1687.connected {
43817397 1688 color: map-get($theme-colors, 'success');
536f0460 1689}
f4143537 1690
536f0460 1691.notconnected {
43817397 1692 color: map-get($theme-colors, 'danger');
536f0460 1693}
f4143537 1694
536f0460 1695.connecting {
43817397 1696 color: map-get($theme-colors, 'warning');
536f0460 1697}
f4143537 1698
536f0460
DW
1699#page-badges-award .recipienttable tr td {
1700 vertical-align: top;
1701}
f4143537 1702
536f0460
DW
1703#page-badges-award .recipienttable tr td.actions .actionbutton {
1704 margin: 0.3em 0;
1705 padding: 0.5em 0;
1706 width: 100%;
1707}
f4143537 1708
536f0460
DW
1709#page-badges-award .recipienttable tr td.existing,
1710#page-badges-award .recipienttable tr td.potential {
1711 width: 42%;
1712}
1713
1714#issued-badge-table .activatebadge {
1715 display: inline-block;
1716}
f4143537 1717
536f0460
DW
1718.statusbox.active {
1719 background-color: $state-success-bg;
1720}
f4143537 1721
536f0460
DW
1722.statusbox.inactive {
1723 background-color: $state-warning-bg;
1724}
f4143537 1725
536f0460
DW
1726.statusbox {
1727 text-align: center;
1728 margin-bottom: 5px;
1729 padding: 5px;
1730}
f4143537 1731
536f0460
DW
1732.statusbox .activatebadge {
1733 display: inline-block;
1734}
f4143537
DP
1735
1736.statusbox .activatebadge input[type=submit] {
536f0460
DW
1737 margin: 3px;
1738}
f4143537 1739
536f0460 1740.activatebadge {
fde35b8f 1741 margin: 0;
536f0460
DW
1742 text-align: left;
1743 vertical-align: middle;
1744}
f4143537 1745
536f0460
DW
1746img#persona_signin {
1747 cursor: pointer;
1748}
f4143537 1749
536f0460
DW
1750.addcourse {
1751 float: right;
1752}
f4143537 1753
536f0460
DW
1754.invisiblefieldset {
1755 display: inline;
536f0460
DW
1756 padding: 0;
1757 border-width: 0;
1758}
f4143537 1759
b71c82ad
FM
1760/** Page header */
1761#page-header {
1762 .logo {
1763 margin: $spacer 0;
7ad1d2da 1764 img {
0d5f5f73 1765 max-height: 75px;
7ad1d2da 1766 }
b71c82ad 1767 }
536f0460
DW
1768}
1769
ed0e21c0
BB
1770/** Navbar logo. */
1771nav.navbar .logo img {
1772 max-height: 35px;
5f18da12
FM
1773}
1774
536f0460
DW
1775/** Header-bar styles **/
1776.page-context-header {
1777 // We need to be explicit about the height of the header.
1778 $pageHeaderHeight: 140px;
1779
1780 // Do not remove these rules.
1781 overflow: hidden;
1782
1783 .page-header-image,
1784 .page-header-headings {
b167b415 1785 float: left;
536f0460
DW
1786 display: block;
1787 position: relative;
1788 }
f4143537 1789
536f0460 1790 .page-header-image {
536f0460
DW
1791 margin-right: 1em;
1792 margin-bottom: 1em;
1793 }
536f0460
DW
1794
1795 .page-header-headings,
1796 .header-button-group {
1797 position: relative;
1798 line-height: 24px;
1799 vertical-align: middle;
1800 }
1801
1802 .header-button-group {
1803 display: block;
1804 float: left;
f4143537 1805
536f0460
DW
1806 a {
1807 position: relative;
1808
1809 // Don't touch it unless you know exactly what you are doing.
1810 top: -0.4em;
1811 }
1812 }
1813}
1814
536f0460
DW
1815ul.dragdrop-keyboard-drag li {
1816 list-style-type: none;
1817}
1818
536f0460
DW
1819a.disabled:hover,
1820a.disabled {
1821 text-decoration: none;
1822 cursor: default;
1823 font-style: italic;
1824 color: #808080;
1825}
f4143537 1826
536f0460 1827body.lockscroll {
9cb41231
DP
1828 height: 100%;
1829 overflow: hidden;
536f0460
DW
1830}
1831
1832.progressbar_container {
1833 max-width: 500px;
1834 margin: 0 auto;
1835}
1836
1837/* IE10 only fix for calendar titling */
1838.ie10 .yui3-calendar-header-label {
1839 display: inline-block;
1840}
1841
1842dd:before,
1843dd:after {
9cb41231
DP
1844 display: block;
1845 content: " ";
536f0460 1846}
f4143537 1847
536f0460 1848dd:after {
9cb41231 1849 clear: both;
536f0460
DW
1850}
1851
1852// Active tabs with links should have a different
1853// cursor to indicate they are clickable.
1854.nav-tabs > .active > a[href],
1855.nav-tabs > .active > a[href]:hover,
1856.nav-tabs > .active > a[href]:focus {
1857 cursor: pointer;
1858}
1859
1860.inplaceeditable {
536f0460
DW
1861 &.inplaceeditingon {
1862 position: relative;
1863
1864 .editinstructions {
1865 margin-top: -30px;
1866 font-weight: normal;
1867 margin-right: 0;
1868 margin-left: 0;
1869 left: 0;
1870 right: auto;
1871 white-space: nowrap;
1872 }
1873
1874 input {
1875 width: 330px;
536f0460
DW
1876 vertical-align: text-bottom;
1877 margin-bottom: 0;
1878 }
1879
1880 select {
1881 margin-bottom: 0;
1882 }
1883 }
1884
1885 .quickediticon img {
1886 opacity: 0.2;
1887 }
1888
1889 .quickeditlink {
1890 color: inherit;
1891 text-decoration: inherit;
1892 }
1893
1894 &:hover .quickeditlink .quickediticon img,
1895 .quickeditlink:focus .quickediticon img {
1896 opacity: 1;
1897 }
1898
1899 &.inplaceeditable-toggle .quickediticon {
1900 display: none;
1901 }
fb5bbf14
AN
1902
1903 &.inplaceeditable-autocomplete {
1904 display: block;
1905 }
536f0460
DW
1906}
1907
1908h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
1909 margin-top: -20px;
1910}
89d9895b
FM
1911
1912/** Chart area. */
1913.chart-area {
1914
1915 .chart-table-data {
1916 display: none;
1917 }
1918
1919 .chart-table {
1920 .chart-output-htmltable caption {
1921 white-space: nowrap;
1922 }
1923 /** When accessible, we display the table only. */
1924 &.accesshide {
1925 .chart-table-expand {
1926 display: none;
1927 }
1928 .chart-table-data {
1929 display: block;
1930 }
1931 }
1932 }
1933}
1934
536f0460
DW
1935// Reset for ul.
1936ul {
1937 padding-left: 1rem;
1938}
b843914d
FM
1939
1940/* YUI 2 Tree View */
1941/*rtl:raw:
1942.ygtvtn,
1943.ygtvtm,
1944.ygtvtmh,
1945.ygtvtmhh,
1946.ygtvtp,
1947.ygtvtph,
1948.ygtvtphh,
1949.ygtvln,
1950.ygtvlm,
1951.ygtvlmh,
1952.ygtvlmhh,
1953.ygtvlp,
1954.ygtvlph,
1955.ygtvlphh,
1956.ygtvdepthcell,
1957.ygtvok,
1958.ygtvok:hover,
1959.ygtvcancel,
1960.ygtvcancel:hover {
1961 background-image: url([[pix:theme|yui2-treeview-sprite-rtl]]);
1962}
1963*/
963ba889
RW
1964
1965.hover-tooltip-container {
1966 position: relative;
1967
1968 .hover-tooltip {
1969 opacity: 0;
1970 visibility: hidden;
1971 position: absolute;
1fb687ea 1972 /*rtl:ignore*/
963ba889
RW
1973 left: 50%;
1974 top: calc(-50% - 5px);
1975 transform: translate(-50%, -50%);
1976 background-color: #fff;
1977 border: 1px solid rgba(0, 0, 0, .2);
1978 border-radius: .3rem;
1979 box-sizing: border-box;
1980 padding: 5px;
1981 white-space: nowrap;
1982 transition: opacity 0.15s, visibility 0.15s;
1983 z-index: 1000;
1984
1985 &:before {
1986 content: '';
1987 display: inline-block;
1988 border-left: 8px solid transparent;
1989 border-right: 8px solid transparent;
1990 border-top: 8px solid rgba(0, 0, 0, .2);
1991 position: absolute;
1992 bottom: -8px;
1993 left: calc(50% - 8px);
1994 }
1995
1996 &:after {
1997 content: '';
1998 display: inline-block;
1999 border-left: 7px solid transparent;
2000 border-right: 7px solid transparent;
2001 border-top: 7px solid #fff;
2002 position: absolute;
2003 bottom: -6px;
2004 left: calc(50% - 7px);
2005 z-index: 2;
2006 }
2007 }
2008
2009 &:hover {
2010 .hover-tooltip {
2011 opacity: 1;
2012 visibility: visible;
2013 transition: opacity 0.15s 0.5s, visibility 0.15s 0.5s;
2014 }
2015 }
2016}
99061152
DW
2017
2018#region-flat-nav {
2019 padding-right: 0;
2020 padding-left: 0;
2021 .nav {
2022 margin-right: $grid-gutter-width / 2;
2023 background-color: $card-bg;
2024 }
2025 @include media-breakpoint-down(sm) {
2026 .nav {
2027 margin-top: $grid-gutter-width;
2028 margin-right: 0;
2029 }
2030 }
2031}
b45fdc68 2032
2fd7cdbe
JO
2033// Footer link colour was added to allow the colour of footer links to be changed,
2034// but really in bootstrap we want the colour of links on .bg-inverse to be changed
2035// rather than being specific to the footer. This is kept for backwards compatibility.
2036$footer-link-color: $bg-inverse-link-color !default;
b45fdc68
DW
2037#page-footer a {
2038 color: $footer-link-color;
2fd7cdbe
JO
2039 text-decoration: underline;
2040 .icon {
2041 color: $footer-link-color;
2042 }
2043}
2044
2045.bg-inverse a {
2046 color: $bg-inverse-link-color;
2047 text-decoration: underline;
2048 .icon {
2049 color: $bg-inverse-link-color;
2050 }
b45fdc68 2051}
70fda55e 2052
15de9ec8
LB
2053.sitelink {
2054 img {
2055 width: 112px;
2056 }
2057}
2058
70fda55e
DW
2059// Make links in a menu clickable anywhere in the row.
2060.dropdown-item a {
2061 display: block;
2062 width: 100%;
2063 color: $body-color;
2064}
20e6ece8
DW
2065.dropdown-item:active a {
2066 color: $dropdown-link-active-color;
2067}
6e79ea58 2068
207136f2
DW
2069.competency-tree {
2070 ul {
2071 padding-left: 1.5rem;
2072 }
2073}
24299774 2074
4b80e95c
NK
2075.sr-only-focusable {
2076 &:active,
2077 &:focus {
2078 z-index: $zindex-navbar-fixed + 1;
2079 position: fixed;
2080 background: #fff;
2081 padding: 7px;
2082 left: 0;
2083 top: 0;
2084 }
2085}
5ca142dc
RW
2086
2087[data-drag-type="move"] {
2088 cursor: move;
f7d1a24e 2089 touch-action: none;
5ca142dc 2090}
f6e8cc83
RW
2091
2092.clickable {
2093 cursor: pointer;
2094}
63cb267c
SL
2095
2096.overlay-icon-container {
2097 position: absolute;
2098 top: 0;
2099 left: 0;
2100 width: 100%;
2101 height: 100%;
2102 background-color: rgba(255, 255, 255, 0.6);
2103
2104 .loading-icon {
2105 position: absolute;
2106 top: 50%;
2107 left: 50%;
2108 transform: translate(-50%, -50%);
2109
2110 .icon {
99df0518
RW
2111 height: 30px;
2112 width: 30px;
2113 font-size: 30px;
63cb267c
SL
2114 }
2115 }
2116}
3ec69c2e 2117
7b87d98d 2118.open.atto_menu > .dropdown-menu {
3ec69c2e
BB
2119 display: block;
2120}
1b217025
BB
2121div.editor_atto_toolbar button .icon {
2122 color: $gray-700;
2123}
2124.w-auto {
2125 width: auto;
2126}
2127
edd7fa33
RW
2128.bg-pulse-grey {
2129 animation: bg-pulse-grey 2s infinite linear;
2130}
2131
2132@keyframes bg-pulse-grey {
2133 0% {
2134 background-color: $gray-100;
2135 }
2136 50% {
2137 background-color: darken($gray-100, 5%);
2138 }
2139 100% {
2140 background-color: $gray-100;
2141 }
2142}
2143
2d41f5b2
RW
2144@each $size, $length in $spacers {
2145 .line-height-#{$size} {
2146 line-height: $length !important; /* stylelint-disable-line declaration-no-important */
2147 }
296ff0a7
RW
2148}
2149
2150.dir-rtl {
2151 .dir-rtl-hide {
2152 display: none;
2153 }
2154}
2155
2156.dir-ltr {
2157 .dir-ltr-hide {
2158 display: none;
2159 }
970bb713 2160}
a69193fa 2161
5ca0958d 2162$switch-height: 1.25rem !default;
a69193fa 2163$switch-height-half: ($switch-height / 2) !default;
1dced2a4 2164$switch-width: ($switch-height * 2) !default;
a69193fa 2165$switch-border-radius: $switch-height !default;
5ca0958d 2166$switch-bg: $gray-300 !default;
1dced2a4
RW
2167$switch-bg-height: 1rem !default;
2168$switch-bg-height-half: ($switch-bg-height / 2) !default;
2169$switch-checked-bg: rgba(map-get($theme-colors, 'primary'), .4) !default;
2170$switch-checked-thumb-bg: map-get($theme-colors, 'primary') !default;
5ca0958d
RW
2171$switch-disabled-bg: $gray-200 !default;
2172$switch-disabled-color: $gray-600 !default;
1dced2a4 2173$switch-disabled-thumb-bg: $gray-600 !default;
a69193fa
RW
2174$switch-thumb-bg: $white !default;
2175$switch-thumb-border-radius: 50% !default;
1dced2a4
RW
2176$switch-thumb-size: $switch-height !default;
2177$switch-thumb-size-half: $switch-height-half !default;
2178$switch-focus-box-shadow: 0 0 0 ($input-btn-focus-width * 2) rgba(map-get($theme-colors, 'primary'), .25);
a69193fa
RW
2179$switch-transition: .2s all !default;
2180
2181.switch {
2182 position: relative;
1dced2a4 2183 display: inline-block;
a69193fa
RW
2184
2185 input {
5005d8cf 2186 float: left;
a69193fa 2187 width: 1px;
5005d8cf 2188 transform: translateX(1px);
a69193fa 2189 padding: 0;
5005d8cf
RW
2190 margin: 0;
2191 opacity: 0;
1dced2a4 2192 line-height: $switch-height;
a69193fa
RW
2193
2194 + label {
2195 position: relative;
2196 min-height: $switch-height;
1dced2a4 2197 min-width: $switch-width;
a69193fa
RW
2198 line-height: $switch-height;
2199 border-radius: $switch-border-radius;
2200 display: inline-block;
2201 cursor: pointer;
2202 outline: none;
2203 user-select: none;
1dced2a4 2204 padding-left: ($switch-width + .5rem);
a69193fa
RW
2205 }
2206
2207 + label::before,
2208 + label::after {
2209 content: '';
2210 position: absolute;
a69193fa 2211 left: 0;
a69193fa
RW
2212 bottom: 0;
2213 display: block;
2214 }
2215
2216 + label::before {
2217 right: 0;
1dced2a4
RW
2218 height: $switch-bg-height;
2219 width: $switch-width;
2220 top: calc(50% - #{$switch-bg-height-half});
a69193fa
RW
2221 background-color: $switch-bg;
2222 border-radius: $switch-border-radius;
2223 transition: $switch-transition;
2224 }
2225
2226 + label::after {
1dced2a4
RW
2227 left: 0;
2228 width: $switch-thumb-size;
2229 height: $switch-thumb-size;
2230 top: calc(50% - #{$switch-thumb-size-half});
a69193fa
RW
2231 border-radius: $switch-thumb-border-radius;
2232 background-color: $switch-thumb-bg;
2233 transition: $switch-transition;
1dced2a4
RW
2234 box-shadow:
2235 0 1px 3px 0 rgba(0, 0, 0, 0.2),
2236 0 1px 1px 0 rgba(0, 0, 0, 0.14),
2237 0 2px 1px -1px rgba(0, 0, 0, 0.12);
a69193fa
RW
2238 }
2239
2240 &:checked + label::before {
2241 background-color: $switch-checked-bg;
2242 }
2243
2244 &:checked + label::after {
2245 margin-left: $switch-height;
1dced2a4 2246 background-color: $switch-checked-thumb-bg;
a69193fa
RW
2247 }
2248
2249 &:focus + label::before {
2250 outline: none;
1dced2a4
RW
2251 }
2252
2253 &:focus + label::after {
2254 outline: none;
a69193fa
RW
2255 box-shadow: $switch-focus-box-shadow;
2256 }
2257
2258 &:disabled + label {
2259 color: $switch-disabled-color;
2260 cursor: not-allowed;
2261 }
2262
2263 &:disabled + label::before {
2264 background-color: $switch-disabled-bg;
2265 }
1dced2a4
RW
2266
2267 &:disabled + label::after {
2268 background-color: $switch-disabled-thumb-bg;
2269 }
2270 }
2271
2272 &.sr-only-label {
2273 input + label {
2274 text-indent: -9999px;
2275 margin-bottom: 0;
2276 padding-left: 0;
2277 }
a69193fa
RW
2278 }
2279}
2280
356bfb69
BB
2281.paged-content-page-container {
2282 min-height: 3.125rem;
2283}
c483a8ee 2284
35221a2e 2285body.h5p-embed {
5092133b
BB
2286 #page-content {
2287 display: inherit;
2288 }
35221a2e
SA
2289 #maincontent {
2290 display: none;
2291 }
2292 .h5pmessages {
2293 min-height: 230px; // This should be the same height as default core_h5p iframes.
2294 }
2295}
2296
c483a8ee
RW
2297.text-decoration-none {
2298 text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
12d23810
RW
2299}
2300
b53f15b1
RW
2301.colour-inherit {
2302 color: inherit !important; /* stylelint-disable-line declaration-no-important */
2303}
2304
12d23810
RW
2305.position-right {
2306 right: 0 !important; /* stylelint-disable-line declaration-no-important */
20e6ece8 2307}
3edde4fb
RW
2308
2309.overflow-hidden {
2310 overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
2311}
48507e16
BB
2312
2313.text-break {
2314 overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
2315}
c516fc11
BB
2316
2317.z-index-1 {
2318 z-index: 1 !important; /* stylelint-disable-line declaration-no-important */
2319}
10425e73
BB
2320
2321// These floats are deprecated in Bootstrap 4.3.1. It is still okay to use them in Moodle.
2322.float-left {
2323 float: left !important; /* stylelint-disable-line declaration-no-important */
2324}
2325.float-right {
2326 float: right !important; /* stylelint-disable-line declaration-no-important */
2327}
db65ba45 2328
db65ba45
RW
2329// Emoji picker.
2330$picker-width: 350px !default;
2331$picker-width-xs: 320px !default;
2332$picker-height: 400px !default;
2333$picker-row-height: 40px !default;
2334$picker-emoji-button-size: 40px !default;
2335$picker-emoji-button-font-size: 24px !default;
2336$picker-emoji-category-count: 9 !default;
2337$picker-emojis-per-row: 7 !default;
2338
2339.emoji-picker {
2340 width: $picker-width;
2341 height: $picker-height;
2342
2343 .category-button {
2344 padding: .375rem 0;
2345 height: 100%;
2346 width: $picker-width / $picker-emoji-category-count;
2347 border-top: none;
2348 border-left: none;
2349 border-right: none;
2350 border-bottom: 2px solid transparent;
2351
2352 &.selected {
2353 border-bottom: 2px solid map-get($theme-colors, 'primary');
2354 }
2355 }
2356
2357 .emojis-container,
2358 .search-results-container {
2359 min-width: $picker-emojis-per-row * $picker-emoji-button-size;
2360 }
2361
2362 .picker-row {
2363 height: $picker-row-height;
2364
2365 .category-name {
2366 line-height: $picker-row-height;
2367 }
2368
2369 .emoji-button {
2370 height: $picker-emoji-button-size;
2371 width: $picker-emoji-button-size;
2372 line-height: $picker-emoji-button-size;
2373 font-size: $picker-emoji-button-font-size;
2374 overflow: hidden;
2375
2376 @include hover-focus {
2377 color: inherit;
2378 text-decoration: none;
2379 }
2380 }
2381 }
2382
2383 .emoji-preview {
2384 height: $picker-row-height;
2385 font-size: $picker-row-height;
2386 line-height: $picker-row-height;
2387 }
2388
2389 .emoji-short-name {
2390 line-height: $picker-row-height / 2;
2391 }
2392
2393 @include media-breakpoint-down(xs) {
2394 width: $picker-width-xs;
2395 }
2396}
75962db9
RW
2397
2398.emoji-auto-complete {
2399 height: $picker-row-height;
2400
2401 .btn.btn-link.btn-icon.emoji-button {
2402 height: $picker-emoji-button-size;
2403 width: $picker-emoji-button-size;
2404 line-height: $picker-emoji-button-size;
2405 font-size: $picker-emoji-button-font-size;
2406
2407 &.active {
2408 background-color: $gray-200;
2409 }
2410 }
2411}
224ea04e
AN
2412
2413.toast-wrapper {
2414 max-width: $toast-max-width;
4e796e22 2415 max-height: 0;
224ea04e
AN
2416 // Place these above any modals and other elements.
2417 z-index: 1051;
2418}