theme/boost/scss/moodle/modules.scss

   1 /* modules.less */
   2
   3 // The home for small tweaks to modules that don't require
   4 // changes drastic enough to pull in the full module css
   5 // and replace it completely
   6 // Plus some misc. odds and ends
   7
   8 select {
   9     width: auto;
  10 }
  11
  12 // Choice module
  13
  14 .path-mod-choice {
  15     .horizontal .choices .option {
  16         display: inline-block;
  17     }
  18 }
  19
  20 .path-mod-feedback .feedback_form .col-form-label {
  21     display: block !important; /* stylelint-disable-line declaration-no-important */
  22 }
  23
  24 // Feedback module
  25 .path-mod-feedback .itemactions {
  26     float: right;
  27 }
  28 .path-mod-feedback .itemhandle {
  29     position: absolute;
  30     right: 1rem;
  31 }
  32
  33 // Forum module
  34
  35 .path-mod-forum .forumsearch {
  36     input,
  37     .helptooltip {
  38         margin: 0 3px;
  39     }
  40 }
  41
  42 .path-mod-forum .forumheaderlist,
  43 .path-mod-forum .forumheaderlist td {
  44     border: none;
  45 }
  46
  47 .path-mod-forum {
  48     .forumheaderlist {
  49         thead .header,
  50         tbody .discussion td {
  51             white-space: normal;
  52             vertical-align: top;
  53             padding-left: 0.5em;
  54             padding-right: 0.5em;
  55         }
  56
  57         thead .header {
  58             white-space: normal;
  59             vertical-align: top;
  60         }
  61
  62         thead .header.replies {
  63             text-align: center;
  64         }
  65
  66         thead .header.lastpost {
  67             text-align: right;
  68         }
  69
  70         thead .header th,
  71         tbody .discussion td {
  72             &.discussionsubscription {
  73                 width: 16px;
  74                 padding-left: 0.5em;
  75                 padding-right: 0.5em;
  76             }
  77         }
  78
  79         .discussion {
  80             .replies,
  81             .lastpost {
  82                 white-space: normal;
  83             }
  84
  85             .discussionsubscription,
  86             .replies {
  87                 text-align: center;
  88             }
  89
  90             .topic,
  91             .discussionsubscription,
  92             .topic.starter,
  93             .replies,
  94             .lastpost {
  95                 vertical-align: top;
  96             }
  97         }
  98     }
  99
 100     // Style for the forum subscription mode node.
 101     .subscriptionmode {
 102         color: $body-color;
 103     }
 104
 105     // Style for the currently selected subscription mode.
 106     .activesetting {
 107         color: $body-color;
 108         font-weight: bold;
 109     }
 110 }
 111
 112 .discussion-settings-container {
 113     .custom-select {
 114         width: 100%;
 115     }
 116
 117     input {
 118         max-width: 100%;
 119     }
 120 }
 121
 122 .forumpost {
 123     border: $border-width solid $border-color;
 124     display: block;
 125     padding: 6px;
 126
 127     .header {
 128         margin-bottom: 3px;
 129     }
 130
 131     .picture img {
 132         margin: 3px;
 133
 134         &.userpicture {
 135             margin-left: 3px;
 136             margin-right: 10px;
 137         }
 138     }
 139
 140     .content {
 141         .posting.fullpost {
 142             margin-top: 8px;
 143         }
 144     }
 145
 146     .row {
 147         display: block;
 148         .topic,
 149         .content-mask,
 150         .options {
 151             margin-left: 48px;
 152         }
 153
 154         &.side {
 155             clear: both;
 156         }
 157     }
 158 }
 159
 160 .forumpost .row .left {
 161     width: 48px;
 162 }
 163
 164 .forumpost .options .commands {
 165     margin-left: 0;
 166 }
 167
 168 .forumpost .subject {
 169     font-weight: bold;
 170 }
 171
 172 // Override hardcoded forum modules styling
 173 .forumsearch input[type=text] {
 174     margin-bottom: 0;
 175 }
 176
 177 #page-mod-forum-view {
 178     table {
 179         .fit-content {
 180             width: 1px;
 181             white-space: nowrap;
 182         }
 183
 184         .limit-width {
 185             max-width: 200px;
 186             white-space: nowrap;
 187             text-overflow: ellipsis;
 188             overflow: hidden;
 189
 190             .author-info {
 191                 max-width: calc(100% - 35px - .5rem);
 192             }
 193         }
 194     }
 195 }
 196
 197 #page-mod-forum-discuss .discussioncontrols {
 198     width: auto;
 199     margin: 0;
 200
 201     .form-inline input {
 202         margin-top: -1px;
 203     }
 204 }
 205
 206 $author-image-width: 70px;
 207 $author-image-margin: 24px;
 208 $author-image-width-sm: 30px;
 209 $author-image-margin-sm: 8px;
 210
 211 /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
 212 @keyframes background-highlight {
 213     from {
 214         background-color: rgba(0, 123, 255, 0.5);
 215     }
 216     to {
 217         background-color: inherit;
 218     }
 219 }
 220
 221 .path-mod-forum.nested-v2-display-mode {
 222     .discussionsubscription {
 223         margin-top: 0;
 224         text-align: inherit;
 225         margin-bottom: 0;
 226     }
 227
 228     .preload-subscribe,
 229     .preload-unsubscribe {
 230         display: none;
 231     }
 232
 233     .post-message {
 234         line-height: 1.6;
 235     }
 236
 237     .indent {
 238         margin-left: 0;
 239     }
 240
 241     /** Reset the badge styling back to pill style. */
 242     .badge {
 243         font-size: inherit;
 244         font-weight: inherit;
 245         padding-left: .5rem;
 246         padding-right: .5rem;
 247         border-radius: 10rem;
 248     }
 249
 250     .badge-light {
 251         background-color: #f6f6f6;
 252         color: #5b5b5b;
 253     }
 254
 255     /** Style the ratings like a badge. */
 256     .rating-aggregate-container {
 257         background-color: #f6f6f6;
 258         color: #5b5b5b;
 259         padding: .25em .5em;
 260         line-height: 1;
 261         margin-right: .5rem;
 262         vertical-align: middle;
 263         border-radius: 10rem;
 264         text-align: center;
 265     }
 266
 267     .ratinginput {
 268         padding: .25em 1.75rem 0.25em .75em;
 269         line-height: 1;
 270         height: auto;
 271         border-radius: 10rem;
 272
 273         @include media-breakpoint-down(sm) {
 274             margin-top: .5rem;
 275         }
 276     }
 277
 278     .group-image {
 279         width: 35px;
 280         height: 35px;
 281         margin-right: 0;
 282         float: none;
 283         display: inline-block;
 284     }
 285
 286     /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
 287     .alert.discussionlocked {
 288         @extend .sr-only;
 289     }
 290
 291     /** Fix muted text contrast ratios for accessibility. */
 292     .text-muted,
 293     .dimmed_text {
 294         color: #707070 !important; /* stylelint-disable-line declaration-no-important */
 295     }
 296
 297     .author-header {
 298         font-style: italic;
 299
 300         .author-name {
 301             font-style: normal;
 302         }
 303     }
 304
 305     /** Make the tag list text screen reader visible only */
 306     .tag_list > b {
 307         @extend .sr-only;
 308     }
 309
 310     :target > .focus-target {
 311         animation-name: background-highlight;
 312         animation-duration: 1s;
 313         animation-timing-function: ease-in-out;
 314         animation-iteration-count: 1;
 315     }
 316
 317     .forum-post-container {
 318         .replies-container {
 319             .forum-post-container {
 320                 border-top: 1px solid #dee2e6;
 321                 padding-top: 1.5rem;
 322
 323                 .replies-container .forum-post-container {
 324                     border-top: none;
 325                     padding-top: 0;
 326                 }
 327             }
 328
 329             .inline-reply-container .reply-author {
 330                 display: none;
 331             }
 332         }
 333
 334         .post-message p:last-of-type {
 335             margin-bottom: 0;
 336         }
 337
 338         .author-image-container {
 339             width: $author-image-width;
 340             margin-right: $author-image-margin;
 341             flex-shrink: 0;
 342         }
 343
 344         .inline-reply-container textarea {
 345             border: 0;
 346             resize: none;
 347         }
 348
 349         .indent {
 350             /**
 351              * The first post and first set of replies have a larger author image so offset the 2nd
 352              * set of replies by the image width + margin to ensure they align.
 353              */
 354             .indent {
 355                 padding-left: $author-image-width + $author-image-margin;
 356
 357                 /**
 358                  * Reduce the size of the the author image for all second level replies (and below).
 359                  */
 360                 .author-image-container {
 361                     width: $author-image-width-sm;
 362                     margin-right: $author-image-margin-sm;
 363                     padding-top: (36px - $author-image-width-sm) / 2;
 364                 }
 365
 366                 /**
 367                  * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
 368                  */
 369                 .indent {
 370                     padding-left: $author-image-width-sm + $author-image-margin-sm;
 371
 372                     /**
 373                      * Stop indenting the replies after the 5th reply.
 374                      */
 375                     .indent .indent .indent {
 376                         padding-left: 0;
 377                     }
 378                 }
 379             }
 380         }
 381     }
 382 }
 383
 384 /** Extra small devices (portrait phones, less than 576px). */
 385 @include media-breakpoint-down(sm) {
 386     #page-mod-forum-discuss.nested-v2-display-mode {
 387         .forum-post-container {
 388             .author-image-container {
 389                 width: $author-image-width-sm;
 390                 margin-right: $author-image-margin-sm;
 391             }
 392
 393             .indent {
 394                 .indent {
 395                     padding-left: $author-image-width-sm + $author-image-margin-sm;
 396
 397                     .indent .indent {
 398                         padding-left: 0;
 399                     }
 400                 }
 401             }
 402         }
 403
 404         .group-image {
 405             width: 30px;
 406             height: 30px;
 407         }
 408     }
 409 }
 410
 411 // Make filter popover content scrollable if needed.
 412 .filter-scrollable {
 413     overflow-y: auto;
 414     max-height: 25em;
 415     margin-bottom: 1em;
 416 }
 417
 418 // Required to fit a date mform into a filter popover.
 419 .filter-dates-popover {
 420     width: 100%;
 421     max-width: 41.5em;
 422
 423     .mform {
 424         margin-left: -3em;
 425     }
 426 }
 427
 428 $grading-drawer-width: 430px !default;
 429 $grading-animation-duration: .3s !default;
 430 $grading-icon-button-size: 36px !default;
 431 $grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
 432 $grading-search-input-padding-left: calc(#{map-get($spacers, 2)} + #{map-get($spacers, 2)} + #{$grading-icon-button-size - ($input-border-width * 2)}) !default; /* stylelint-disable-line max-line-length */
 433 $grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
 434 $grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
 435
 436 @keyframes expandSearchButton {
 437     from {
 438         height: $grading-icon-button-size;
 439         width: $grading-icon-button-size;
 440         border-radius: $grading-icon-button-size / 2;
 441         background-color: $gray-200;
 442     }
 443     to {
 444         width: 100%;
 445         height: $input-height-lg;
 446         border-radius: 0;
 447         background-color: $input-bg;
 448         border-color: $input-border-color;
 449         padding-left: $grading-search-button-padding-left;
 450         padding-top: $input-padding-y-lg;
 451         padding-bottom: $input-padding-y-lg;
 452         @include font-size($input-font-size-lg);
 453         line-height: $input-line-height-lg;
 454         right: 0;
 455     }
 456 }
 457
 458 @keyframes collapseSearchButton {
 459     from {
 460         width: 100%;
 461         height: $input-height-lg;
 462         border-radius: 0;
 463         background-color: $input-bg;
 464         border-color: $input-border-color;
 465         padding-left: $grading-search-button-padding-left;
 466         padding-top: $input-padding-y-lg;
 467         padding-bottom: $input-padding-y-lg;
 468         @include font-size($input-font-size-lg);
 469         line-height: $input-line-height-lg;
 470         right: 0;
 471     }
 472     to {
 473         height: $grading-icon-button-size;
 474         width: $grading-icon-button-size;
 475         border-radius: $grading-icon-button-size / 2;
 476         background-color: $gray-200;
 477     }
 478 }
 479
 480 .path-mod-forum .unified-grader {
 481     .navbar {
 482         max-height: none;
 483         z-index: 1;
 484     }
 485
 486     .grader-grading-panel {
 487         position: absolute;
 488         top: 0;
 489         height: 100%;
 490         z-index: 0;
 491         width: $grading-drawer-width;
 492
 493         &.hidden {
 494             right: ($grading-drawer-width * -1);
 495         }
 496
 497         .grading-icon {
 498             width: $grading-icon-button-size;
 499         }
 500
 501         .user-picker-container {
 502             .userpicture {
 503                 height: 60px;
 504                 width: 60px;
 505             }
 506
 507             .user-full-name {
 508                 max-width: 240px;
 509             }
 510
 511             .page-link {
 512                 width: $grading-icon-button-size;
 513                 height: $grading-icon-button-size;
 514                 display: flex;
 515                 text-align: center;
 516                 align-items: center;
 517                 justify-content: center;
 518             }
 519         }
 520
 521         .header-container {
 522             height: 65px;
 523             position: relative;
 524             overflow: hidden;
 525
 526             .info-container {
 527                 position: absolute;
 528                 top: 50%;
 529                 left: 0;
 530                 transform: translateY(-50%);
 531                 width: 100%;
 532                 height: 100%;
 533                 padding: map-get($spacers, 2);
 534                 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
 535                 opacity: 1;
 536                 visibility: visible;
 537                 transition: left $grading-animation-duration ease-in-out;
 538                 z-index: 1;
 539             }
 540
 541             .user-search-container {
 542                 overflow: hidden;
 543                 position: absolute;
 544                 top: 50%;
 545                 right: 0;
 546                 transform: translateY(-50%);
 547                 z-index: 2;
 548                 width: 100%;
 549                 height: 100% !important; /* stylelint-disable-line declaration-no-important */
 550                 padding: map-get($spacers, 2);
 551
 552                 .search-input-container {
 553                     position: relative;
 554                     overflow: visible;
 555                     flex-wrap: nowrap;
 556
 557                     input {
 558                         padding-left: $grading-search-input-padding-left;
 559                         padding-right: $grading-search-input-padding-right;
 560                         transition: $custom-forms-transition;
 561                     }
 562
 563                     .search-icon {
 564                         position: absolute;
 565                         top: 50%;
 566                         left: map-get($spacers, 2);
 567                         transform: translateY(-50%);
 568                         color: $input-color;
 569                         height: $grading-icon-button-size;
 570                         width: $grading-icon-button-size - ($input-border-width * 2);
 571                         background-color: $input-bg;
 572                     }
 573
 574                     input,
 575                     .search-icon {
 576                         opacity: 1;
 577                         visibility: visible;
 578                         transition:
 579                             opacity 0s linear $grading-animation-duration,
 580                             visibility 0s linear $grading-animation-duration;
 581                     }
 582
 583                     .toggle-search-button {
 584                         position: absolute;
 585                         top: 50%;
 586                         right: map-get($spacers, 2);
 587                         transform: translateY(-50%);
 588                         z-index: 1;
 589                         color: inherit;
 590                         text-align: left;
 591                         padding-left: 9px;
 592                         animation-name: expandSearchButton;
 593                         animation-duration: $grading-animation-duration;
 594                         animation-timing-function: ease-in-out;
 595                         transition: right 0s linear $grading-animation-duration;
 596
 597                         .expanded-icon {
 598                             opacity: 1;
 599                             max-width: 50px;
 600                             max-height: 50px;
 601                             transition:
 602                                 opacity 0s linear $grading-animation-duration,
 603                                 max-height 0s linear $grading-animation-duration,
 604                                 max-width 0s linear $grading-animation-duration;
 605                         }
 606
 607                         .collapsed-icon {
 608                             opacity: 0;
 609                             max-height: 0;
 610                             max-width: 0;
 611                             overflow: hidden;
 612                             transition:
 613                                 opacity 0s linear $grading-animation-duration,
 614                                 max-height 0s linear $grading-animation-duration,
 615                                 max-width 0s linear $grading-animation-duration;
 616                         }
 617                     }
 618                 }
 619
 620                 &.collapse:not(.show) {
 621                     width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
 622                     transition: width $grading-animation-duration ease-in-out;
 623
 624                     .search-input-container {
 625                         flex-wrap: nowrap;
 626
 627                         input,
 628                         .search-icon {
 629                             opacity: 0;
 630                             visibility: hidden;
 631                             transition:
 632                                 opacity 0s linear,
 633                                 visibility 0s linear;
 634                         }
 635
 636                         input {
 637                             padding-left: 0;
 638                             padding-right: 0;
 639                         }
 640
 641                         .toggle-search-button {
 642                             animation-name: collapseSearchButton;
 643                             animation-duration: $grading-animation-duration;
 644
 645                             .expanded-icon {
 646                                 opacity: 0;
 647                                 max-height: 0;
 648                                 max-width: 0;
 649                                 overflow: hidden;
 650                                 transition:
 651                                     opacity 0s linear,
 652                                     max-height 0s linear,
 653                                     max-width 0s linear;
 654                             }
 655
 656                             .collapsed-icon {
 657                                 opacity: 1;
 658                                 max-width: 50px;
 659                                 max-height: 50px;
 660                                 transition:
 661                                     opacity 0s linear,
 662                                     max-height 0s linear,
 663                                     max-width 0s linear;
 664                             }
 665                         }
 666                     }
 667                 }
 668             }
 669
 670             .user-search-container.show + .info-container,
 671             .user-search-container.collapsing + .info-container {
 672                 opacity: 0;
 673                 visibility: hidden;
 674                 left: calc(100% * -1);
 675                 transition:
 676                     left $grading-animation-duration ease-in-out,
 677                     opacity 0s linear $grading-animation-duration,
 678                     visibility 0s linear $grading-animation-duration,
 679                     padding 0s linear $grading-animation-duration;
 680             }
 681         }
 682     }
 683
 684     .grader-module-content {
 685         overflow-y: auto;
 686         margin-right: $grading-drawer-width;
 687         @include transition(margin-right .2s ease-in-out);
 688     }
 689
 690     .grader-grading-panel.hidden + .grader-module-content {
 691         margin-right: 0;
 692     }
 693
 694     .drawer-button {
 695         position: relative;
 696
 697         &.active::after {
 698             content: "";
 699             position: absolute;
 700             bottom: $grading-nav-bar-active-drawer-button-bottom;
 701             left: 0;
 702             width: 100%;
 703             height: 3px;
 704             background-color: map-get($theme-colors, 'primary');
 705         }
 706
 707         .icon {
 708             font-size: 20px;
 709             height: 20px;
 710             width: 20px;
 711         }
 712     }
 713 }
 714
 715 @include media-breakpoint-down(xs) {
 716     .path-mod-forum .unified-grader {
 717         .grader-grading-panel {
 718             width: 100%;
 719         }
 720     }
 721 }
 722
 723 // End styling for mod_forum.
 724
 725 .maincalendar .calendarmonth td,
 726 .maincalendar .calendarmonth th {
 727     border: 1px dotted $table-border-color;
 728 }
 729
 730 .path-grade-report-grader h1 {
 731     text-align: inherit;
 732 }
 733
 734 #page-mod-chat-gui_basic input#message {
 735     max-width: 100%;
 736 }
 737
 738 #page-mod-data-view #singleimage {
 739     width: auto;
 740 }
 741
 742 .path-mod-data form {
 743     margin-top: 10px;
 744 }
 745
 746 .template_heading {
 747     margin-top: 10px;
 748 }
 749
 750 .breadcrumb-button {
 751     margin-top: 4px;
 752 }
 753
 754 .breadcrumb-button .singlebutton {
 755     float: left;
 756     margin-left: 4px;
 757 }
 758
 759 .ie .row-fluid .desktop-first-column {
 760     margin-left: 0;
 761 }
 762
 763 .langmenu form {
 764     margin: 0;
 765 }
 766 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
 767 canvas {
 768     -ms-touch-action: auto;
 769 }
 770
 771 div#dock {
 772     display: none;
 773 }
 774
 775 // Choice module
 776
 777 // Lesson module
 778
 779 /** General styles (scope: all of lesson) **/
 780 .path-mod-lesson .invisiblefieldset.fieldsetfix {
 781     display: block;
 782 }
 783 .path-mod-lesson .answeroption .checkbox label p {
 784     display: inline;
 785 }
 786 .path-mod-lesson .form-inline label.form-check-label {
 787     display: inline-block;
 788 }
 789 .path-mod-lesson .slideshow {
 790     overflow: auto;
 791     padding: 15px;
 792 }
 793 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
 794     white-space: normal;
 795 }
 796 #page-mod-lesson-view {
 797     .vertical .singlebutton {
 798         display: block;
 799         + .singlebutton {
 800             margin-left: 0;
 801             margin-top: 1rem;
 802         }
 803     }
 804     .fitem .felement .custom-select {
 805         align-self: flex-start;
 806     }
 807 }
 808 .path-mod-lesson .generaltable td {
 809     vertical-align: middle;
 810     label {
 811         margin-bottom: 0;
 812     }
 813     .highlight {
 814         display: inline-block;
 815         margin-left: 0.25rem;
 816     }
 817     input[type="checkbox"] {
 818         display: block;
 819     }
 820 }
 821
 822 .path-mod-wiki .wiki_headingtitle,
 823 .path-mod-wiki .midpad,
 824 .path-mod-wiki .wiki_headingtime {
 825     text-align: inherit;
 826 }
 827
 828 .path-mod-wiki .wiki_contentbox {
 829     width: 100%;
 830 }
 831
 832 // Survey module
 833
 834 .path-mod-survey {
 835     .surveytable {
 836         > tbody > tr:nth-of-type(odd) {
 837             background-color: $table-bg;
 838         }
 839
 840         > tbody > tr:nth-of-type(even) {
 841             background-color: $table-bg-accent;
 842         }
 843
 844         .rblock label {
 845             text-align: center;
 846         }
 847     }
 848
 849 }
 850
 851 .nav .caret {
 852     margin-left: 4px;
 853 }
 854
 855 // Dividers
 856 .nav {
 857     .divider {
 858         overflow: hidden;
 859         width: 0;
 860     }
 861 }
 862
 863 // Usermenu
 864 .usermenu {
 865     .login {
 866         line-height: 2.25rem;
 867
 868         a {
 869             color: $link-color;
 870             &:hover,
 871             &:focus {
 872                 color: $link-hover-color;
 873                 text-decoration: underline;
 874             }
 875         }
 876     }
 877 }
 878
 879 .userloggedinas,
 880 .userswitchedrole,
 881 .loginfailures {
 882     .usermenu {
 883         .usertext {
 884             float: left;
 885             text-align: right;
 886             margin-right: $spacer / 2;
 887             height: 35px;
 888             .meta {
 889                 display: block;
 890                 font-size: $font-size-sm;
 891             }
 892         }
 893         .avatar {
 894             img {
 895                 margin: 0;
 896             }
 897         }
 898     }
 899 }
 900
 901 .userloggedinas .usermenu {
 902     .userbutton .avatars {
 903         position: relative;
 904         display: inline-block;
 905         .avatar {
 906             &.current {
 907                 display: inline-block;
 908                 position: absolute;
 909                 bottom: 0;
 910                 right: 0;
 911                 width: 20px;
 912                 height: 20px;
 913                 border-radius: 50%;
 914                 img {
 915                     vertical-align: baseline;
 916                 }
 917             }
 918             img {
 919                 width: inherit;
 920                 height: inherit;
 921             }
 922         }
 923         .realuser {
 924             width: 35px;
 925             height: 35px;
 926             display: inline-block;
 927         }
 928     }
 929 }
 930
 931 @include media-breakpoint-down(sm) {
 932     .usertext {
 933         display: none;
 934     }
 935 }
 936
 937 // Quiz module
 938 .path-mod-quiz .mod-quiz-edit-content {
 939     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
 940     margin-bottom: 10rem;
 941 }
 942
 943 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
 944 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
 945     width: auto;
 946     max-width: none;
 947 }
 948 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
 949     float: left;
 950     width: 20rem;
 951     display: inline-block;
 952     min-height: 12rem;
 953 }
 954
 955 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
 956     line-height: 1.5;
 957     vertical-align: bottom;
 958 }
 959 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
 960     float: left;
 961     clear: left;
 962 }
 963 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
 964     width: 90%;
 965     height: 22px;
 966     justify-content: flex-start;
 967 }
 968
 969 // Question navigation block.
 970 .path-mod-quiz #mod_quiz_navblock {
 971     .qnbutton {
 972         text-decoration: none;
 973         font-size: 14px;
 974         line-height: 20px;
 975         font-weight: normal;
 976         background-color: $card-bg;
 977         background-image: none;
 978         height: 40px;
 979         width: 30px;
 980         border-radius: 3px;
 981         border: 0;
 982         overflow: visible;
 983         margin: 0 6px 6px 0;
 984     }
 985
 986     span.qnbutton {
 987         cursor: default;
 988         background-color: $input-bg-disabled;
 989         color: $gray;
 990     }
 991
 992     a.qnbutton:hover,
 993     a.qnbutton:active,
 994     a.qnbutton:focus {
 995         text-decoration: underline;
 996     }
 997
 998     .qnbutton .thispageholder {
 999         border: 1px solid;
1000         border-radius: 3px;
1001         z-index: 1;
1002     }
1003
1004     .qnbutton.thispage .thispageholder {
1005         border-width: 3px;
1006     }
1007
1008     .allquestionsononepage .qnbutton.thispage .thispageholder {
1009         border-width: 1px;
1010     }
1011
1012     .qnbutton.flagged .thispageholder {
1013         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1014     }
1015
1016     .qnbutton .trafficlight {
1017         border: 0;
1018         background: $card-bg none center / 10px no-repeat scroll;
1019         height: 20px;
1020         margin-top: 20px;
1021         border-radius: 0 0 3px 3px;
1022     }
1023
1024     .qnbutton.notyetanswered .trafficlight,
1025     .qnbutton.invalidanswer .trafficlight {
1026         background-color: $card-bg;
1027     }
1028
1029     .qnbutton.invalidanswer .trafficlight {
1030         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1031     }
1032
1033     .qnbutton.correct .trafficlight {
1034         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1035         background-color: $state-success-text;
1036     }
1037
1038     .qnbutton.blocked .trafficlight {
1039         background-image: url([[pix:core|t/locked]]);
1040         background-color: $input-bg-disabled;
1041     }
1042
1043     .qnbutton.notanswered .trafficlight,
1044     .qnbutton.incorrect .trafficlight {
1045         background-color: $state-danger-text;
1046     }
1047
1048     .qnbutton.partiallycorrect .trafficlight {
1049         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1050         background-color: $state-warning-text;
1051     }
1052
1053     .qnbutton.complete .trafficlight,
1054     .qnbutton.answersaved .trafficlight,
1055     .qnbutton.requiresgrading .trafficlight {
1056         background-color: $gray-light;
1057     }
1058 }
1059
1060 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1061     height: 1.4em;
1062     vertical-align: middle;
1063 }
1064
1065 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1066     padding: 0;
1067     margin: 0 0.4em;
1068 }
1069
1070 // Assign.
1071 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1072     top: auto;
1073 }
1074
1075 // This section removes the responsiveness from the form in the grading panel
1076 $popout-header-font-size: 1.5 * $font-size-base;
1077 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1078 $popout-header-height: 4rem;
1079
1080 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1081     height: calc(100% - #{$popout-header-height});
1082 }
1083
1084 .path-mod-assign [data-region="grade-panel"] {
1085     padding-top: $spacer;
1086 }
1087 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1088 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1089     width: 100%;
1090     padding: 0;
1091     max-width: 100%;
1092     flex: none;
1093 }
1094 .path-mod-assign [data-region="grade-panel"] fieldset,
1095 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1096     margin: 0;
1097 }
1098
1099 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1100     width: 100%;
1101 }
1102
1103 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1104     width: auto;
1105 }
1106
1107 // Now styles for the popout sections.
1108
1109 .path-mod-assign [data-region="grade-panel"] .popout {
1110     background-color: $modal-content-bg;
1111 }
1112
1113 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1114     background-color: $card-bg;
1115     @include border-radius($card-border-radius);
1116     border: $card-border-width solid $card-border-color;
1117     padding: $card-spacer-x;
1118     margin-bottom: $spacer;
1119 }
1120 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1121     border-bottom: $hr-border-width solid $hr-border-color;
1122     margin-bottom: $spacer;
1123 }
1124
1125
1126 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1127     @extend .modal-header;
1128     font-size: $popout-header-font-size;
1129 }
1130
1131 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1132     margin-top: 0;
1133 }
1134
1135 // Now style the fixed header elements.
1136
1137 .path-mod-assign [data-region="assignment-info"] {
1138     overflow-y: hidden;
1139 }
1140
1141 .path-mod-assign [data-region="grading-navigation"] {
1142     padding: 6px;
1143 }
1144
1145 .path-mod-assign [data-region="grade-actions"] {
1146     padding: 10px;
1147 }
1148
1149 .path-mod-assign [data-region="user-info"] .img-rounded {
1150     margin-top: 0;
1151 }
1152
1153 .path-mod-assign [data-region="grading-navigation-panel"] {
1154     height: 85px;
1155 }
1156
1157 @media (max-width: 767px) {
1158     .path-mod-assign [data-region="grading-navigation-panel"] {
1159         height: auto;
1160     }
1161     .path-mod-assign [data-region="user-info"] {
1162         margin-top: 1rem;
1163     }
1164 }
1165
1166 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1167     width: auto;
1168     display: inline-block;
1169 }
1170
1171 /**
1172  * Assign feedback.
1173  */
1174 .assignfeedback_editpdf_widget * {
1175     box-sizing: content-box;
1176 }
1177
1178 .assignfeedback_editpdf_widget button {
1179     box-sizing: border-box;
1180 }
1181
1182 .assignfeedback_editpdf_widget .commentcolourbutton img {
1183     border-width: 0;
1184 }
1185
1186 .assignfeedback_editpdf_widget .label {
1187     @extend .alert;
1188     @extend .alert-info;
1189 }
1190
1191 .assignfeedback_editpdf_menu {
1192     padding: 0;
1193 }
1194
1195 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1196     float: none;
1197 }
1198 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1199     width: 100%;
1200 }
1201 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1202     padding-left: $spacer;
1203     padding-right: $spacer;
1204 }
1205 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1206 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1207     background-color: $card-bg;
1208 }
1209
1210 /**
1211  * Mod LTI.
1212  */
1213 .path-admin-mod-lti {
1214     .btn .loader img,
1215     #tool-list-loader-container .loader img {
1216         height: auto;
1217     }
1218 }