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