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