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