theme/noname/scss/moodle/course.scss

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