theme/boost/scss/moodle/course.scss

   1 /* course.less */
   2 /* COURSE CONTENT */
   3 .section-modchooser-link img {
   4     margin-right: 0.5rem;
   5     width: 16px;
   6     height: 16px;
   7 }
   8
   9 .section_add_menus {
  10     text-align: right;
  11     clear: both;
  12 }
  13
  14 .section-modchooser {
  15     clear: both;
  16 }
  17
  18 .block_tree .tree_item.branch {
  19     margin-left: 8px;
  20 }
  21
  22 .section_add_menus .horizontal div,
  23 .section_add_menus .horizontal form {
  24     display: inline;
  25 }
  26
  27 .section_add_menus optgroup {
  28     font-weight: normal;
  29     font-style: italic;
  30 }
  31 /*rtl:ignore*/
  32 .section_add_menus .urlselect {
  33     text-align: left;
  34     margin-left: .4em;
  35 }
  36 /*rtl:ignore*/
  37 .section_add_menus .urlselect select {
  38     margin-left: .2em;
  39 }
  40
  41 .sitetopic ul.section {
  42     margin: 0;
  43 }
  44
  45 body:not(.editing)  .sitetopic ul.section {
  46     padding-left: 0;
  47     .label .mod-indent-outer {
  48         padding-left: 0;
  49     }
  50 }
  51
  52 .course-content ul.section {
  53     margin: $spacer;
  54 }
  55
  56 .section {
  57     .side {
  58         &.left {
  59             float: left;
  60         }
  61
  62         &.right {
  63             float: right;
  64             clear: right;
  65         }
  66         margin-top: 0.5rem;
  67     }
  68
  69     .spinner {
  70         height: 16px;
  71         width: 16px;
  72     }
  73
  74     .activity {
  75         .spinner {
  76             left: 100%;
  77             position: absolute;
  78         }
  79
  80         /* The command block for each activity */
  81         .actions {
  82             position: absolute;
  83             right: 0;
  84             top: 0;
  85             display: flex;
  86         }
  87
  88         .contentwithoutlink,
  89         .activityinstance {
  90             min-width: 40%;
  91             display: table-cell;
  92             padding-right: 4px;
  93             min-height: 2em;
  94
  95             > a {
  96                 display: block;
  97                 text-indent: -31px;
  98                 padding-left: 31px;
  99             }
 100
 101             .dimmed {
 102                 .activityicon {
 103                     opacity: .5;
 104                 }
 105             }
 106         }
 107
 108         .stealth {
 109             color: $text-muted;
 110         }
 111         a.stealth,
 112         a.stealth:hover {
 113             color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
 114         }
 115     }
 116
 117     .label {
 118         .contentwithoutlink,
 119         .activityinstance {
 120             padding-right: 32px;
 121             display: block;
 122             height: inherit;
 123         }
 124
 125         .mod-indent-outer {
 126             padding-left: 24px;
 127             display: block;
 128         }
 129     }
 130
 131     .filler {
 132         // This must be sized like an icon to fill the space.
 133         width: 16px;
 134         height: 16px;
 135         padding: 0;
 136         margin: 0 ($spacer / 2);
 137         display: inline-block;
 138     }
 139
 140     .activity.editor_displayed {
 141         a.editing_title,
 142         .moodle-actionmenu {
 143             display: none;
 144         }
 145
 146         div.activityinstance {
 147             padding-right: initial;
 148
 149             input {
 150                 margin-bottom: initial;
 151                 padding-top: initial;
 152                 padding-bottom: initial;
 153                 vertical-align: text-bottom;
 154             }
 155         }
 156     }
 157 }
 158
 159 .activity img.activityicon {
 160     margin-right: 6px;
 161     vertical-align: text-bottom;
 162 }
 163
 164 .section .activity .activityinstance,
 165 .section .activity .activityinstance div {
 166     display: inline-block;
 167 }
 168
 169 .editing {
 170     .section {
 171         .activity {
 172             .contentwithoutlink,
 173             .activityinstance {
 174                 padding-right: 200px;
 175             }
 176             .editing_move {
 177                 /* Move the move icon to the start of the line */
 178                 position: absolute;
 179                 left: 0;
 180                 top: 0;
 181             }
 182
 183             .mod-indent-outer {
 184                 /**
 185                  * Add appropriate padding such that nothing overlaps the
 186                  * absolute positioned move icon.
 187                  */
 188                 padding-left: 2rem;
 189             }
 190         }
 191     }
 192 }
 193
 194 .editing_show + .editing_assign,
 195 .editing_hide + .editing_assign {
 196     // if roles icon missing, add space
 197     margin-left: 20px;
 198 }
 199
 200 .section .activity .commands {
 201     white-space: nowrap;
 202     display: inline-block;
 203 }
 204
 205 .section .activity.modtype_label.label {
 206     font-weight: normal;
 207     padding: .2em;
 208 }
 209
 210 .section li.activity {
 211     padding: .2em;
 212     clear: both;
 213 }
 214
 215 .section .activity .activityinstance .groupinglabel {
 216     padding-left: 30px;
 217 }
 218
 219 .section .activity .availabilityinfo,
 220 .section .activity .contentafterlink {
 221     margin-top: 0.5em;
 222     margin-left: 30px;
 223 }
 224
 225 .section .activity .contentafterlink p {
 226     margin: .5em 0;
 227 }
 228
 229 .editing .section .activity:hover,
 230 .editing .section .activity.action-menu-shown {
 231     background-color: $table-bg-accent;
 232 }
 233
 234 .course-content .current {
 235     position: relative;
 236 }
 237
 238 .course-content .current::before {
 239     content: "";
 240     border-left: $brand-primary 2px solid;
 241     position: absolute;
 242     left: -$card-spacer-x;
 243     top: 0;
 244     bottom: 0;
 245 }
 246
 247 .course-content .section-summary {
 248     border: 1px solid $table-border-color;
 249     margin-top: 5px;
 250     list-style: none;
 251 }
 252
 253 .course-content .section-summary .section-title {
 254     margin: 2px 5px 10px 5px;
 255 }
 256
 257 .course-content .section-summary .summarytext {
 258     margin: 2px 5px 2px 5px;
 259 }
 260
 261 .course-content .section-summary .section-summary-activities .activity-count {
 262     color: $text-muted;
 263     font-size: $font-size-sm;
 264     margin: 3px;
 265     white-space: nowrap;
 266     display: inline-block;
 267 }
 268
 269 .course-content .section-summary .summary {
 270     margin-top: 5px;
 271 }
 272
 273 .course-content .single-section {
 274     margin-top: 1em;
 275 }
 276
 277 .course-content .single-section .section-navigation {
 278     display: block;
 279     padding: 0.5em;
 280     margin-bottom: -0.5em;
 281 }
 282
 283 .course-content .single-section .section-navigation .title {
 284     font-weight: bold;
 285     font-size: 108%;
 286     clear: both;
 287 }
 288
 289 .course-content .single-section .section-navigation .mdl-left {
 290     font-weight: normal;
 291     float: left;
 292     margin-right: 1em;
 293 }
 294
 295 .course-content .single-section .section-navigation .mdl-left .larrow {
 296     margin-right: 0.1em;
 297 }
 298
 299 .course-content .single-section .section-navigation .mdl-right {
 300     font-weight: normal;
 301     float: right;
 302     margin-left: 1em;
 303 }
 304
 305 .course-content .single-section .section-navigation .mdl-right .rarrow {
 306     margin-left: 0.1em;
 307 }
 308
 309 .course-content .single-section .section-navigation .mdl-bottom {
 310     margin-top: 0;
 311 }
 312
 313 .course-content ul li.section.main {
 314     border-bottom: $border-width solid $table-border-color;
 315     margin-top: 0;
 316
 317     &:last-child {
 318         border-bottom: 0;
 319     }
 320 }
 321
 322 .course-content ul li.section.hidden {
 323     .sectionname > span,
 324     .content > div.summary,
 325     .activity .activityinstance {
 326         color: $text-muted;
 327     }
 328 }
 329
 330 .course-content ul.topics,
 331 .course-content ul.weeks {
 332     padding: 0;
 333
 334     li.section {
 335         margin-top: $spacer;
 336         padding-bottom: $spacer;
 337
 338         .content {
 339             margin: 0;
 340             padding: 0;
 341         }
 342
 343         .summary,
 344         .content > .availabilityinfo {
 345             margin-left: 25px;
 346         }
 347
 348         .left {
 349             padding-top: 0;
 350             text-align: right;
 351         }
 352     }
 353 }
 354
 355 .course-content {
 356     margin-top: 0;
 357 }
 358
 359 .course-content .hidden {
 360     display: none;
 361 }
 362
 363 .course-content li {
 364     &.section {
 365         ul {
 366             list-style: disc;
 367
 368             ul {
 369                 list-style: circle;
 370
 371                 ul {
 372                     list-style: square;
 373                 }
 374             }
 375         }
 376
 377         li {
 378             &.activity {
 379                 ul {
 380                     list-style: disc;
 381
 382                     ul {
 383                         list-style: circle;
 384
 385                         ul {
 386                             list-style: square;
 387                         }
 388                     }
 389                 }
 390             }
 391         }
 392
 393         .right {
 394             > .icon:first-child {
 395                 /* Remove the spacer icon. */
 396                 display: none;
 397             }
 398         }
 399     }
 400 }
 401
 402 .path-course-view.editing #region-main > .card-block {
 403     padding-bottom: 13rem;
 404 }
 405
 406 .jumpmenu .form-inline {
 407     display: block;
 408 }
 409
 410 .path-course-view .completionprogress {
 411     margin-left: 25px;
 412 }
 413
 414 .path-course-view .completionprogress {
 415     display: block;
 416     float: right;
 417     height: 20px;
 418     position: relative;
 419 }
 420
 421 #page-site-index .subscribelink {
 422     text-align: right;
 423 }
 424
 425 #site-news-forum h2,
 426 #frontpage-course-list h2,
 427 #frontpage-category-names h2,
 428 #frontpage-category-combo h2 {
 429     margin-bottom: 9px;
 430 }
 431
 432 .path-course-view a.reduce-sections {
 433     padding-left: 0.2em;
 434 }
 435
 436 .path-course-view .subscribelink {
 437     text-align: right;
 438 }
 439
 440 .path-course-view .unread {
 441     margin-left: 30px;
 442 }
 443
 444 .path-course-view .block.drag .header {
 445     cursor: move;
 446 }
 447
 448 .path-course-view .completionprogress {
 449     text-align: right;
 450 }
 451
 452 .path-course-view .single-section .completionprogress {
 453     margin-right: 5px;
 454 }
 455
 456 .path-site li.activity > div,
 457 .path-course-view li.activity > div {
 458     position: relative;
 459     padding: 0 16px 0 0; /* to accommodate the floated completion icon with highlighting */
 460 }
 461
 462 .path-course-view li.activity span.autocompletion img {
 463     vertical-align: text-bottom;
 464     margin-left: 0;
 465 }
 466
 467 .path-course-view li.activity form.togglecompletion .btn {
 468     padding: 0;
 469 }
 470 .path-course-view li.activity form.togglecompletion img {
 471     max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
 472 }
 473
 474 .path-course-view {
 475     &.editing {
 476         li.activity span.autocompletion img {
 477             /* Use the same spacing as the filler. */
 478             margin-right: $spacer / 2;
 479             margin-left: $spacer / 2;
 480         }
 481     }
 482 }
 483
 484 .path-course-view li.activity form.togglecompletion .ajaxworking {
 485     width: 16px;
 486     height: 16px;
 487     position: absolute;
 488     right: 22px;
 489     top: 3px;
 490     background: url([[pix:i/ajaxloader]]) no-repeat;
 491 }
 492
 493 li.section.hidden span.commands a.editing_hide,
 494 li.section.hidden span.commands a.editing_show {
 495     cursor: default;
 496 }
 497
 498 .single-section h3.sectionname {
 499     text-align: center;
 500     clear: both;
 501 }
 502
 503 input.titleeditor {
 504     width: 330px;
 505     vertical-align: text-bottom;
 506 }
 507
 508 span.editinstructions {
 509     /*rtl:remove*/
 510     position: absolute;
 511     /*rtl:raw:
 512     position: relative;
 513     */
 514     top: 0;
 515     margin-top: -22px;
 516     margin-left: 30px;
 517     font-size: $font-size-sm;
 518     padding: .1em .4em;
 519     background-color: $state-info-bg;
 520     color: $state-info-text;
 521     text-decoration: none;
 522     z-index: 9999;
 523
 524     @include box-shadow(2px 2px 5px 1px #ccc);
 525     border: 1px solid $state-info-border;
 526 }
 527
 528 /* Course drag and drop upload styles */
 529 #dndupload-status {
 530     position: fixed;
 531     left: 0;
 532     width: 40%;
 533     margin: 0 30%;
 534     padding: 6px;
 535     border: 1px solid $state-info-border;
 536     text-align: center;
 537     background: $state-info-bg;
 538     color: $state-info-text;
 539     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
 540
 541     @include box-shadow(2px 2px 5px 1px #ccc);
 542     @include border-radius(8px);
 543 }
 544
 545 .dndupload-preview {
 546     color: #909090;
 547     border: 1px dashed #909090;
 548     list-style: none;
 549     margin-top: .2em;
 550     padding: .3em;
 551 }
 552
 553 .dndupload-hidden {
 554     display: none;
 555 }
 556
 557 /* COURSES LISTINGS AND COURSE SUMMARY */
 558 #page-course-pending .singlebutton,
 559 #page-course-index .singlebutton,
 560 #page-course-index-category .singlebutton,
 561 #page-course-editsection .singlebutton {
 562     text-align: center;
 563 }
 564
 565 #page-admin-course-manage #movecourses td img {
 566     margin: 0 .22em;
 567     vertical-align: text-bottom;
 568 }
 569
 570 #coursesearch {
 571     margin-top: 1em;
 572     text-align: center;
 573 }
 574
 575 #page-course-pending .pendingcourserequests {
 576     margin-bottom: 1em;
 577 }
 578
 579 #page-course-pending .pendingcourserequests .singlebutton {
 580     display: inline;
 581 }
 582
 583 #page-course-pending .pendingcourserequests .cell {
 584     padding: 0 5px;
 585 }
 586
 587 #page-course-pending .pendingcourserequests .cell.c6 {
 588     white-space: nowrap;
 589 }
 590
 591 .coursebox {
 592     padding: $spacer / 2;
 593 }
 594
 595 .coursebox > .info > .coursename a {
 596     display: block;
 597     background-image: url([[pix:moodle|i/course]]);
 598     background-repeat: no-repeat;
 599     padding-left: 21px;
 600     background-position: left 0.2em;
 601 }
 602
 603 .coursebox > .info > .coursename,
 604 .coursebox .content .teachers,
 605 .coursebox .content .courseimage,
 606 .coursebox .content .coursefile,
 607 .coursebox .content .customfields-container {
 608     float: left;
 609     clear: left;
 610 }
 611
 612 .coursebox .content .teachers,
 613 .coursebox .content .courseimage,
 614 .coursebox .content .coursefile,
 615 .coursebox .content .customfields-container {
 616     width: 40%;
 617 }
 618
 619 .coursebox > .info > h3.coursename {
 620     margin: 5px;
 621 }
 622
 623 .coursebox > .info > .coursename {
 624     margin: 5px;
 625     padding: 0;
 626 }
 627
 628 .coursebox .content .teachers li {
 629     list-style-type: none;
 630     padding: 0;
 631     margin: 0;
 632 }
 633
 634 .coursebox .moreinfo,
 635 .coursebox .enrolmenticons {
 636     padding: 3px 0;
 637     float: right;
 638 }
 639
 640 .coursebox .moreinfo img {
 641     margin: 0 .2em;
 642 }
 643
 644 .coursebox .content {
 645     clear: both;
 646 }
 647
 648 .coursebox .content .summary,
 649 .coursebox .content .coursecat {
 650     float: right;
 651     width: 55%;
 652 }
 653
 654 .coursebox .content .coursecat {
 655     text-align: right;
 656     clear: right;
 657 }
 658
 659 .coursebox.remotecoursebox .remotecourseinfo {
 660     float: left;
 661     width: 40%;
 662 }
 663
 664 .coursebox .content .courseimage img {
 665     max-width: 100px;
 666     max-height: 100px;
 667 }
 668
 669 .coursebox .content .coursecat,
 670 .coursebox .content .summary,
 671 .coursebox .content .courseimage,
 672 .coursebox .content .coursefile,
 673 .coursebox .content .teachers,
 674 .coursebox.remotecoursebox .remotecourseinfo,
 675 .coursebox .content .customfields-container {
 676     margin: 15px 5px 5px;
 677     padding: 0;
 678 }
 679
 680 .coursebox.remotehost > .info > .categoryname a {
 681     background-image: url([[pix:moodle|i/mnethost]]);
 682 }
 683
 684 .coursebox.collapsed {
 685     margin-bottom: 0;
 686 }
 687
 688 .coursebox.collapsed > .content {
 689     display: none;
 690 }
 691
 692 .courses .coursebox {
 693     &.collapsed {
 694         padding-top: $spacer-y / 2;
 695         padding-bottom: $spacer-y / 2;
 696     }
 697
 698     &.even {
 699         background-color: $table-bg-accent;
 700     }
 701 }
 702
 703 .courses > .paging.paging-morelink {
 704     text-align: center;
 705     padding: $spacer;
 706 }
 707
 708 .course_category_tree .category .numberofcourse {
 709     font-size: $font-size-sm;
 710 }
 711
 712 .course_category_tree .controls {
 713     visibility: hidden;
 714 }
 715
 716 .course_category_tree .controls div {
 717     display: inline;
 718     cursor: pointer;
 719 }
 720
 721 .jsenabled .course_category_tree .controls {
 722     visibility: visible;
 723 }
 724
 725 .course_category_tree .controls {
 726     margin-bottom: 5px;
 727     text-align: right;
 728     float: right;
 729 }
 730
 731 .course_category_tree .controls div {
 732     padding-right: 2em;
 733     font-size: 75%;
 734 }
 735
 736 .course_category_tree .category > .info > .categoryname {
 737     background-image: url([[pix:moodle|t/collapsed_empty]]);
 738     background-repeat: no-repeat;
 739     padding: 2px 18px;
 740     margin: 3px;
 741     background-position: center left;
 742 }
 743 /* rtl:raw:
 744 .course_category_tree .category > .info > .categoryname {
 745     background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);
 746 }
 747  */
 748 .course_category_tree .category.with_children > .info > .categoryname {
 749     background-image: url([[pix:moodle|t/expanded]]);
 750     cursor: pointer;
 751 }
 752
 753 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
 754     background-image: url([[pix:moodle|t/collapsed]]);
 755 }
 756 /* rtl:raw:
 757 .course_category_tree .category.with_children.collapsed > .info > .categoryname {
 758     background-image:url([[pix:moodle|t/collapsed_rtl]]);
 759 }
 760 */
 761 .course_category_tree .category.collapsed > .content {
 762     display: none;
 763 }
 764
 765 .course_category_tree .category > .info {
 766     clear: both;
 767 }
 768
 769 .course_category_tree .category > .content {
 770     padding-left: 16px;
 771 }
 772
 773 #page-course-index-category .generalbox.info {
 774     margin-bottom: 15px;
 775     border: 1px dotted #ddd;
 776
 777     @include border-radius(4px);
 778     padding: 5px;
 779 }
 780
 781 #page-course-index-category .categorypicker {
 782     text-align: center;
 783     margin: 10px 0 20px;
 784 }
 785
 786 /**
 787  * Course management page
 788  * Palette
 789  *
 790  * Background (reg)         #F5F5F5
 791  * Background (light        #fafafa
 792  * Background (highlight)   #ddffaa
 793  * Borders                  #e1e1e8
 794  */
 795 #course-category-listings {
 796     margin-bottom: 0;
 797
 798     /** Two column layout */
 799     &.columns-2 {
 800         > #course-listing > div {
 801             position: relative;
 802             left: -1px;
 803         }
 804     }
 805     /** Three column layout */
 806     &.columns-3 > #course-listing > div {
 807         height: 100%;
 808     }
 809
 810     > div > div {
 811         min-height: 300px;
 812
 813         > ul.ml > li:first-child > div {
 814             border-top: 0;
 815         }
 816     }
 817
 818     h3 {
 819         margin: 0;
 820         padding: 0.4rem 0.6rem 0.3rem;
 821     }
 822
 823     h4 {
 824         margin: 1rem 0 0;
 825         padding: 0.6rem 1rem 0.5rem;
 826     }
 827
 828     .moodle-actionmenu {
 829         white-space: nowrap;
 830     }
 831
 832     .listing-actions {
 833         text-align: center;
 834
 835         > .moodle-actionmenu {
 836             display: inline-block;
 837         }
 838     }
 839
 840     ul.ml {
 841         list-style: none;
 842         margin: 1rem 0;
 843
 844         ul.ml {
 845             margin: 0;
 846         }
 847     }
 848
 849     .listitem {
 850
 851         &[data-selected='1'] {
 852             background-color: $table-bg-accent;
 853             &:hover {
 854                 background-color: $table-bg-hover;
 855             }
 856         }
 857     }
 858
 859     .item-actions {
 860         margin-right: 1em;
 861         display: inline-block;
 862
 863         &.show .menu {
 864
 865             img {
 866                 width: 12px;
 867                 max-width: none;
 868             }
 869         }
 870
 871         .menu-action-text {
 872             vertical-align: inherit;
 873         }
 874     }
 875
 876     .listitem {
 877         > div {
 878             > .float-left {
 879                 float: left;
 880             }
 881
 882             > .float-right {
 883                 float: right;
 884                 text-align: right;
 885             }
 886
 887             .item-actions {
 888                 .action-show {
 889                     display: none;
 890                 }
 891
 892                 .action-hide {
 893                     display: inline;
 894                 }
 895             }
 896
 897             .without-actions {
 898                 color: #333;
 899             }
 900
 901             .idnumber {
 902                 color: #a1a1a8;
 903                 margin-right: 2em;
 904             }
 905         }
 906         // The category or course is hidden.
 907         &[data-visible="0"] {
 908             color: $text-muted;
 909
 910             > div {
 911                 > a {
 912                     color: $text-muted;
 913                 }
 914
 915                 .item-actions {
 916                     .action-show {
 917                         display: inline;
 918                     }
 919
 920                     .action-hide {
 921                         display: none;
 922                     }
 923                 }
 924             }
 925         }
 926
 927         &.highlight {
 928             background-color: $body-bg;
 929
 930             > div,
 931             > div:hover,
 932             &[data-selected='1'] > div {
 933                 background-color: $table-bg-hover;
 934             }
 935         }
 936     }
 937
 938     #course-listing {
 939         .listitem {
 940             .categoryname {
 941                 display: inline-block;
 942                 margin-left: 1em;
 943                 color: #a1a1a8;
 944             }
 945
 946             .coursename {
 947                 display: inline-block;
 948             }
 949         }
 950
 951         > .firstpage .listitem:first-child > div .item-actions .action-moveup,
 952         > .lastpage .listitem:last-child > div .item-actions .action-movedown {
 953             display: none;
 954         }
 955
 956         .bulk-action-checkbox {
 957             margin: -2px 6px 0 0;
 958         }
 959     }
 960
 961     #category-listing {
 962         .listitem.collapsed > ul.ml {
 963             display: none;
 964         }
 965
 966         .listitem {
 967             > div {
 968                 > .ba-checkbox {
 969                     width: 2.2em;
 970                     text-align: center;
 971                     margin: -1px 0.5em 0 0;
 972                     padding-top: 2px;
 973                 }
 974             }
 975
 976             &.highlight > div > .ba-checkbox {
 977                 background-color: $table-bg-hover;
 978             }
 979
 980             &[data-selected='1'] > div > .ba-checkbox {
 981                 margin: 0 0.5em 0 0;
 982                 padding: 0;
 983                 background-color: inherit;
 984             }
 985
 986             &:first-child > div .item-actions .action-moveup,
 987             &:last-child > div .item-actions .action-movedown {
 988                 display: none;
 989             }
 990         }
 991
 992         .course-count {
 993             color: #a1a1a8;
 994             margin-right: 2rem;
 995             min-width: 3.5em;
 996             display: inline-block;
 997         }
 998
 999         .bulk-action-checkbox {
1000             margin-right: -3px;
1001         }
1002
1003         .category-listing > ul > .listitem:first-child {
1004             position: relative;
1005         }
1006
1007         .category-bulk-actions {
1008             margin: 0 0.5em 0.5em;
1009             position: relative;
1010         }
1011     }
1012
1013     .detail-pair {
1014
1015         > * {
1016             display: inline-block;
1017         }
1018
1019         .pair-key {
1020             font-weight: bold;
1021             vertical-align: top;
1022
1023             span {
1024                 margin-right: 1rem;
1025                 display: block;
1026             }
1027         }
1028
1029         .pair-value select {
1030             max-width: 100%;
1031         }
1032     }
1033
1034     .bulk-actions .detail-pair {
1035         > * {
1036             display: block;
1037             width: 100%;
1038         }
1039     }
1040
1041     .listing-pagination {
1042         text-align: center;
1043
1044         .yui3-button {
1045             @include button-variant($info, $info);
1046             border: 0;
1047             margin: 0.4rem 0.2rem 0.45rem;
1048             font-size: 10.4px;
1049
1050             &.active-page {
1051                 @include button-variant($primary, $primary);
1052             }
1053         }
1054     }
1055
1056     .listing-pagination-totals {
1057         text-align: center;
1058
1059         &.dimmed {
1060             color: $text-muted;
1061             margin: 0.4rem 1rem 0.45rem;
1062         }
1063     }
1064
1065     .select-a-category .notifymessage,
1066     .select-a-category .alert {
1067         margin: 1em;
1068     }
1069 }
1070
1071 #course-category-listings #course-listing .listitem .drag-handle {
1072     display: none;
1073 }
1074
1075 .jsenabled #course-category-listings #course-listing .listitem .drag-handle {
1076     display: inline-block;
1077     margin: 0 6px 0 0;
1078     cursor: pointer;
1079 }
1080
1081 /** Management header styling **/
1082 .coursecat-management-header {
1083     vertical-align: middle;
1084
1085     h2 {
1086         display: inline-block;
1087         text-align: left;
1088     }
1089
1090     > div {
1091         display: inline-block;
1092         float: right;
1093
1094         > div {
1095             margin: 10px 0 10px 1em;
1096             display: inline-block;
1097         }
1098     }
1099
1100     select {
1101         max-width: 300px;
1102         cursor: pointer;
1103         padding: 0.4em 0.5em 0.45em 1em;
1104         vertical-align: baseline;
1105         white-space: nowrap;
1106     }
1107
1108     .view-mode-selector {
1109         .moodle-actionmenu {
1110             white-space: nowrap;
1111             display: inline-block;
1112         }
1113
1114         .moodle-actionmenu[data-enhanced].show .menu a {
1115             padding-left: 1em;
1116         }
1117     }
1118 }
1119
1120 .course-being-dragged-proxy {
1121     border: 0;
1122     color: $link-color;
1123     vertical-align: middle;
1124     padding: 0 0 0 4em;
1125 }
1126
1127 .course-being-dragged {
1128     opacity: 0.5;
1129 }
1130
1131 /**
1132  * Display sizes:
1133  * Large displays                   1200        +
1134  * Default displays                  980     1199
1135  * Tablets                           768      979
1136  * Small tablets and large phones    481      767
1137  * Phones                              0      480
1138  */
1139
1140 @media (min-width: 1200px) and (max-width: 1600px) {
1141     #course-category-listings.columns-3 {
1142         background-color: $body-bg;
1143         border: 0;
1144
1145         #category-listing,
1146         #course-listing {
1147             width: 50%;
1148         }
1149
1150         #category-listing > div,
1151         #course-listing > div,
1152         #course-detail > div {
1153             background-color: $body-bg;
1154         }
1155
1156         #course-detail {
1157             width: 100%;
1158             margin-top: 1em;
1159         }
1160     }
1161 }
1162
1163 @media (max-width: 1199px) {
1164     #course-category-listings.columns-2,
1165     #course-category-listings.columns-3 {
1166         border: 0;
1167
1168         #category-listing,
1169         #course-listing,
1170         #course-detail {
1171             width: 100%;
1172             margin: 0 0 1em;
1173         }
1174     }
1175 }
1176
1177 .page-settings-menu .menubar > a > .icon {
1178     width: auto;
1179     height: 32px;
1180     font-size: 32px;
1181 }
1182
1183 .activity-navigation {
1184     .row {
1185         align-items: center;
1186     }
1187     #prev-activity-link,
1188     #next-activity-link {
1189         white-space: pre-wrap;
1190     }
1191 }