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 & > tbody > tr.r1 { 158 background-color: $table-accent-bg; 159 } 160 161 & > tbody > tr.highlight { 162 border: $border-width solid $info; 163 } 164 165 .checkbox { 166 padding-left: 5px; 167 } 168 169 .checkbox input[type="checkbox"] { 170 margin-left: 0; 171 float: none; 172 } 173 174 .iconcol { 175 padding: 3px; 176 box-sizing: content-box; 177 178 .icon { 179 margin: 0; 180 width: 12px; 181 height: 12px; 182 } 183 } 184 185 label { 186 margin: 0; 187 display: block; 188 } 189 190 .header { 191 text-align: left; 192 } 193} 194 195#page-mod-quiz-edit { 196 div.questionbankwindow div.header { 197 margin: 0; 198 } 199 200 div.questionbankwindow.block { 201 padding: 0; 202 } 203} 204 205.questionbank .singleselect { 206 margin: 0; 207} 208/* Question editing form */ 209#combinedfeedbackhdr div.fhtmleditor { 210 padding: 0; 211} 212 213#combinedfeedbackhdr div.fcheckbox { 214 margin-bottom: 1em; 215} 216 217#multitriesheader div.fitem_feditor { 218 margin-top: 1em; 219} 220 221#multitriesheader div.fitem_fgroup { 222 margin-bottom: 1em; 223} 224 225#multitriesheader div.fitem_fgroup fieldset.felement label { 226 margin-left: 0.3em; 227 margin-right: 0.3em; 228} 229 230body.path-question-type { 231 /* Hacks to display the labels within a form group. */ 232 .form-group .sr-only:not(legend):not([for="id_category"]) { 233 position: static; 234 width: auto; 235 height: auto; 236 padding: 0; 237 margin: 0 0.5rem 0 0; 238 overflow: visible; 239 clip: auto; 240 clip-path: none; 241 border: 0; 242 } 243} 244 245.que { 246 clear: left; 247 text-align: left; 248 margin: 0 auto 1.8em auto; 249} 250 251.que .info { 252 float: left; 253 width: 7em; 254 padding: 0.5em; 255 margin-bottom: 1.8em; 256 background-color: $gray-100; 257 border: 1px solid darken($gray-300, 7%); 258 259 @include border-radius(2px); 260} 261 262.que h3.no { 263 margin: 0; 264 font-size: 0.8em; 265 line-height: 1; 266} 267 268.que span.qno { 269 font-size: 1.5em; 270 font-weight: bold; 271} 272 273.que .info > div { 274 font-size: 0.8em; 275 margin-top: 0.7em; 276} 277 278.que .info .questionflag.editable { 279 cursor: pointer; 280} 281 282.que .info .editquestion img, 283.que .info .questionflag img, 284.que .info .questionflag input { 285 vertical-align: bottom; 286} 287 288.que .content { 289 margin: 0 0 0 8.5em; 290} 291 292.que .formulation, 293.que .outcome, 294.que .comment { 295 position: relative; 296 padding: $alert-padding-y $alert-padding-x; 297 margin-bottom: $alert-margin-bottom; 298 border: $alert-border-width solid transparent; 299 @include border-radius($alert-border-radius); 300} 301.que .outcome, 302.que .comment { 303 @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level - 0.9)); /* stylelint-disable-line max-line-length */ 304 // Darken link colour inside comments for better colour contrast against regular text. 305 a { 306 color: darken($link-color, 30%); 307 } 308} 309 310.que .formulation { 311 @include alert-variant(theme-color-level('info', $alert-bg-level - 1.30), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level + 4)); /* stylelint-disable-line max-line-length */ 312} 313 314.que.multichoice .answer div.r0 .icon.fa-check, 315.que.multichoice .answer div.r1 .icon.fa-check, 316.que.multichoice .answer div.r0 .icon.fa-remove, 317.que.multichoice .answer div.r1 .icon.fa-remove { 318 text-indent: 0; 319} 320 321.formulation input[type="text"], 322.formulation select { 323 width: auto; 324 vertical-align: baseline; 325} 326 327.que.multianswer .formulation .yui3-widget-positioned { 328 box-sizing: content-box; 329 .feedbackspan { 330 width: inherit; 331 max-width: inherit; 332 } 333} 334 335.path-mod-quiz input[size] { 336 width: auto; 337 max-width: 100%; 338} 339 340.que .comment { 341 @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 */ 342} 343 344.que .ablock { 345 margin: 0.7em 0 0.3em 0; 346} 347 348.que .im-controls { 349 margin-top: 0.5em; 350 text-align: left; 351} 352 353.que .specificfeedback, 354.que .generalfeedback, 355.que .numpartscorrect 356.que .rightanswer, 357.que .im-feedback, 358.que .feedback, 359.que p { 360 margin: 0 0 0.5em; 361} 362 363.que .correctness { 364 &.correct { 365 @include badge-variant($success); 366 } 367 &.partiallycorrect { 368 @include badge-variant($warning); 369 } 370 &.notanswered, 371 &.incorrect { 372 @include badge-variant($danger); 373 } 374} 375 376.que .qtext { 377 margin-bottom: 1.5em; 378} 379 380.que .validationerror { 381 color: map-get($theme-colors, 'danger'); 382} 383// copied from .formFieldState in mixin.less 384// and made more specific 385 386.que .grading, 387.que .comment, 388.que .commentlink, 389.que .history { 390 margin-top: 0.5em; 391} 392 393.que .history h3 { 394 margin: 0 0 0.2em; 395 font-size: 1em; 396} 397 398.que .history table { 399 width: 100%; 400 margin: 0; 401} 402 403.que .history .current { 404 font-weight: bold; 405} 406 407.que .questioncorrectnessicon { 408 vertical-align: text-bottom; 409} 410 411body.jsenabled .questionflag input[type=checkbox] { 412 display: none; 413} 414 415.que .questionflagimage { 416 padding-right: 3px; 417 height: 16px; 418 width: 16px; 419} 420 421.importerror { 422 margin-top: 10px; 423 border-bottom: 1px solid #555; 424} 425 426.mform .que.comment .fitemtitle { 427 width: 20%; 428} 429 430#page-question-preview #techinfo { 431 margin: 1em 0; 432} 433 434#page-question-preview .collapsibleregion { 435 .collapsibleregioncaption, 436 .collapsibleregionextracontent { 437 display: inline-block; 438 } 439} 440 441// imported from quiz.css 442 443#page-mod-quiz-edit ul.slots .activityinstance { 444 > a { 445 display: flex; 446 max-width: 100%; 447 align-items: center; 448 text-indent: 0; 449 padding-left: 0; 450 } 451 img.activityicon { 452 margin-left: 0; 453 width: 16px; 454 height: 16px; 455 padding-right: 4px; 456 } 457} 458 459#page-mod-quiz-edit .activity { 460 img.activityicon { 461 vertical-align: text-top; 462 } 463} 464 465#page-mod-quiz-edit .box.generalbox.questionbank { 466 padding: 0.5em; 467} 468 469#page-mod-quiz-edit .questionbank .categorypagingbarcontainer, 470#page-mod-quiz-edit .questionbank .categoryquestionscontainer, 471#page-mod-quiz-edit .questionbank .choosecategory { 472 padding: 0; 473} 474 475#page-mod-quiz-edit .questionbank .choosecategory select { 476 width: 100%; 477} 478 479#page-mod-quiz-edit div.questionbank .categoryquestionscontainer { 480 background: transparent; 481} 482 483#page-mod-quiz-edit .questionbankwindow div.header { 484 color: #444; 485 text-shadow: none; 486 487 @include border-top-radius(4px); 488 margin: 0 -10px 0 -10px; 489 padding: 2px 10px 2px 10px; 490 background: transparent; /* Old browsers */ 491} 492 493#page-mod-quiz-edit .questionbankwindow div.header a:link, 494#page-mod-quiz-edit .questionbankwindow div.header a:visited { 495 color: $link-color; 496} 497 498#page-mod-quiz-edit .questionbankwindow div.header a:hover { 499 color: $link-hover-color; 500} 501 502#page-mod-quiz-edit .createnewquestion { 503 padding: 0.3em 0; 504 505 div, 506 input { 507 margin: 0; 508 } 509} 510 511#page-mod-quiz-edit .questionbankwindow div.header .title { 512 color: $body-color; 513} 514 515#page-mod-quiz-edit div.container div.generalbox { 516 background-color: transparent; 517 padding: 1.5em; 518} 519 520#page-mod-quiz-edit .categoryinfo { 521 background-color: transparent; 522 border-bottom: none; 523} 524 525#page-mod-quiz-edit .createnewquestion .singlebutton input { 526 margin-bottom: 0; 527} 528 529#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer, 530#page-mod-quiz-edit div.questionbank .categoryselectallcontainer { 531 padding: 0 0 1.5em 0; 532} 533 534#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer { 535 background-color: transparent; 536 margin: 0; 537 border-top: 0; 538 border-bottom: 0; 539 540 .paging { 541 padding: 0 0.3em; 542 } 543} 544 545#page-mod-quiz-edit div.question div.content div.questioncontrols { 546 background-color: $body-bg; 547} 548 549#page-mod-quiz-edit div.question div.content div.points { 550 margin-top: -0.5em; 551 padding-bottom: 0; 552 border: none; 553 background-color: $body-bg; 554 position: static; 555 width: 12.1em; 556 float: right; 557 margin-right: 60px; 558} 559 560#page-mod-quiz-edit div.question div.content div.points br { 561 display: none; 562} 563 564#page-mod-quiz-edit div.question div.content div.points label { 565 display: inline-block; 566} 567 568#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus { 569 background-color: $body-bg; 570} 571 572#page-mod-quiz-edit .quizpagedelete, 573#page-mod-quiz-edit .quizpagedelete img { 574 background-color: transparent; 575} 576 577#page-mod-quiz-edit div.quizpage .pagecontent { 578 border: 1px solid #ddd; 579 580 @include border-radius(2px); 581 overflow: hidden; 582} 583 584#page-mod-quiz-edit div.questionbank .categoryinfo { 585 padding: 0.3em 0; 586} 587 588#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer { 589 padding: 0; 590 591 strong { 592 display: block; 593 } 594 595 hr, 596 br { 597 display: none; 598 } 599 600 strong { 601 margin-left: -0.3em; 602 } 603 604 strong label { 605 margin-left: 0.3em; 606 } 607 608 input { 609 margin-left: 0; 610 } 611 612 input + input { 613 margin-left: 5px; 614 } 615} 616 617.questionbankwindow .module { 618 width: auto; 619} 620 621.questionbankwindow .form-autocomplete-selection { 622 margin-left: 0; 623} 624 625#page-mod-quiz-edit div.editq div.question div.content { 626 background-color: $body-bg; 627 border: 1px solid #ddd; 628 629 @include border-radius(2px); 630 overflow: hidden; 631} 632 633#page-mod-quiz-edit ul.slots .activityinstance img.activityicon { 634 margin-top: 0; 635 padding-right: 4px; 636} 637 638.path-mod-quiz .statedetails { 639 display: block; 640 font-size: 0.9em; 641} 642 643a#hidebankcmd { 644 color: $link-color; 645} 646 647// override question plugins 648 649// qtype_shortanswer 650 651.que.shortanswer .answer { 652 padding: 0; 653} 654 655.que label { 656 display: inline; 657} 658 659body.path-question-type .mform fieldset.hidden { 660 padding: 0; 661 margin: 0.7em 0 0; 662} 663 664// Fix for accurate positioning of ddwtos drag and drop question types. 665.que.ddwtos, 666.que.ddwtos .drop { 667 box-sizing: content-box; 668} 669 670.tag-condition-container { 671 position: relative; 672} 673 674@include media-breakpoint-down(sm) { 675 .que .info { 676 float: none; 677 width: auto; 678 } 679 .que .content { 680 margin: 0; 681 } 682} 683