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