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