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             .author,
  81             .replies,
  82             .lastpost {
  83                 white-space: normal;
  84             }
  85
  86             .discussionsubscription,
  87             .replies {
  88                 text-align: center;
  89             }
  90
  91             .topic,
  92             .discussionsubscription,
  93             .topic.starter,
  94             .picture,
  95             .author,
  96             .replies,
  97             .lastpost {
  98                 vertical-align: top;
  99             }
 100         }
 101     }
 102
 103     // Style for the forum subscription mode node.
 104     .subscriptionmode {
 105         color: $body-color;
 106     }
 107
 108     // Style for the currently selected subscription mode.
 109     .activesetting {
 110         color: $body-color;
 111         font-weight: bold;
 112     }
 113 }
 114
 115 .forumpost {
 116     border: $border-width solid $border-color;
 117     display: block;
 118     padding: 6px;
 119
 120     .header {
 121         margin-bottom: 3px;
 122     }
 123
 124     .picture img {
 125         margin: 3px;
 126
 127         &.userpicture {
 128             margin-left: 3px;
 129             margin-right: 10px;
 130         }
 131     }
 132
 133     .content {
 134         .posting.fullpost {
 135             margin-top: 8px;
 136         }
 137     }
 138
 139     .row {
 140         display: block;
 141         .topic,
 142         .content-mask,
 143         .options {
 144             margin-left: 48px;
 145         }
 146
 147         &.side {
 148             clear: both;
 149         }
 150     }
 151 }
 152
 153 .forumpost .row .left {
 154     width: 48px;
 155 }
 156
 157 .forumpost .options .commands {
 158     margin-left: 0;
 159 }
 160
 161 .forumpost .subject {
 162     font-weight: bold;
 163 }
 164
 165 // Override hardcoded forum modules styling
 166 .forumsearch input[type=text] {
 167     margin-bottom: 0;
 168 }
 169
 170 #page-mod-forum-discuss .discussioncontrols {
 171     width: auto;
 172     margin: 0;
 173
 174     .form-inline input {
 175         margin-top: -1px;
 176     }
 177 }
 178
 179 .maincalendar .calendarmonth td,
 180 .maincalendar .calendarmonth th {
 181     border: 1px dotted $table-border-color;
 182 }
 183
 184 .path-grade-report-grader h1 {
 185     text-align: inherit;
 186 }
 187
 188 #page-mod-chat-gui_basic input#message {
 189     max-width: 100%;
 190 }
 191
 192 #page-mod-data-view #singleimage {
 193     width: auto;
 194 }
 195
 196 .path-mod-data form {
 197     margin-top: 10px;
 198 }
 199
 200 .template_heading {
 201     margin-top: 10px;
 202 }
 203
 204 .breadcrumb-button {
 205     margin-top: 4px;
 206 }
 207
 208 .breadcrumb-button .singlebutton {
 209     float: left;
 210     margin-left: 4px;
 211 }
 212
 213 .ie .row-fluid .desktop-first-column {
 214     margin-left: 0;
 215 }
 216
 217 .langmenu form {
 218     margin: 0;
 219 }
 220 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
 221 canvas {
 222     -ms-touch-action: auto;
 223 }
 224
 225 div#dock {
 226     display: none;
 227 }
 228
 229 // Choice module
 230
 231 // Lesson module
 232
 233 /** General styles (scope: all of lesson) **/
 234 .path-mod-lesson .invisiblefieldset.fieldsetfix {
 235     display: block;
 236 }
 237 .path-mod-lesson .answeroption .checkbox label p {
 238     display: inline;
 239 }
 240 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
 241     white-space: normal;
 242 }
 243
 244 .path-mod-wiki .wiki_headingtitle,
 245 .path-mod-wiki .midpad,
 246 .path-mod-wiki .wiki_headingtime {
 247     text-align: inherit;
 248 }
 249
 250 .path-mod-wiki .wiki_contentbox {
 251     width: 100%;
 252 }
 253
 254 // Survey module
 255
 256 .path-mod-survey {
 257     .surveytable {
 258         > tbody > tr:nth-of-type(odd) {
 259             background-color: $table-bg;
 260         }
 261
 262         > tbody > tr:nth-of-type(even) {
 263             background-color: $table-bg-accent;
 264         }
 265
 266         .rblock label {
 267             text-align: center;
 268         }
 269     }
 270
 271 }
 272
 273 .nav .caret {
 274     margin-left: 4px;
 275 }
 276
 277 // Dividers
 278 .nav {
 279     .divider {
 280         overflow: hidden;
 281         width: 0;
 282     }
 283 }
 284
 285 // Usermenu
 286 .usermenu {
 287     .login {
 288         line-height: 2.25rem;
 289
 290         a {
 291             color: $link-color;
 292             &:hover,
 293             &:focus {
 294                 color: $link-hover-color;
 295                 text-decoration: underline;
 296             }
 297         }
 298     }
 299 }
 300
 301 .userloggedinas,
 302 .userswitchedrole,
 303 .loginfailures {
 304     .usermenu {
 305         .usertext {
 306             float: left;
 307             text-align: right;
 308             margin-right: $spacer / 2;
 309             height: 35px;
 310             .meta {
 311                 display: block;
 312                 font-size: $font-size-sm;
 313             }
 314         }
 315         .avatar {
 316             img {
 317                 margin: 0;
 318             }
 319         }
 320     }
 321 }
 322
 323 .userloggedinas .usermenu {
 324     .userbutton .avatars {
 325         position: relative;
 326         display: inline-block;
 327         .avatar {
 328             &.current {
 329                 display: inline-block;
 330                 position: absolute;
 331                 bottom: 0;
 332                 right: 0;
 333                 width: 20px;
 334                 height: 20px;
 335                 border-radius: 50%;
 336                 img {
 337                     vertical-align: baseline;
 338                 }
 339             }
 340             img {
 341                 width: inherit;
 342                 height: inherit;
 343             }
 344         }
 345         .realuser {
 346             width: 35px;
 347             height: 35px;
 348             display: inline-block;
 349         }
 350     }
 351 }
 352
 353 @include media-breakpoint-down(sm) {
 354     .usertext {
 355         display: none;
 356     }
 357 }
 358
 359 // Quiz module
 360 .path-mod-quiz .mod-quiz-edit-content {
 361     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
 362     margin-bottom: 10rem;
 363 }
 364
 365 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
 366 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
 367     width: auto;
 368     max-width: none;
 369 }
 370 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
 371     float: left;
 372     width: 20rem;
 373     display: inline-block;
 374     min-height: 12rem;
 375 }
 376
 377 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
 378     line-height: 1.5;
 379     vertical-align: bottom;
 380 }
 381 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
 382     float: left;
 383     clear: left;
 384 }
 385 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
 386     width: 90%;
 387     height: 22px;
 388     justify-content: flex-start;
 389 }
 390
 391 // Question navigation block.
 392 .path-mod-quiz #mod_quiz_navblock {
 393     .qnbutton {
 394         text-decoration: none;
 395         font-size: 14px;
 396         line-height: 20px;
 397         font-weight: normal;
 398         background-color: $card-bg;
 399         background-image: none;
 400         height: 40px;
 401         width: 30px;
 402         border-radius: 3px;
 403         border: 0;
 404         overflow: visible;
 405         margin: 0 6px 6px 0;
 406     }
 407
 408     span.qnbutton {
 409         cursor: default;
 410         background-color: $input-bg-disabled;
 411         color: $gray;
 412     }
 413
 414     a.qnbutton:hover,
 415     a.qnbutton:active,
 416     a.qnbutton:focus {
 417         text-decoration: underline;
 418     }
 419
 420     .qnbutton .thispageholder {
 421         border: 1px solid;
 422         border-radius: 3px;
 423         z-index: 1;
 424     }
 425
 426     .qnbutton.thispage .thispageholder {
 427         border-width: 3px;
 428     }
 429
 430     .allquestionsononepage .qnbutton.thispage .thispageholder {
 431         border-width: 1px;
 432     }
 433
 434     .qnbutton.flagged .thispageholder {
 435         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
 436     }
 437
 438     .qnbutton .trafficlight {
 439         border: 0;
 440         background: $card-bg none center / 10px no-repeat scroll;
 441         height: 20px;
 442         margin-top: 20px;
 443         border-radius: 0 0 3px 3px;
 444     }
 445
 446     .qnbutton.notyetanswered .trafficlight,
 447     .qnbutton.invalidanswer .trafficlight {
 448         background-color: $card-bg;
 449     }
 450
 451     .qnbutton.invalidanswer .trafficlight {
 452         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
 453     }
 454
 455     .qnbutton.correct .trafficlight {
 456         background-image: url([[pix:theme|mod/quiz/checkmark]]);
 457         background-color: $state-success-text;
 458     }
 459
 460     .qnbutton.blocked .trafficlight {
 461         background-image: url([[pix:core|t/locked]]);
 462         background-color: $input-bg-disabled;
 463     }
 464
 465     .qnbutton.notanswered .trafficlight,
 466     .qnbutton.incorrect .trafficlight {
 467         background-color: $state-danger-text;
 468     }
 469
 470     .qnbutton.partiallycorrect .trafficlight {
 471         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
 472         background-color: $state-warning-text;
 473     }
 474
 475     .qnbutton.complete .trafficlight,
 476     .qnbutton.answersaved .trafficlight,
 477     .qnbutton.requiresgrading .trafficlight {
 478         background-color: $gray-light;
 479     }
 480 }
 481
 482 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
 483     height: 1.4em;
 484     vertical-align: middle;
 485 }
 486
 487 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
 488     padding: 0;
 489     margin: 0 0.4em;
 490 }
 491
 492 // Assign.
 493 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
 494     top: auto;
 495 }
 496 .path-mod-assign .no-overflow {
 497     overflow: initial;
 498 }
 499
 500 // This section removes the responsiveness from the form in the grading panel
 501 $popout-header-font-size: 1.5 * $font-size-base;
 502 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
 503 $popout-header-height: 4rem;
 504
 505 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
 506     height: calc(100% - #{$popout-header-height});
 507 }
 508
 509 .path-mod-assign [data-region="grade-panel"] {
 510     padding-top: $spacer;
 511 }
 512 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
 513 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
 514     width: 100%;
 515     padding: 0;
 516     max-width: 100%;
 517     flex: none;
 518 }
 519 .path-mod-assign [data-region="grade-panel"] fieldset,
 520 .path-mod-assign [data-region="grade-panel"] .fitem.row {
 521     margin: 0;
 522 }
 523
 524 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
 525     float: none !important; /* stylelint-disable-line declaration-no-important */
 526 }
 527
 528 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
 529     width: 100%;
 530 }
 531
 532 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
 533     width: auto;
 534 }
 535
 536 // Now styles for the popout sections.
 537
 538 .path-mod-assign [data-region="grade-panel"] .popout {
 539     background-color: $modal-content-bg;
 540 }
 541
 542 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
 543     background-color: $card-bg;
 544     @include border-radius($card-border-radius);
 545     border: $card-border-width solid $card-border-color;
 546     padding: $card-spacer-x;
 547     margin-bottom: $spacer;
 548 }
 549 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
 550     border-bottom: $hr-border-width solid $hr-border-color;
 551     margin-bottom: $spacer;
 552 }
 553
 554
 555 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
 556     @extend .modal-header;
 557     font-size: $popout-header-font-size;
 558 }
 559
 560 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
 561     margin-top: 0;
 562 }
 563
 564 // Now style the fixed header elements.
 565
 566 .path-mod-assign [data-region="assignment-info"] {
 567     overflow-y: hidden;
 568 }
 569
 570 .path-mod-assign [data-region="grading-navigation"] {
 571     padding: 6px;
 572 }
 573
 574 .path-mod-assign [data-region="grade-actions"] {
 575     padding: 10px;
 576 }
 577
 578 .path-mod-assign [data-region="user-info"] .img-rounded {
 579     margin-top: 0;
 580 }
 581
 582 .path-mod-assign [data-region="grading-navigation-panel"] {
 583     height: 85px;
 584 }
 585
 586 @media (max-width: 767px) {
 587     .path-mod-assign [data-region="grading-navigation-panel"] {
 588         height: auto;
 589     }
 590     .path-mod-assign [data-region="user-info"] {
 591         margin-top: 1rem;
 592     }
 593 }
 594
 595 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
 596     width: auto;
 597     display: inline-block;
 598 }
 599
 600 /**
 601  * Assign feedback.
 602  */
 603 .assignfeedback_editpdf_widget * {
 604     box-sizing: content-box;
 605 }
 606
 607 .assignfeedback_editpdf_widget button {
 608     box-sizing: border-box;
 609 }
 610
 611 .assignfeedback_editpdf_widget .commentcolourbutton img {
 612     border-width: 0;
 613 }
 614
 615 .assignfeedback_editpdf_widget .label {
 616     @extend .tag;
 617     @extend .tag-info;
 618 }
 619
 620 .assignfeedback_editpdf_menu {
 621     padding: 0;
 622 }
 623
 624 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
 625     float: none;
 626 }
 627 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
 628     width: 100%;
 629 }
 630 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
 631     padding-left: $spacer;
 632     padding-right: $spacer;
 633 }
 634 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
 635 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
 636     background-color: $card-bg;
 637 }
 638
 639 /**
 640  * Mod LTI.
 641  */
 642 .path-admin-mod-lti {
 643     .btn .loader img,
 644     #tool-list-loader-container .loader img {
 645         height: auto;
 646     }
 647 }