theme/boost/scss/moodle/question.scss

   1 /* Question */
   2 .questionbank h2 {
   3     margin-top: 0;
   4 }
   5
   6 .questioncategories h3 {
   7     margin-top: 0;
   8 }
   9
  10 #chooseqtypebox {
  11     margin-top: 1em;
  12 }
  13
  14 #chooseqtype h3 {
  15     margin: 0 0 0.3em;
  16 }
  17
  18 #chooseqtype .instruction {
  19     display: none;
  20 }
  21
  22 #chooseqtype .fakeqtypes {
  23     border-top: 1px solid silver;
  24 }
  25
  26 #chooseqtype .qtypeoption {
  27     margin-bottom: 0.5em;
  28 }
  29
  30 #chooseqtype label {
  31     display: block;
  32 }
  33
  34 #chooseqtype .qtypename img {
  35     padding: 0 0.3em;
  36 }
  37
  38 #chooseqtype .qtypename {
  39     display: inline-table;
  40     width: 16em;
  41 }
  42
  43 #chooseqtype .qtypesummary {
  44     display: block;
  45     margin: 0 2em;
  46 }
  47
  48 #chooseqtype .submitbuttons {
  49     margin: 0.7em 0;
  50     text-align: center;
  51 }
  52
  53 #qtypechoicecontainer {
  54     display: none;
  55 }
  56
  57 #qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
  58     background: none;
  59 }
  60
  61 #qtypechoicecontainer.yui-panel .hd {
  62     color: #333;
  63     letter-spacing: 1px;
  64     text-shadow: 1px 1px 1px #fff;
  65
  66     @include border-top-radius(10px);
  67     border: 1px solid #ccc;
  68     border-bottom: 1px solid #bbb;
  69
  70     @include gradient-y(#fff, #ccc);
  71 }
  72
  73 #qtypechoicecontainer {
  74     font-size: 12px;
  75     color: #333;
  76     background: #f2f2f2;
  77
  78     @include border-radius(10px);
  79     border: 1px solid #ccc;
  80     border-top: 0 none;
  81
  82     @include box-shadow(5px 5px 20px 0 #666);
  83 }
  84
  85 #qtypechoicecontainer #chooseqtype {
  86     width: 40em;
  87 }
  88
  89 #chooseqtypehead h3 {
  90     margin: 0;
  91     font-weight: normal;
  92 }
  93
  94 #chooseqtype .qtypes {
  95     position: relative;
  96     border-bottom: 1px solid #bbb;
  97     padding: 0.24em 0;
  98 }
  99
 100 #chooseqtype .alloptions {
 101     overflow-x: hidden;
 102     overflow-y: auto;
 103     max-height: calc(100vh - 15em);
 104     width: 60%;
 105 }
 106
 107 #chooseqtype .qtypeoption {
 108     margin-bottom: 0;
 109     padding: 0.3em 0.3em 0.3em 1.6em;
 110 }
 111
 112 #chooseqtype .qtypeoption img {
 113     vertical-align: text-bottom;
 114     padding-left: 1em;
 115     padding-right: 0.5em;
 116 }
 117
 118 #chooseqtype .selected {
 119     background-color: #fff;
 120
 121     @include box-shadow(0 0 10px 0 #ccc);
 122 }
 123
 124 #chooseqtype .instruction,
 125 #chooseqtype .qtypesummary {
 126     display: none;
 127     position: absolute;
 128     top: 0;
 129     right: 0;
 130     bottom: 0;
 131     left: 60%;
 132     margin: 0;
 133     overflow-x: hidden;
 134     overflow-y: auto;
 135     padding: 1.5em 1.6em;
 136     background-color: #fff;
 137 }
 138
 139 #chooseqtype .instruction,
 140 #chooseqtype .selected .qtypesummary {
 141     display: block;
 142 }
 143
 144 #categoryquestions {
 145     margin: 0;
 146
 147     td,
 148     th {
 149         padding: 0 0.2em;
 150     }
 151
 152     th {
 153         text-align: left;
 154         font-weight: normal;
 155     }
 156
 157     .checkbox {
 158         padding-left: 5px;
 159     }
 160
 161     .checkbox input[type="checkbox"] {
 162         margin-left: 0;
 163         float: none;
 164     }
 165
 166     .iconcol {
 167         padding: 3px;
 168         box-sizing: content-box;
 169
 170         .icon {
 171             margin: 0;
 172             width: 12px;
 173             height: 12px;
 174         }
 175     }
 176
 177     label {
 178         margin: 0;
 179         display: block;
 180     }
 181
 182     .header {
 183         text-align: left;
 184     }
 185 }
 186
 187 #page-mod-quiz-edit {
 188     div.questionbankwindow div.header {
 189         margin: 0;
 190     }
 191
 192     div.questionbankwindow.block {
 193         padding: 0;
 194     }
 195 }
 196
 197 .questionbank .singleselect {
 198     margin: 0;
 199 }
 200 /* Question editing form */
 201 #combinedfeedbackhdr div.fhtmleditor {
 202     padding: 0;
 203 }
 204
 205 #combinedfeedbackhdr div.fcheckbox {
 206     margin-bottom: 1em;
 207 }
 208
 209 #multitriesheader div.fitem_feditor {
 210     margin-top: 1em;
 211 }
 212
 213 #multitriesheader div.fitem_fgroup {
 214     margin-bottom: 1em;
 215 }
 216
 217 #multitriesheader div.fitem_fgroup fieldset.felement label {
 218     margin-left: 0.3em;
 219     margin-right: 0.3em;
 220 }
 221
 222 body.path-question-type {
 223     /* Hacks to display the labels within a form group. */
 224     .form-group .sr-only:not(legend) {
 225         position: static;
 226         width: auto;
 227         height: auto;
 228         padding: 0;
 229         margin: 0 0.5rem 0 0;
 230         overflow: visible;
 231         clip: auto;
 232         clip-path: none;
 233         border: 0;
 234     }
 235 }
 236
 237 .que {
 238     clear: left;
 239     text-align: left;
 240     margin: 0 auto 1.8em auto;
 241 }
 242
 243 .que .info {
 244     float: left;
 245     width: 7em;
 246     padding: 0.5em;
 247     margin-bottom: 1.8em;
 248     background-color: $gray-lighter;
 249     border: 1px solid darken($gray-lighter, 7%);
 250
 251     @include border-radius(2px);
 252 }
 253
 254 .que h3.no {
 255     margin: 0;
 256     font-size: 0.8em;
 257     line-height: 1;
 258 }
 259
 260 .que span.qno {
 261     font-size: 1.5em;
 262     font-weight: bold;
 263 }
 264
 265 .que .info > div {
 266     font-size: 0.8em;
 267     margin-top: 0.7em;
 268 }
 269
 270 .que .info .questionflag.editable {
 271     cursor: pointer;
 272 }
 273
 274 .que .info .editquestion img,
 275 .que .info .questionflag img,
 276 .que .info .questionflag input {
 277     vertical-align: bottom;
 278 }
 279
 280 .que .content {
 281     margin: 0 0 0 8.5em;
 282 }
 283
 284 .que .formulation,
 285 .que .outcome,
 286 .que .comment {
 287     position: relative;
 288     padding: $alert-padding-y $alert-padding-x;
 289     margin-bottom: $alert-margin-bottom;
 290     border: $alert-border-width solid transparent;
 291     @include border-radius($alert-border-radius);
 292 }
 293 .que .outcome,
 294 .que .comment {
 295     @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level)); /* stylelint-disable-line max-line-length */
 296 }
 297
 298 .que .formulation {
 299     @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
 300 }
 301
 302 .que.multichoice .answer div.r0 .icon.fa-check,
 303 .que.multichoice .answer div.r1 .icon.fa-check,
 304 .que.multichoice .answer div.r0 .icon.fa-remove,
 305 .que.multichoice .answer div.r1 .icon.fa-remove {
 306     text-indent: 0;
 307 }
 308 .qtype_multichoice_clearchoice {
 309     padding-top: 10px;
 310     a {
 311         cursor: pointer;
 312         text-decoration: underline;
 313         padding-left: 30px;
 314     }
 315 }
 316
 317 .formulation input[type="text"],
 318 .formulation select {
 319     width: auto;
 320     vertical-align: baseline;
 321 }
 322
 323 .que.multianswer .formulation .yui3-widget-positioned {
 324     box-sizing: content-box;
 325     .feedbackspan {
 326         width: inherit;
 327         max-width: inherit;
 328     }
 329 }
 330
 331 .path-mod-quiz input[size] {
 332     width: auto;
 333     max-width: 100%;
 334 }
 335
 336 .que .comment {
 337     @include alert-variant(theme-color-level('success', $alert-bg-level), theme-color-level('success', $alert-border-level), theme-color-level('success', $alert-color-level)); /* stylelint-disable-line max-line-length */
 338 }
 339
 340 .que .ablock {
 341     margin: 0.7em 0 0.3em 0;
 342 }
 343
 344 .que .im-controls {
 345     margin-top: 0.5em;
 346     text-align: left;
 347 }
 348
 349 .que .specificfeedback,
 350 .que .generalfeedback,
 351 .que .numpartscorrect
 352 .que .rightanswer,
 353 .que .im-feedback,
 354 .que .feedback,
 355 .que p {
 356     margin: 0 0 0.5em;
 357 }
 358
 359 .que .correctness {
 360     &.correct {
 361         background-color: $state-success-text;
 362     }
 363     &.partiallycorrect {
 364         background-color: $state-warning-text;
 365     }
 366     &.notanswered,
 367     &.incorrect {
 368         background-color: $state-danger-text;
 369     }
 370 }
 371
 372 .que .qtext {
 373     margin-bottom: 1.5em;
 374 }
 375
 376 .que .validationerror {
 377     color: map-get($theme-colors, 'danger');
 378 }
 379 // copied from .formFieldState in mixin.less
 380 // and made more specific
 381
 382 .que .grading,
 383 .que .comment,
 384 .que .commentlink,
 385 .que .history {
 386     margin-top: 0.5em;
 387 }
 388
 389 .que .history h3 {
 390     margin: 0 0 0.2em;
 391     font-size: 1em;
 392 }
 393
 394 .que .history table {
 395     width: 100%;
 396     margin: 0;
 397 }
 398
 399 .que .history .current {
 400     font-weight: bold;
 401 }
 402
 403 .que .questioncorrectnessicon {
 404     vertical-align: text-bottom;
 405 }
 406
 407 body.jsenabled .questionflag input[type=checkbox] {
 408     display: none;
 409 }
 410
 411 .que .questionflagimage {
 412     padding-right: 3px;
 413     height: 16px;
 414     width: 16px;
 415 }
 416
 417 .importerror {
 418     margin-top: 10px;
 419     border-bottom: 1px solid #555;
 420 }
 421
 422 .mform .que.comment .fitemtitle {
 423     width: 20%;
 424 }
 425
 426 #page-question-preview #techinfo {
 427     margin: 1em 0;
 428 }
 429
 430 // imported from quiz.css
 431
 432 #page-mod-quiz-edit ul.slots .activityinstance {
 433     > a {
 434         display: flex;
 435         max-width: 100%;
 436         align-items: center;
 437         text-indent: 0;
 438         padding-left: 0;
 439     }
 440     img.activityicon {
 441         margin-left: 0;
 442         width: 16px;
 443         height: 16px;
 444         padding-right: 4px;
 445     }
 446 }
 447
 448 #page-mod-quiz-edit .activity {
 449     img.activityicon {
 450         vertical-align: text-top;
 451     }
 452 }
 453
 454 #page-mod-quiz-edit .box.generalbox.questionbank {
 455     padding: 0.5em;
 456 }
 457
 458 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
 459 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
 460 #page-mod-quiz-edit .questionbank .choosecategory {
 461     padding: 0;
 462 }
 463
 464 #page-mod-quiz-edit .questionbank .choosecategory select {
 465     width: 100%;
 466 }
 467
 468 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
 469     background: transparent;
 470 }
 471
 472 #page-mod-quiz-edit #categoryquestions > thead {
 473     background: #fff;
 474 }
 475
 476 #page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
 477     background: #e4e4e4;
 478 }
 479
 480 #page-mod-quiz-edit .questionbankwindow div.header {
 481     color: #444;
 482     text-shadow: none;
 483
 484     @include border-top-radius(4px);
 485     margin: 0 -10px 0 -10px;
 486     padding: 2px 10px 2px 10px;
 487     background: transparent; /* Old browsers */
 488 }
 489
 490 #page-mod-quiz-edit .questionbankwindow div.header a:link,
 491 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
 492     color: $link-color;
 493 }
 494
 495 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
 496     color: $link-hover-color;
 497 }
 498
 499 #page-mod-quiz-edit .createnewquestion {
 500     padding: 0.3em 0;
 501
 502     div,
 503     input {
 504         margin: 0;
 505     }
 506 }
 507
 508 #page-mod-quiz-edit .questionbankwindow div.header .title {
 509     color: $body-color;
 510 }
 511
 512 #page-mod-quiz-edit div.container div.generalbox {
 513     background-color: transparent;
 514     padding: 1.5em;
 515 }
 516
 517 #page-mod-quiz-edit .categoryinfo {
 518     background-color: transparent;
 519     border-bottom: none;
 520 }
 521
 522 #page-mod-quiz-edit .createnewquestion .singlebutton input {
 523     margin-bottom: 0;
 524 }
 525
 526 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
 527 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
 528     padding: 0 0 1.5em 0;
 529 }
 530
 531 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
 532     background-color: transparent;
 533     margin: 0;
 534     border-top: 0;
 535     border-bottom: 0;
 536
 537     .paging {
 538         padding: 0 0.3em;
 539     }
 540 }
 541
 542 #page-mod-quiz-edit div.question div.content div.questioncontrols {
 543     background-color: $body-bg;
 544 }
 545
 546 #page-mod-quiz-edit div.question div.content div.points {
 547     margin-top: -0.5em;
 548     padding-bottom: 0;
 549     border: none;
 550     background-color: $body-bg;
 551     position: static;
 552     width: 12.1em;
 553     float: right;
 554     margin-right: 60px;
 555 }
 556
 557 #page-mod-quiz-edit div.question div.content div.points br {
 558     display: none;
 559 }
 560
 561 #page-mod-quiz-edit div.question div.content div.points label {
 562     display: inline-block;
 563 }
 564
 565 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
 566     background-color: $body-bg;
 567 }
 568
 569 #page-mod-quiz-edit .quizpagedelete,
 570 #page-mod-quiz-edit .quizpagedelete img {
 571     background-color: transparent;
 572 }
 573
 574 #page-mod-quiz-edit div.quizpage .pagecontent {
 575     border: 1px solid #ddd;
 576
 577     @include border-radius(2px);
 578     overflow: hidden;
 579 }
 580
 581 #page-mod-quiz-edit div.questionbank .categoryinfo {
 582     padding: 0.3em 0;
 583 }
 584
 585 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
 586     padding: 0;
 587
 588     strong {
 589         display: block;
 590     }
 591
 592     hr,
 593     br {
 594         display: none;
 595     }
 596
 597     strong {
 598         margin-left: -0.3em;
 599     }
 600
 601     strong label {
 602         margin-left: 0.3em;
 603     }
 604
 605     input {
 606         margin-left: 0;
 607     }
 608
 609     input + input {
 610         margin-left: 5px;
 611     }
 612 }
 613
 614 .questionbankwindow .module {
 615     width: auto;
 616 }
 617
 618 .questionbankwindow .form-autocomplete-selection {
 619     margin-left: 0;
 620 }
 621
 622 #page-mod-quiz-edit div.editq div.question div.content {
 623     background-color: $body-bg;
 624     border: 1px solid #ddd;
 625
 626     @include border-radius(2px);
 627     overflow: hidden;
 628 }
 629
 630 #page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
 631     margin-top: 0;
 632     padding-right: 4px;
 633 }
 634
 635 .path-mod-quiz .statedetails {
 636     display: block;
 637     font-size: 0.9em;
 638 }
 639
 640 a#hidebankcmd {
 641     color: $link-color;
 642 }
 643
 644 // override question plugins
 645
 646 // qtype_shortanswer
 647
 648 .que.shortanswer .answer {
 649     padding: 0;
 650 }
 651
 652 .que label {
 653     display: inline;
 654 }
 655
 656 body.path-question-type .mform fieldset.hidden {
 657     padding: 0;
 658     margin: 0.7em 0 0;
 659 }
 660
 661 // Fix for accurate positioning of ddwtos drag and drop question types.
 662 .que.ddwtos,
 663 .que.ddwtos .drop {
 664     box-sizing: content-box;
 665 }
 666
 667 .tag-condition-container {
 668     position: relative;
 669 }
 670
 671 @include media-breakpoint-down(sm) {
 672     .que .info {
 673         float: none;
 674         width: auto;
 675     }
 676     .que .content {
 677         margin: 0;
 678     }
 679 }