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