theme/noname/scss/moodle/question.scss

   1 /* Question */
   2 .questionbank h2 {
   3     margin-top: 0;
   4 }
   5 .questioncategories h3 {
   6     margin-top: 0;
   7 }
   8 #chooseqtypebox {
   9     margin-top: 1em;
  10 }
  11 #chooseqtype h3 {
  12     margin: 0 0 0.3em;
  13 }
  14 #chooseqtype .instruction {
  15     display: none;
  16 }
  17 #chooseqtype .fakeqtypes {
  18     border-top: 1px solid silver;
  19 }
  20 #chooseqtype .qtypeoption {
  21     margin-bottom: 0.5em;
  22 }
  23 #chooseqtype label {
  24     display: block;
  25 }
  26 #chooseqtype .qtypename img {
  27     padding: 0 0.3em;
  28 }
  29 #chooseqtype .qtypename {
  30     display: inline-table;
  31     width: 16em;
  32 }
  33 #chooseqtype .qtypesummary {
  34     display: block;
  35     margin: 0 2em;
  36 }
  37 #chooseqtype .submitbuttons {
  38     margin: 0.7em 0;
  39     text-align: center;
  40 }
  41 #qtypechoicecontainer {
  42     display: none;
  43 }
  44 #qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
  45     background: none;
  46 }
  47 #qtypechoicecontainer.yui-panel .hd {
  48     color: #333;
  49     letter-spacing: 1px;
  50     text-shadow: 1px 1px 1px #fff;
  51     @include border-top-radius(10px);
  52     border: 1px solid #ccc;
  53     border-bottom: 1px solid #bbb;
  54     @include gradient-y(#fff, #ccc);
  55 }
  56 #qtypechoicecontainer {
  57     font-size: 12px;
  58     color: #333;
  59     background: #F2F2F2;
  60     @include border-radius(10px);
  61     border: 1px solid #ccc;
  62     border-top: 0 none;
  63     @include box-shadow(5px 5px 20px 0 #666);
  64 }
  65 #qtypechoicecontainer #chooseqtype {
  66     width: 40em;
  67 }
  68 #chooseqtypehead h3 {
  69     margin: 0;
  70     font-weight: normal;
  71 }
  72 #chooseqtype .qtypes {
  73     position: relative;
  74     border-bottom: 1px solid #bbb;
  75     padding: 0.24em 0;
  76 }
  77 #chooseqtype .alloptions {
  78     overflow-x: hidden;
  79     overflow-y: auto;
  80     max-height: 400px;
  81     max-height: calc(100vh - 15em);
  82  /* The next line is a workaround because recess is crap. Delete ththe following line once
  83   * https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75
  84   * is fixed. The previous line is the right one. */
  85     max-height: 60vh;
  86     width: 60%;
  87 }
  88 #chooseqtype .qtypeoption {
  89     margin-bottom: 0;
  90     padding: 0.3em 0.3em 0.3em 1.6em;
  91 }
  92 #chooseqtype .qtypeoption img {
  93     vertical-align: text-bottom;
  94     padding-left: 1em;
  95     padding-right: 0.5em;
  96 }
  97 #chooseqtype .selected {
  98     background-color: #fff;
  99     @include box-shadow(0px 0 10px 0 #ccc);
 100 }
 101 #chooseqtype .instruction,
 102 #chooseqtype .qtypesummary {
 103     display: none;
 104     position: absolute;
 105     top: 0;
 106     right: 0;
 107     bottom: 0;
 108     left: 60%;
 109     margin: 0;
 110     overflow-x: hidden;
 111     overflow-y: auto;
 112     padding: 1.5em 1.6em;
 113     background-color: #fff;
 114     overflow-y: auto;
 115 }
 116 #chooseqtype .instruction,
 117 #chooseqtype .selected .qtypesummary {
 118     display: block;
 119 }
 120 #categoryquestions {
 121     margin: 0;
 122     td,
 123     th {
 124         padding: 0 0.2em;
 125     }
 126     th {
 127         text-align: left;
 128         font-weight: normal;
 129     }
 130     .checkbox {
 131         padding-left: 5px;
 132     }
 133     .checkbox input[type="checkbox"] {
 134         margin-left: 0px;
 135         float: none;
 136     }
 137     .iconcol {
 138         padding: 3px;
 139     }
 140     label {
 141         margin: 0;
 142     }
 143 }
 144 #page-mod-quiz-edit {
 145     div.questionbankwindow div.header {
 146         margin: 0;
 147     }
 148     div.questionbankwindow.block {
 149         padding: 0;
 150     }
 151 }
 152 .questionbank .singleselect {
 153     margin: 0;
 154 }
 155 /* Question editing form */
 156 #combinedfeedbackhdr div.fhtmleditor {
 157     padding: 0;
 158 }
 159 #combinedfeedbackhdr div.fcheckbox {
 160     margin-bottom: 1em;
 161 }
 162 #multitriesheader div.fitem_feditor {
 163     margin-top: 1em;
 164 }
 165 #multitriesheader div.fitem_fgroup {
 166     margin-bottom: 1em;
 167 }
 168 #multitriesheader div.fitem_fgroup fieldset.felement label {
 169     margin-left: 0.3em;
 170     margin-right: 0.3em;
 171 }
 172 body.path-question-type .fitem_fgroup .accesshide {
 173     font: inherit;
 174     left: 0;
 175     position: static;
 176     padding-right: .3em;
 177 }
 178 .que {
 179     clear: left;
 180     text-align: left;
 181     margin: 0 auto 1.8em auto;
 182 }
 183 .que .info {
 184     float: left;
 185     width: 7em;
 186     padding: 0.5em;
 187     margin-bottom: 1.8em;
 188     background-color: $gray-lighter;
 189     border: 1px solid darken($gray-lighter, 7%);
 190     @include border-radius(2px);
 191 }
 192 .que h3.no {
 193     margin: 0;
 194     font-size: 0.8em;
 195     line-height: 1;
 196 }
 197 .que span.qno {
 198     font-size: 1.5em;
 199     font-weight: bold;
 200 }
 201 .que .info > div {
 202     font-size: 0.8em;
 203     margin-top: 0.7em;
 204 }
 205 .que .info .questionflag.editable {
 206     cursor: pointer;
 207 }
 208 .que .info .editquestion img,
 209 .que .info .questionflag img,
 210 .que .info .questionflag input {
 211     vertical-align: bottom;
 212 }
 213 .que .content {
 214     margin: 0 0 0 8.5em;
 215 }
 216 .que .formulation,
 217 .que .outcome,
 218 .que .comment {
 219     @extend .alert;
 220 }
 221 .que .formulation {
 222     @extend .alert-info;
 223 }
 224 .formulation input[type="text"],
 225 .formulation select {
 226     width: auto;
 227     vertical-align: baseline;
 228 }
 229 .path-mod-quiz input[size] {
 230     width: auto;
 231 }
 232 .que .comment {
 233     @extend .alert-success;
 234 }
 235 .que .history {
 236     @extend .card;
 237 }
 238 .que .ablock {
 239     margin: 0.7em 0 0.3em 0;
 240 }
 241 .que .im-controls {
 242     margin-top: 0.5em;
 243     text-align: left;
 244 }
 245 .que .specificfeedback,
 246 .que .generalfeedback,
 247 .que .rightanswer,
 248 .que .im-feedback,
 249 .que .feedback,
 250 .que p {
 251     margin: 0 0 0.5em;
 252 }
 253 .que .qtext {
 254     margin-bottom: 1.5em;
 255 }
 256 .que .correctness {
 257     @extend label;
 258     &.correct {
 259         @extend .text-success;
 260     }
 261     &.partiallycorrect {
 262         @extend .text-warning;
 263     }
 264     &.notanswered,
 265     &.incorrect {
 266         @extend .text-danger;
 267     }
 268 }
 269 .que .validationerror {
 270     @extend .text-danger;
 271 }
 272 // copied from .formFieldState in mixin.less
 273 // and made more specific
 274 @mixin answerState($textColor, $backgroundColor) {
 275     $borderColor: $textColor;
 276     color: $textColor;
 277     background-color: $backgroundColor;
 278     border-color: $borderColor;
 279     @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 280     &:focus {
 281       border-color: darken($borderColor, 10%);
 282       $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
 283       @include box-shadow($shadow);
 284     }
 285 }
 286
 287 .formulation .correct {
 288     @extend .text-success;
 289 }
 290 .formulation .partiallycorrect {
 291     @extend .text-warning;
 292 }
 293 .formulation .incorrect {
 294     @extend .text-danger;
 295 }
 296 .formulation select.correct,
 297 .formulation input.correct {
 298   @include answerState($btn-success-color, $btn-success-bg);
 299 }
 300 .formulation select.partiallycorrect,
 301 .formulation input.partiallycorrect {
 302   @include answerState($btn-warning-color, $btn-warning-bg);
 303 }
 304 .formulation select.incorrect,
 305 .formulation input.incorrect {
 306   @include answerState($btn-danger-color, $btn-danger-bg);
 307 }
 308
 309 .que .grading,
 310 .que .comment,
 311 .que .commentlink,
 312 .que .history {
 313     margin-top: 0.5em;
 314 }
 315 .que .history h3 {
 316     margin: 0 0 0.2em;
 317     font-size: 1em;
 318 }
 319 .que .history table {
 320     width: 100%;
 321     margin: 0;
 322 }
 323 .que .history .current {
 324     font-weight: bold;
 325 }
 326 .que .questioncorrectnessicon {
 327     vertical-align: text-bottom;
 328 }
 329 .que input.questionflagimage {
 330     padding-right: 3px;
 331 }
 332 .importerror {
 333     margin-top: 10px;
 334     border-bottom: 1px solid #555;
 335 }
 336 .mform .que.comment .fitemtitle {
 337     width: 20%;
 338 }
 339 #page-question-preview #techinfo {
 340     margin: 1em 0;
 341 }
 342
 343 // imported from quiz.css
 344
 345 #page-mod-quiz-edit .box.generalbox.questionbank {
 346     padding: 0.5em;
 347 }
 348
 349 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
 350 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
 351 #page-mod-quiz-edit .questionbank .choosecategory {
 352     padding: 0;
 353 }
 354
 355 #page-mod-quiz-edit .questionbank .choosecategory select {
 356     width: 100%;
 357 }
 358
 359 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
 360     background: transparent;
 361 }
 362 #page-mod-quiz-edit #categoryquestions>thead {
 363     background: #FFF;
 364 }
 365 #page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) {
 366     background: #e4e4e4;
 367 }
 368
 369 #page-mod-quiz-edit .questionbankwindow div.header {
 370     color: #444;
 371     text-shadow: none;
 372     padding: 3px;
 373     @include border-top-radius(4px);
 374     margin: 0 -10px 0 -10px;
 375     padding: 2px 10px 2px 10px;
 376     background: transparent; /* Old browsers */
 377 }
 378
 379 #page-mod-quiz-edit .questionbankwindow div.header a:link,
 380 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
 381     color: $link-color;
 382 }
 383
 384 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
 385     color: $link-hover-color;
 386 }
 387
 388 #page-mod-quiz-edit .createnewquestion {
 389     padding: 0.3em 0;
 390     div, input {
 391         margin: 0;
 392     }
 393 }
 394
 395 #page-mod-quiz-edit .questionbankwindow div.header .title {
 396     color: $body-color;
 397 }
 398
 399 #page-mod-quiz-edit div.container div.generalbox {
 400     background-color: transparent;
 401     padding: 1.5em;
 402 }
 403
 404 #page-mod-quiz-edit .categoryinfo {
 405     background-color: transparent;
 406     border-bottom: none;
 407 }
 408
 409 #page-mod-quiz-edit .createnewquestion .singlebutton input {
 410     margin-bottom: 0;
 411 }
 412
 413 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
 414 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
 415     padding: 0 0 1.5em 0;
 416 }
 417
 418 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
 419     background-color: transparent;
 420     margin: 0;
 421     border-top: 0;
 422     border-bottom: 0;
 423     .paging {
 424         padding: 0 0.3em;
 425     }
 426 }
 427
 428 #page-mod-quiz-edit div.question div.content div.questioncontrols {
 429     background-color: $body-bg;
 430 }
 431 #page-mod-quiz-edit div.question div.content div.points {
 432     margin-top: -0.5em;
 433     padding-bottom: 0em;
 434     border: none;
 435     background-color: $body-bg;
 436     position: static;
 437     width: 12.1em;
 438     float: right;
 439     margin-right: 60px;
 440 }
 441 #page-mod-quiz-edit div.question div.content div.points br {
 442     display: none;
 443 }
 444 #page-mod-quiz-edit div.question div.content div.points label {
 445     display: inline-block;
 446 }
 447
 448 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
 449     background-color: $body-bg;
 450 }
 451
 452 #page-mod-quiz-edit .quizpagedelete,
 453 #page-mod-quiz-edit .quizpagedelete img {
 454     background-color: transparent;
 455 }
 456
 457 #page-mod-quiz-edit div.quizpage .pagecontent {
 458     border: 1px solid #ddd;
 459     @include border-radius(2px);
 460     overflow: hidden;
 461 }
 462
 463 #page-mod-quiz-edit div.questionbank .categoryinfo {
 464     padding: 0.3em 0;
 465 }
 466
 467 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
 468     padding: 0;
 469     strong {
 470         display: block;
 471     }
 472     hr, br {
 473         display: none;
 474     }
 475     strong {
 476         margin-left: -0.3em;
 477     }
 478     strong label {
 479         margin-left: 0.3em;
 480     }
 481     input {
 482         margin-left: 0;
 483     }
 484     input + input {
 485         margin-left: 5px;
 486     }
 487 }
 488
 489 .questionbankwindow .module {
 490     width: auto;
 491 }
 492
 493 #page-mod-quiz-edit div.editq div.question div.content {
 494     background-color: $body-bg;
 495     border: 1px solid #ddd;
 496     @include border-radius(2px);
 497     overflow: hidden;
 498 }
 499
 500 .path-mod-quiz .statedetails {
 501     display: block;
 502     font-size: 0.9em;
 503 }
 504
 505 a#hidebankcmd {
 506     color: $link-color;
 507 }
 508
 509 // override question plugins
 510
 511 // qtype_shortanswer
 512
 513 .que.shortanswer .answer {
 514     padding: 0;
 515 }
 516
 517 .que label {
 518     display: inline;
 519 }
 520
 521 body.path-question-type .mform fieldset.hidden {
 522     padding: 0;
 523     margin: 0.7em 0 0;
 524 }