theme/boost/scss/moodle/core.scss

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