From 3ce7b80ee24c505886796e0061fee6ac6d9ac727 Mon Sep 17 00:00:00 2001 From: farhan Date: Fri, 8 Nov 2024 12:58:33 +0500 Subject: [PATCH 1/2] chore: Convert problem block sass variables into css variables --- xmodule/assets/capa/_display.scss | 354 +++++++++++++-------------- xmodule/assets/problem/_edit.scss | 18 +- xmodule/assets/tabs/_codemirror.scss | 2 +- 3 files changed, 187 insertions(+), 187 deletions(-) diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss index 15571b65dc30..1f2544605001 100644 --- a/xmodule/assets/capa/_display.scss +++ b/xmodule/assets/capa/_display.scss @@ -50,7 +50,7 @@ $asterisk-icon: '\f069'; // .fa-asterisk // +Mixins - Status Icon - Capa // ==================== -@mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d") { +@mixin status-icon($color: var(--gray), $fontAwesomeIcon: "\f00d") { .status-icon { &::after { @extend %use-font-awesome; @@ -66,13 +66,13 @@ $asterisk-icon: '\f069'; // .fa-asterisk // ==================== h2 { margin-top: 0; - margin-bottom: ($baseline*0.75); + margin-bottom: calc((var(--baseline)*0.75)); &.problem-header { display: inline-block; section.staff { - margin-top: ($baseline*1.5); + margin-top: calc((var(--baseline)*1.5)); font-size: 80%; } } @@ -89,10 +89,10 @@ h2 { } %feedback-hint { - margin-top: ($baseline / 4); + margin-top: calc((var(--baseline) / 4)); .icon { - @include margin-right($baseline / 4); + @include margin-right(calc((var(--baseline) / 4))); } } @@ -100,7 +100,7 @@ h2 { @extend %feedback-hint; .icon { - color: $incorrect; + color: var(--incorrect); } } @@ -109,7 +109,7 @@ h2 { @extend %feedback-hint; .icon { - color: $correct; + color: var(--correct); } } @@ -143,19 +143,19 @@ iframe[seamless] { } .inline-error { - color: darken($error-color, 11%); + color: var(--error-color-dark) } div.problem-progress { display: inline-block; - color: $gray-d1; + color: var(--gray-d1); font-size: em(14); } // +Problem - Base // ==================== div.problem { - padding-top: $baseline; + padding-top: var(--baseline); @media print { display: block; @@ -176,25 +176,25 @@ div.problem { display: inline; + p { - margin-top: $baseline; + margin-top: var(--baseline); } } .question-description { - color: $gray-d1; - font-size: $small-font-size; + color: var(--gray-d1); + font-size: var(--small-font-size); } form > label, .problem-group-label { display: block; - margin-bottom: $baseline; + margin-bottom: var(--baseline); font: inherit; color: inherit; -webkit-font-smoothing: initial; } .problem-group-label + .question-description { - margin-top: -$baseline; + margin-top: calc(-1 * var(--baseline)); } } @@ -203,7 +203,7 @@ div.problem { // can not use the & + & since .problem is nested deeply in .xmodule_display.xmodule_CapaModule .wrapper-problem-response + .wrapper-problem-response, .wrapper-problem-response + p { - margin-top: ($baseline * 1.5); + margin-top: calc((var(--baseline) * 1.5)); } // Choice Group - silent class @@ -219,14 +219,14 @@ div.problem { display: inline-block; clear: both; - margin-bottom: ($baseline/2); - border: 2px solid $gray-l4; + margin-bottom: calc((var(--baseline)/2)); + border: 2px solid var(--gray-l4); border-radius: 3px; - padding: ($baseline/2); + padding: calc((var(--baseline)/2)); width: 100%; &::after { - @include margin-left($baseline*0.75); + @include margin-left(calc((var(--baseline)*0.75))); } } @@ -242,15 +242,15 @@ div.problem { input[type="radio"], input[type="checkbox"] { - @include margin($baseline/4); - @include margin-right($baseline/2); + @include margin(calc((var(--baseline)/4))); + @include margin-right(calc((var(--baseline)/2))); } input { &:focus, &:hover { & + label { - border: 2px solid $blue; + border: 2px solid var(--blue); } } @@ -258,25 +258,25 @@ div.problem { &:focus, &:hover { & + label.choicegroup_correct { - @include status-icon($correct, $checkmark-icon); + @include status-icon(var(--correct), $checkmark-icon); - border: 2px solid $correct; + border: 2px solid var(--correct); } & + label.choicegroup_partially-correct { - @include status-icon($partially-correct, $asterisk-icon); + @include status-icon(var(--partially-correct), $asterisk-icon); - border: 2px solid $partially-correct; + border: 2px solid var(--partially-correct); } & + label.choicegroup_incorrect { - @include status-icon($incorrect, $cross-icon); + @include status-icon(var(--incorrect), $cross-icon); - border: 2px solid $incorrect; + border: 2px solid var(--incorrect); } & + label.choicegroup_submitted { - border: 2px solid $submitted; + border: 2px solid var(--submitted); } } } @@ -293,11 +293,11 @@ div.problem { } label { - @include padding($baseline/2); - @include padding-left($baseline*2.3); + @include padding(calc((var(--baseline)/2))); + @include padding-left(calc((var(--baseline)*2.3))); position: relative; - font-size: $base-font-size; + font-size: var(--base-font-size); line-height: normal; cursor: pointer; } @@ -308,19 +308,19 @@ div.problem { position: absolute; top: 0.35em; - width: $baseline*1.1; - height: $baseline*1.1; + width: calc(var(--baseline)*1.1); + height: calc(var(--baseline)*1.1); z-index: 1; } legend { - margin-bottom: $baseline; + margin-bottom: var(--baseline); max-width: 100%; white-space: normal; } legend + .question-description { - margin-top: -$baseline; + margin-top: calc(-1 * var(--baseline)); max-width: 100%; white-space: normal; } @@ -332,24 +332,24 @@ div.problem { // Summary status indicators shown after the input area div.problem { .indicator-container { - @include margin-left($baseline*0.75); + @include margin-left(calc((var(--baseline)*0.75))); .status { - width: $baseline; + width: var(--baseline); // CASE: correct answer &.correct { - @include status-icon($correct, $checkmark-icon); + @include status-icon(var(--correct), $checkmark-icon); } // CASE: partially correct answer &.partially-correct { - @include status-icon($partially-correct, $asterisk-icon); + @include status-icon(var(--partially-correct), $asterisk-icon); } // CASE: incorrect answer &.incorrect { - @include status-icon($incorrect, $cross-icon); + @include status-icon(var(--incorrect), $cross-icon); } &.submitted, @@ -379,7 +379,7 @@ div.problem { .solution-span { > span { - margin: $baseline 0; + margin: var(--baseline) 0; display: block; position: relative; @@ -413,20 +413,20 @@ div.problem { font-style: normal; &:hover { - color: $blue; + color: var(--blue); } } } &.correct, &.ui-icon-check { input { - border-color: $correct; + border-color: var(--correct); } } &.partially-correct, &.ui-icon-check { input { - border-color: $partially-correct; + border-color: var(--partially-correct); } } @@ -438,25 +438,25 @@ div.problem { &.ui-icon-close { input { - border-color: $incorrect; + border-color: var(--incorrect); } } &.incorrect, &.incomplete { input { - border-color: $incorrect; + border-color: var(--incorrect); } } &.submitted, &.ui-icon-check { input { - border-color: $submitted; + border-color: var(--submitted); } } p.answer { display: inline-block; - margin-top: ($baseline / 2); + margin-top: calc((var(--baseline) / 2)); margin-bottom: 0; &::before { @@ -483,7 +483,7 @@ div.problem { } img.loading { - @include padding-left($baseline/2); + @include padding-left(calc((var(--baseline)/2))); display: inline-block; } @@ -517,7 +517,7 @@ div.problem { top: 4px; width: 14px; height: 14px; - background: url('#{$static-path}/images/unanswered-icon.png') center center no-repeat; + background: url('#{var(--static-path)}/images/unanswered-icon.png') center center no-repeat; } &.processing, &.ui-icon-processing { @@ -526,7 +526,7 @@ div.problem { top: 6px; width: 25px; height: 20px; - background: url('#{$static-path}/images/spinner.gif') center center no-repeat; + background: url('#{var(--static-path)}/images/spinner.gif') center center no-repeat; } &.ui-icon-check { @@ -535,7 +535,7 @@ div.problem { top: 3px; width: 25px; height: 20px; - background: url('#{$static-path}/images/correct-icon.png') center center no-repeat; + background: url('#{var(--static-path)}/images/correct-icon.png') center center no-repeat; } &.incomplete, &.ui-icon-close { @@ -544,24 +544,24 @@ div.problem { top: 3px; width: 20px; height: 20px; - background: url('#{$static-path}/images/incorrect-icon.png') center center no-repeat; + background: url('#{var(--static-path)}/images/incorrect-icon.png') center center no-repeat; } } .reload { @include float(right); - margin: ($baseline/2); + margin: calc((var(--baseline)/2)); } .grader-status { @include clearfix(); - margin: $baseline/2 0; - padding: $baseline/2; + margin: calc(var(--baseline)/2) 0; + padding: calc(var(--baseline)/2); border-radius: 5px; - background: $gray-l6; + background: var(--gray-l6); span { display: block; @@ -574,7 +574,7 @@ div.problem { .grading { margin: 0px 7px 0 0; padding-left: 25px; - background: url('#{$static-path}/images/info-icon.png') left center no-repeat; + background: url('#{var(--static-path)}/images/info-icon.png') left center no-repeat; text-indent: 0px; } @@ -586,11 +586,11 @@ div.problem { } &.file { - margin-top: $baseline; - padding: $baseline 0 0 0; + margin-top: var(--baseline); + padding: var(--baseline) 0 0 0; border: 0; border-top: 1px solid #eee; - background: $white; + background: var(--white); p.debug { display: none; @@ -605,13 +605,13 @@ div.problem { .evaluation { p { - margin-bottom: ($baseline/5); + margin-bottom: calc((var(--baseline)/5)); } } .feedback-on-feedback { - margin-right: $baseline; + margin-right: var(--baseline); height: 100px; } @@ -646,7 +646,7 @@ div.problem { } .submit-message-container { - margin: $baseline 0px ; + margin: var(--baseline) 0px ; } } @@ -753,17 +753,17 @@ div.problem { padding: 0px 5px; border: 1px solid #eaeaea; border-radius: 3px; - background-color: $gray-l6; + background-color: var(--gray-l6); white-space: nowrap; font-size: .9em; } pre { overflow: auto; - padding: 6px $baseline/2; - border: 1px solid $gray-l3; + padding: 6px calc(var(--baseline)/2); + border: 1px solid var(--gray-l3); border-radius: 3px; - background-color: $gray-l6; + background-color: var(--gray-l6); font-size: .9em; line-height: 1.4; @@ -784,7 +784,7 @@ div.problem { input { box-sizing: border-box; - border: 2px solid $gray-l4; + border: 2px solid var(--gray-l4); border-radius: 3px; min-width: 160px; height: 46px; @@ -792,47 +792,47 @@ div.problem { .status { display: inline-block; - margin-top: ($baseline/2); + margin-top: calc((var(--baseline)/2)); background: none; } // CASE: incorrect answer > .incorrect { input { - border: 2px solid $incorrect; + border: 2px solid var(--incorrect); } .status { - @include status-icon($incorrect, $cross-icon); + @include status-icon(var(--incorrect), $cross-icon); } } // CASE: partially correct answer > .partially-correct { input { - border: 2px solid $partially-correct; + border: 2px solid var(--partially-correct); } .status { - @include status-icon($partially-correct, $asterisk-icon); + @include status-icon(var(--partially-correct), $asterisk-icon); } } // CASE: correct answer > .correct { input { - border: 2px solid $correct; + border: 2px solid var(--correct); } .status { - @include status-icon($correct, $checkmark-icon); + @include status-icon(var(--correct), $checkmark-icon); } } // CASE: submitted, correctness withheld > .submitted { input { - border: 2px solid $submitted; + border: 2px solid var(--submitted); } .status { @@ -843,7 +843,7 @@ div.problem { // CASE: unanswered and unsubmitted > .unanswered, > .unsubmitted { input { - border: 2px solid $gray-l4; + border: 2px solid var(--gray-l4); } .status { @@ -868,7 +868,7 @@ div.problem { } .trailing_text { - @include margin-right($baseline/2); + @include margin-right(calc((var(--baseline)/2))); display: inline-block; } @@ -930,7 +930,7 @@ div.problem { visibility: hidden; width: 0; border-right: none; - border-left: 1px solid $black; + border-left: 1px solid var(--black); } } } @@ -952,14 +952,14 @@ div.problem { .capa-message { display: inline-block; - color: $gray-d1; + color: var(--gray-d1); -webkit-font-smoothing: antialiased; } // +Problem - Actions // ==================== div.problem .action { - min-height: $baseline; + min-height: var(--baseline); width: 100%; display: flex; display: -ms-flexbox; @@ -972,11 +972,11 @@ div.problem .action { display: inline-flex; justify-content: flex-end; width: 100%; - padding-bottom: $baseline; + padding-bottom: var(--baseline); } .problem-action-button-wrapper { - @include border-right(1px solid $gray-300); + @include border-right(1px solid var(--gray-300)); @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation display: inline-block; @@ -994,11 +994,11 @@ div.problem .action { &:hover, &:focus, &:active { - color: $primary !important; + color: var(--primary) !important; } .icon { - margin-bottom: $baseline / 10; + margin-bottom: calc(var(--baseline) / 10); display: block; } @@ -1008,41 +1008,41 @@ div.problem .action { } .submit-attempt-container { - padding-bottom: $baseline; + padding-bottom: var(--baseline); flex-grow: 1; display: flex; align-items: center; - @media (max-width: $bp-screen-lg) { + @media (max-width: var(--bp-screen-lg)) { max-width: 100%; - padding-bottom: $baseline; + padding-bottom: var(--baseline); } .submit { - @include margin-right($baseline / 2); + @include margin-right(calc((var(--baseline) / 2))); @include float(left); white-space: nowrap; } .submit-cta-description { - color: $primary; + color: var(--primary); font-size: small; - padding-right: $baseline / 2; + padding-right: calc(var(--baseline) / 2); } .submit-cta-link-button { - color: $primary; - padding-right: $baseline / 4; + color: var(--primary); + padding-right: calc(var(--baseline) / 4); } } .submission-feedback { - @include margin-right($baseline / 2); + @include margin-right(calc((var(--baseline) / 2))); - margin-top: $baseline / 2; + margin-top: calc(var(--baseline) / 2); display: inline-block; - color: $gray-d1; - font-size: $medium-font-size; + color: var(--gray-d1); + font-size: var(--medium-font-size); -webkit-font-smoothing: antialiased; vertical-align: middle; @@ -1072,7 +1072,7 @@ div.problem { visibility: hidden; } - #{$all-text-inputs} { + #{var(--all-text-inputs)} { display: inline; width: auto; } @@ -1082,7 +1082,7 @@ div.problem { display: block; margin: lh() 0; padding: lh(); - border: 1px solid $gray-l3; + border: 1px solid var(--gray-l3); } .message { @@ -1114,52 +1114,52 @@ div.problem { } div.capa_alert { - margin-top: $baseline; + margin-top: var(--baseline); padding: 8px 12px; - border: 1px solid $warning-color; + border: 1px solid var(--warning-color); border-radius: 3px; - background: $warning-color-accent; + background: var(--warning-color-accent); font-size: 0.9em; } .notification { @include float(left); - margin-top: $baseline / 2; - padding: ($baseline / 2.5) ($baseline / 2) ($baseline / 5) ($baseline / 2); - line-height: $base-line-height; + margin-top: calc(var(--baseline) / 2); + padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2)); + line-height: var(--base-line-height); &.success { - @include notification-by-type($success); + @include notification-by-type(var(--success)); } &.error { - @include notification-by-type($danger); + @include notification-by-type(var(--danger)); } &.warning { - @include notification-by-type($warning); + @include notification-by-type(var(--warning)); } &.general { - @include notification-by-type($general-color-accent); + @include notification-by-type(var(--general-color-accent)); } &.problem-hint { - border: 1px solid $uxpl-gray-background; + border: 1px solid var(--uxpl-gray-background); border-radius: 6px; .icon { - @include margin-right(3 * $baseline / 4); + @include margin-right(calc(3 * var(--baseline) / 4) ); - color: $uxpl-gray-dark; + color: var(--uxpl-gray-dark); } li { - color: $uxpl-gray-base; + color: var(--uxpl-gray-base); strong { - color: $uxpl-gray-dark; + color: var(--uxpl-gray-dark); } } } @@ -1168,7 +1168,7 @@ div.problem { @include float(left); position: relative; - top: $baseline / 5; + top: calc(var(--baseline) / 5); } .notification-message { @@ -1184,7 +1184,7 @@ div.problem { margin: 0; li:not(:last-child) { - margin-bottom: $baseline / 4; + margin-bottom: calc(var(--baseline) / 4); } } } @@ -1198,13 +1198,13 @@ div.problem { .notification-btn { @include float(right); - padding: ($baseline / 10) ($baseline / 4); - min-width: ($baseline * 3); + padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4)); + min-width: calc((var(--baseline) * 3)); display: block; clear: both; &:first-child { - margin-bottom: $baseline / 4; + margin-bottom: calc(var(--baseline) / 4); } } @@ -1225,26 +1225,26 @@ div.problem { &.btn-brand { &:hover { - background-color: $btn-brand-focus-background; + background-color: var(--btn-brand-focus-background); } } } .review-btn { - color: $blue; // notification type has other colors + color: var(--blue); // notification type has other colors &.sr { - color: $blue; + color: var(--blue); } } div.capa_reset { padding: 25px; - border: 1px solid $error-color; - background-color: lighten($error-color, 25%); + background-color: var(--error-color-light); + border: 1px solid var(--error-color); border-radius: 3px; font-size: 1em; - margin-top: $baseline/2; - margin-bottom: $baseline/2; + margin-top: calc(var(--baseline)/2); + margin-bottom: calc(var(--baseline)/2); } .capa_reset>h2 { @@ -1256,7 +1256,7 @@ div.problem { } .hints { - border: 1px solid $gray-l3; + border: 1px solid var(--gray-l3); h3 { @extend %t-strong; @@ -1264,7 +1264,7 @@ div.problem { padding: 9px; border-bottom: 1px solid #e3e3e3; background: #eee; - text-shadow: 0 1px 0 $white; + text-shadow: 0 1px 0 var(--white); font-size: em(16); } @@ -1283,8 +1283,8 @@ div.problem { a { display: block; padding: 9px; - background: $gray-l6; - box-shadow: inset 0 0 0 1px $white; + background: var(--gray-l6); + box-shadow: inset 0 0 0 1px var(--white); } } @@ -1311,11 +1311,11 @@ div.problem { > section { position: relative; - margin-bottom: ($baseline/2); - padding: 9px 9px $baseline; + margin-bottom: calc((var(--baseline)/2)); + padding: 9px 9px var(--baseline); border: 1px solid #ddd; border-radius: 3px; - background: $white; + background: var(--white); box-shadow: inset 0 0 0 1px #eee; p:last-of-type { @@ -1331,8 +1331,8 @@ div.problem { box-sizing: border-box; display: block; - padding: ($baseline/5); - background: $gray-l4; + padding: calc((var(--baseline)/5)); + background: var(--gray-l4); text-align: right; font-size: 1em; @@ -1349,8 +1349,8 @@ div.problem { .external-grader-message { section { - padding-top: ($baseline*1.5); - padding-left: $baseline; + padding-top: calc((var(--baseline)*1.5)); + padding-left: var(--baseline); background-color: #fafafa; color: #2c2c2c; font-size: 1em; @@ -1369,9 +1369,9 @@ div.problem { padding: 0; .result-errors { - margin: ($baseline/4); - padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline*2); - background: url('#{$static-path}/images/incorrect-icon.png') center left no-repeat; + margin: calc((var(--baseline)/4)); + padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2)); + background: url('#{var(--static-path)}/images/incorrect-icon.png') center left no-repeat; li { color: #b00; @@ -1379,10 +1379,10 @@ div.problem { } .result-output { - margin: $baseline/4; - padding: $baseline 0 ($baseline*0.75) 50px; + margin: calc(var(--baseline)/4); + padding: var(--baseline) 0 calc((var(--baseline)*0.75)) 50px; border-top: 1px solid #ddd; - border-left: $baseline solid #fafafa; + border-left: var(--baseline) solid #fafafa; h4 { font-size: 1em; @@ -1394,7 +1394,7 @@ div.problem { } dt { - margin-top: $baseline; + margin-top: var(--baseline); } dd { @@ -1403,7 +1403,7 @@ div.problem { } .result-correct { - background: url('#{$static-path}/images/correct-icon.png') left 20px no-repeat; + background: url('#{var(--static-path)}/images/correct-icon.png') left 20px no-repeat; .result-actual-output { color: #090; @@ -1411,7 +1411,7 @@ div.problem { } .result-partially-correct { - background: url('#{$static-path}/images/partially-correct-icon.png') left 20px no-repeat; + background: url('#{var(--static-path)}/images/partially-correct-icon.png') left 20px no-repeat; .result-actual-output { color: #090; @@ -1419,7 +1419,7 @@ div.problem { } .result-incorrect { - background: url('#{$static-path}/images/incorrect-icon.png') left 20px no-repeat; + background: url('#{var(--static-path)}/images/incorrect-icon.png') left 20px no-repeat; .result-actual-output { color: #b00; @@ -1427,8 +1427,8 @@ div.problem { } .markup-text{ - margin: ($baseline/4); - padding: $baseline 0 15px 50px; + margin: calc((var(--baseline)/4)); + padding: var(--baseline) 0 15px 50px; border-top: 1px solid #ddd; border-left: 20px solid #fafafa; @@ -1451,19 +1451,19 @@ div.problem { div.problem { .rubric { tr { - margin: ($baseline/2) 0; + margin: calc((var(--baseline)/2)) 0; height: 100%; } td { - margin: ($baseline/2) 0; - padding: $baseline 0; + margin: calc((var(--baseline)/2)) 0; + padding: var(--baseline) 0; height: 100%; } th { - margin: ($baseline/4); - padding: ($baseline/4); + margin: calc((var(--baseline)/4)); + padding: calc((var(--baseline)/4)); } label, @@ -1471,12 +1471,12 @@ div.problem { position: relative; display: inline-block; margin: 3px; - padding: ($baseline*0.75); + padding: calc((var(--baseline)*0.75)); min-width: 50px; min-height: 50px; width: 150px; height: 100%; - background-color: $gray-l3; + background-color: var(--gray-l3); font-size: .9em; } @@ -1484,7 +1484,7 @@ div.problem { position: absolute; right: 0; bottom: 0; - margin: ($baseline/2); + margin: calc((var(--baseline)/2)); } .selected-grade { @@ -1508,14 +1508,14 @@ div.problem { div.problem { .annotation-input { margin: 0 0 1em 0; - border: 1px solid $gray-l3; + border: 1px solid var(--gray-l3); border-radius: 1em; .annotation-header { @extend %t-strong; padding: .5em 1em; - border-bottom: 1px solid $gray-l3; + border-bottom: 1px solid var(--gray-l3); } .annotation-body { padding: .5em 1em; } @@ -1557,7 +1557,7 @@ div.problem { @extend %ui-fake-link; display: inline-block; - margin-left: ($baseline*2); + margin-left: calc((var(--baseline)*2)); border: 1px solid rgb(102,102,102); &.selected { @@ -1590,13 +1590,13 @@ div.problem { .debug-value { margin: 1em 0; padding: 1em; - border: 1px solid $black; + border: 1px solid var(--black); background-color: #999; - color: $white; + color: var(--white); input[type="text"] { width: 100%; } - pre { background-color: $gray-l3; color: $black; } + pre { background-color: var(--gray-l3); color: var(--black); } &::before { @extend %t-strong; @@ -1623,7 +1623,7 @@ div.problem { @extend label.choicegroup_correct; input[type="text"] { - border-color: $correct; + border-color: var(--correct); } } @@ -1631,7 +1631,7 @@ div.problem { @extend label.choicegroup_partially-correct; input[type="text"] { - border-color: $partially-correct; + border-color: var(--partially-correct); } } @@ -1645,9 +1645,9 @@ div.problem { label.choicetextgroup_show_correct, section.choicetextgroup_show_correct { &::after { - @include margin-left($baseline*0.75); + @include margin-left(calc((var(--baseline)*0.75))); - content: url('#{$static-path}/images/correct-icon.png'); + content: url('#{var(--static-path)}/images/correct-icon.png'); } } @@ -1682,15 +1682,15 @@ div.problem .imageinput.capa_inputtype { } .correct { - @include status-icon($correct, $checkmark-icon); + @include status-icon(var(--correct), $checkmark-icon); } .incorrect { - @include status-icon($incorrect, $cross-icon); + @include status-icon(var(--incorrect), $cross-icon); } .partially-correct { - @include status-icon($partially-correct, $asterisk-icon); + @include status-icon(var(--partially-correct), $asterisk-icon); } .submitted { @@ -1723,15 +1723,15 @@ div.problem .annotation-input { } .correct { - @include status-icon($correct, $checkmark-icon); + @include status-icon(var(--correct), $checkmark-icon); } .incorrect { - @include status-icon($incorrect, $cross-icon); + @include status-icon(var(--incorrect), $cross-icon); } .partially-correct { - @include status-icon($partially-correct, $asterisk-icon); + @include status-icon(var(--partially-correct), $asterisk-icon); } .submitted { @@ -1743,5 +1743,5 @@ div.problem .annotation-input { // ==================== .problems-wrapper .loading-spinner { text-align: center; - color: $gray-d1; + color: var(--gray-d1); } diff --git a/xmodule/assets/problem/_edit.scss b/xmodule/assets/problem/_edit.scss index 018a0961c247..6630dd8a2903 100644 --- a/xmodule/assets/problem/_edit.scss +++ b/xmodule/assets/problem/_edit.scss @@ -5,20 +5,20 @@ margin-top: -4px; padding: 3px 9px; font-size: 12px; - color: $link-color; + color: var(--link-color); &.current { - border: 1px solid $lightGrey !important; + border: 1px solid var(--lightGrey) !important; border-radius: 3px !important; - background: $lightGrey !important; - color: $darkGrey !important; + background: var(--lightGrey) !important; + color: var(--darkGrey) !important; pointer-events: none; cursor: none; &:hover, &:focus { box-shadow: 0 0 0 0 !important; - background-color: $white; + background-color: var(--white); } } } @@ -31,9 +31,9 @@ top: 41px; @include left(70%); width: 0; - border-left: 1px solid $gray-l2; + border-left: 1px solid var(--gray-l2); - background-color: $lightGrey; + background-color: var(--lightGrey); overflow: hidden; &.shown { @@ -76,7 +76,7 @@ margin-right: 30px; .icon { - height: ($baseline * 1.5); + height: calc(var(--baseline) * 1.5); } } } @@ -105,5 +105,5 @@ width: 26px; height: 21px; vertical-align: middle; - color: $body-color; + color: var(--body-color); } diff --git a/xmodule/assets/tabs/_codemirror.scss b/xmodule/assets/tabs/_codemirror.scss index 237d1850332a..37a894a10395 100644 --- a/xmodule/assets/tabs/_codemirror.scss +++ b/xmodule/assets/tabs/_codemirror.scss @@ -9,7 +9,7 @@ height: 379px; border: 1px solid #3c3c3c; border-top: 1px solid #8891a1; - background: $white; + background: var(--white); color: #3c3c3c; } From 9b4e805a0a22464d28e807d8c23ba09033c84be3 Mon Sep 17 00:00:00 2001 From: farhan Date: Fri, 8 Nov 2024 15:42:01 +0500 Subject: [PATCH 2/2] feat!: Drop sass support from porblem/cappa xblocks --- xmodule/assets/ProblemBlockDisplay.scss | 3 - xmodule/assets/ProblemBlockEditor.scss | 4 - xmodule/assets/capa/_display.scss | 1747 ----------------- xmodule/assets/editor/_edit.scss | 83 - xmodule/assets/problem/_edit.scss | 109 - xmodule/assets/tabs/_codemirror.scss | 20 - xmodule/capa_block.py | 6 +- .../ProblemBlockDisplay.css | 1541 +++++++++++++++ .../css-builtin-blocks/ProblemBlockEditor.css | 222 +++ xmodule/tests/test_util_builtin_assets.py | 58 - 10 files changed, 1766 insertions(+), 2027 deletions(-) delete mode 100644 xmodule/assets/ProblemBlockDisplay.scss delete mode 100644 xmodule/assets/ProblemBlockEditor.scss delete mode 100644 xmodule/assets/capa/_display.scss delete mode 100644 xmodule/assets/editor/_edit.scss delete mode 100644 xmodule/assets/problem/_edit.scss delete mode 100644 xmodule/assets/tabs/_codemirror.scss create mode 100644 xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css create mode 100644 xmodule/static/css-builtin-blocks/ProblemBlockEditor.css diff --git a/xmodule/assets/ProblemBlockDisplay.scss b/xmodule/assets/ProblemBlockDisplay.scss deleted file mode 100644 index 5175529246b0..000000000000 --- a/xmodule/assets/ProblemBlockDisplay.scss +++ /dev/null @@ -1,3 +0,0 @@ -.xmodule_display.xmodule_ProblemBlock { - @import "capa/display.scss"; -} diff --git a/xmodule/assets/ProblemBlockEditor.scss b/xmodule/assets/ProblemBlockEditor.scss deleted file mode 100644 index 03d3cf1e2a98..000000000000 --- a/xmodule/assets/ProblemBlockEditor.scss +++ /dev/null @@ -1,4 +0,0 @@ -.xmodule_edit.xmodule_ProblemBlock { - @import "editor/edit.scss"; - @import "problem/edit.scss"; -} diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss deleted file mode 100644 index 1f2544605001..000000000000 --- a/xmodule/assets/capa/_display.scss +++ /dev/null @@ -1,1747 +0,0 @@ -// capa - styling -// ==================== - -// Table of Contents -// * +Variables - Capa -// * +Extends - Capa -// * +Mixins - Status Icon - Capa -// * +Resets - Deprecate Please -// * +Problem - Base -// * +Problem - Choice Group -// * +Problem - Misc, Unclassified Mess -// * +Problem - Text Input, Numerical Input -// * +Problem - Option Input (Dropdown) -// * +Problem - CodeMirror -// * +Problem - Misc, Unclassified Mess Part 2 -// * +Problem - Rubric -// * +Problem - Annotation -// * +Problem - Choice Text Group -// * +Problem - Image Input Overrides -// * +Problem - Annotation Problem Overrides -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - -// +Variables - Capa -// ==================== -$annotation-yellow: rgba(255, 255, 10, 0.3); -$color-copy-tip: rgb(100, 100, 100); - -// FontAwesome Icon code -// ==================== -$checkmark-icon: '\f00c'; // .fa-check -$cross-icon: '\f00d'; // .fa-close -$asterisk-icon: '\f069'; // .fa-asterisk - - -@import '../../../../../static/sass/edx-pattern-library-shims/base/variables'; - -// +Extends - Capa -// ==================== -// Duplicated from _mixins.scss due to xmodule compilation, inheritance issues -%use-font-awesome { - font-family: FontAwesome; - -webkit-font-smoothing: antialiased; - display: inline-block; - speak: none; -} - -// +Mixins - Status Icon - Capa -// ==================== -@mixin status-icon($color: var(--gray), $fontAwesomeIcon: "\f00d") { - .status-icon { - &::after { - @extend %use-font-awesome; - - color: $color; - font-size: 1.2em; - content: $fontAwesomeIcon; - } - } -} - -// +Resets - Deprecate Please -// ==================== -h2 { - margin-top: 0; - margin-bottom: calc((var(--baseline)*0.75)); - - &.problem-header { - display: inline-block; - - section.staff { - margin-top: calc((var(--baseline)*1.5)); - font-size: 80%; - } - } - - @media print { - display: block; - width: auto; - border-right: 0; - } -} - -.explanation-title { - font-weight: bold; -} - -%feedback-hint { - margin-top: calc((var(--baseline) / 4)); - - .icon { - @include margin-right(calc((var(--baseline) / 4))); - } -} - -.feedback-hint-incorrect { - @extend %feedback-hint; - - .icon { - color: var(--incorrect); - } -} - -.feedback-hint-partially-correct, -.feedback-hint-correct { - @extend %feedback-hint; - - .icon { - color: var(--correct); - } -} - -.feedback-hint-text { - color: $color-copy-tip; -} - -.problem-hint { - margin-bottom: 20px; - width: 100%; -} - -.hint-label { - display: inline-block; - padding-right: 0.5em; -} - -.hint-text { - display: inline-block; -} - -.feedback-hint-multi .hint-text { - display: block; -} - -iframe[seamless] { - overflow: hidden; - padding: 0; - border: 0 none transparent; - background-color: transparent; -} - -.inline-error { - color: var(--error-color-dark) -} - -div.problem-progress { - display: inline-block; - color: var(--gray-d1); - font-size: em(14); -} - -// +Problem - Base -// ==================== -div.problem { - padding-top: var(--baseline); - - @media print { - display: block; - padding: 0; - width: auto; - - canvas, - img { - page-break-inside: avoid; - } - } - - input.math { - direction: ltr; // Equations are always English - } - - .inline { - display: inline; - - + p { - margin-top: var(--baseline); - } - } - - .question-description { - color: var(--gray-d1); - font-size: var(--small-font-size); - } - - form > label, .problem-group-label { - display: block; - margin-bottom: var(--baseline); - font: inherit; - color: inherit; - -webkit-font-smoothing: initial; - } - - .problem-group-label + .question-description { - margin-top: calc(-1 * var(--baseline)); - } - -} - -// CAPA gap spacing between problem parts -// can not use the & + & since .problem is nested deeply in .xmodule_display.xmodule_CapaModule -.wrapper-problem-response + .wrapper-problem-response, -.wrapper-problem-response + p { - margin-top: calc((var(--baseline) * 1.5)); -} - -// Choice Group - silent class -%choicegroup-base { - @include clearfix(); - - min-width: 100px; - width: auto !important; - width: 100px; - - label { - box-sizing: border-box; - - display: inline-block; - clear: both; - margin-bottom: calc((var(--baseline)/2)); - border: 2px solid var(--gray-l4); - border-radius: 3px; - padding: calc((var(--baseline)/2)); - width: 100%; - - &::after { - @include margin-left(calc((var(--baseline)*0.75))); - } - } - - .indicator-container { - min-height: 1px; - width: 25px; - display: inline-block; - } - - fieldset { - box-sizing: border-box; - } - - input[type="radio"], - input[type="checkbox"] { - @include margin(calc((var(--baseline)/4))); - @include margin-right(calc((var(--baseline)/2))); - } - - input { - &:focus, - &:hover { - & + label { - border: 2px solid var(--blue); - } - } - - &, - &:focus, - &:hover { - & + label.choicegroup_correct { - @include status-icon(var(--correct), $checkmark-icon); - - border: 2px solid var(--correct); - } - - & + label.choicegroup_partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - - border: 2px solid var(--partially-correct); - } - - & + label.choicegroup_incorrect { - @include status-icon(var(--incorrect), $cross-icon); - - border: 2px solid var(--incorrect); - } - - & + label.choicegroup_submitted { - border: 2px solid var(--submitted); - } - } - } -} - -// +Problem - Choice Group -// ==================== -div.problem { - .choicegroup { - @extend %choicegroup-base; - - .field { - position: relative; - } - - label { - @include padding(calc((var(--baseline)/2))); - @include padding-left(calc((var(--baseline)*2.3))); - - position: relative; - font-size: var(--base-font-size); - line-height: normal; - cursor: pointer; - } - - input[type="radio"], - input[type="checkbox"] { - @include left(em(9)); - - position: absolute; - top: 0.35em; - width: calc(var(--baseline)*1.1); - height: calc(var(--baseline)*1.1); - z-index: 1; - } - - legend { - margin-bottom: var(--baseline); - max-width: 100%; - white-space: normal; - } - - legend + .question-description { - margin-top: calc(-1 * var(--baseline)); - max-width: 100%; - white-space: normal; - } - } -} - -// +Problem - Status Indicators -// ==================== -// Summary status indicators shown after the input area -div.problem { - .indicator-container { - @include margin-left(calc((var(--baseline)*0.75))); - - .status { - width: var(--baseline); - - // CASE: correct answer - &.correct { - @include status-icon(var(--correct), $checkmark-icon); - } - - // CASE: partially correct answer - &.partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - - // CASE: incorrect answer - &.incorrect { - @include status-icon(var(--incorrect), $cross-icon); - } - - &.submitted, - &.unsubmitted, - &.unanswered { - .status-icon { - content: ''; - } - } - } - } -} - -// +Problem - Misc, Unclassified Mess -// ==================== -div.problem { - ol.enumerate { - li { - &::before { - display: block; - visibility: hidden; - height: 0; - content: " "; - } - } - } - - .solution-span { - > span { - margin: var(--baseline) 0; - display: block; - position: relative; - - &:empty { - display: none; - } - } - } - - .targeted-feedback-span { - > span { - display: block; - position: relative; - - &:empty { - display: none; - } - } - } - - // known classes using this div: .indicator-container, moved to section above - div { - - // TO-DO: Styling used by advanced capa problem types. Should be synced up to use .status class - p { - &.answer { - margin-top: -2px; - } - - span.clarification i { - font-style: normal; - - &:hover { - color: var(--blue); - } - } - } - - &.correct, &.ui-icon-check { - input { - border-color: var(--correct); - } - } - - &.partially-correct, &.ui-icon-check { - input { - border-color: var(--partially-correct); - } - } - - &.processing { - input { - border-color: #aaa; - } - } - - &.ui-icon-close { - input { - border-color: var(--incorrect); - } - } - - &.incorrect, &.incomplete { - input { - border-color: var(--incorrect); - } - } - - &.submitted, &.ui-icon-check { - input { - border-color: var(--submitted); - } - } - - p.answer { - display: inline-block; - margin-top: calc((var(--baseline) / 2)); - margin-bottom: 0; - - &::before { - @extend %t-strong; - - display: inline; - content: "Answer: "; - - } - - &:empty { - &::before { - display: none; - } - } - } - - div.equation { - clear: both; - margin-top: 3px; - - .MathJax_Display { - width: auto; - } - - img.loading { - @include padding-left(calc((var(--baseline)/2))); - - display: inline-block; - } - - span { - margin-bottom: 0; - display: inline-block; - - &.MathJax_CHTML, &.MathJax, &.MathJax_SVG { - padding: 6px; - min-width: 30px; - border: 1px solid #e3e3e3; - border-radius: 4px; - background: #f1f1f1; - } - } - } - - // Hides equation previews in symbolic response problems when printing - [id^='display'].equation { - @media print { - display: none; - } - } - - //TO-DO: review and deprecate all these styles within span {} - span { - &.ui-icon-bullet { - display: inline-block; - position: relative; - top: 4px; - width: 14px; - height: 14px; - background: url('#{var(--static-path)}/images/unanswered-icon.png') center center no-repeat; - } - - &.processing, &.ui-icon-processing { - display: inline-block; - position: relative; - top: 6px; - width: 25px; - height: 20px; - background: url('#{var(--static-path)}/images/spinner.gif') center center no-repeat; - } - - &.ui-icon-check { - display: inline-block; - position: relative; - top: 3px; - width: 25px; - height: 20px; - background: url('#{var(--static-path)}/images/correct-icon.png') center center no-repeat; - } - - &.incomplete, &.ui-icon-close { - display: inline-block; - position: relative; - top: 3px; - width: 20px; - height: 20px; - background: url('#{var(--static-path)}/images/incorrect-icon.png') center center no-repeat; - } - } - - .reload { - @include float(right); - - margin: calc((var(--baseline)/2)); - } - - - .grader-status { - @include clearfix(); - - margin: calc(var(--baseline)/2) 0; - padding: calc(var(--baseline)/2); - border-radius: 5px; - background: var(--gray-l6); - - span { - display: block; - float: left; - overflow: hidden; - margin: -7px 7px 0 0; - text-indent: -9999px; - } - - .grading { - margin: 0px 7px 0 0; - padding-left: 25px; - background: url('#{var(--static-path)}/images/info-icon.png') left center no-repeat; - text-indent: 0px; - } - - p { - float: left; - margin-bottom: 0; - text-transform: capitalize; - line-height: 20px; - } - - &.file { - margin-top: var(--baseline); - padding: var(--baseline) 0 0 0; - border: 0; - border-top: 1px solid #eee; - background: var(--white); - - p.debug { - display: none; - } - - input { - float: left; - } - } - - } - - .evaluation { - p { - margin-bottom: calc((var(--baseline)/5)); - } - } - - - .feedback-on-feedback { - margin-right: var(--baseline); - height: 100px; - } - - .evaluation-response { - header { - text-align: right; - - a { - font-size: .85em; - } - } - } - - .evaluation-scoring { - .scoring-list { - margin-left: 3px; - list-style-type: none; - - li { - display:inline; - margin-left: 50px; - - &:first-child { - margin-left: 0; - } - - label { - font-size: .9em; - } - } - } - } - - .submit-message-container { - margin: var(--baseline) 0px ; - } - } - - div.inline { - > span { - display: inline; - } - } - - ul { - margin-bottom: lh(); - margin-left: .75em; - margin-left: .75rem; - list-style: disc outside none; - } - - ol { - margin-bottom: lh(); - margin-left: .75em; - margin-left: .75rem; - list-style: decimal outside none; - } - - dl { - line-height: 1.4em; - } - - dl dt { - @extend %t-strong; - - } - - dl dd { - margin-bottom: 0; - } - - dd { - margin-left: .5em; - margin-left: .5rem; - } - - li { - margin-bottom: lh(0.5); - line-height: 1.4em; - - &:last-child { - margin-bottom: 0; - } - } - - p { - margin-bottom: lh(); - } - - table { - margin: lh() 0; - border-collapse: collapse; - table-layout: auto; - - td, th { - &.cont-justified-left { - text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors - } - - &.cont-justified-right { - text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors - } - - &.cont-justified-center { - text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles - } - } - - th { - @extend %t-strong; - - text-align: left; - } - - td { - text-align: left; - } - - caption, th, td { - padding: .25em .75em .25em 0; - padding: .25rem .75rem .25rem 0; - } - - caption { - margin-bottom: .75em; - margin-bottom: .75rem; - padding: .75em 0; - padding: .75rem 0; - background: #f1f1f1; - } - - tr, td, th { - vertical-align: middle; - } - } - - code { - margin: 0 2px; - padding: 0px 5px; - border: 1px solid #eaeaea; - border-radius: 3px; - background-color: var(--gray-l6); - white-space: nowrap; - font-size: .9em; - } - - pre { - overflow: auto; - padding: 6px calc(var(--baseline)/2); - border: 1px solid var(--gray-l3); - border-radius: 3px; - background-color: var(--gray-l6); - font-size: .9em; - line-height: 1.4; - - > code { - margin: 0; - padding: 0; - border: none; - background: transparent; - white-space: pre; - } - } -} - -// +Problem - Text Input, Numerical Input -// ==================== -.problem { - .capa_inputtype.textline, .inputtype.formulaequationinput { - input { - box-sizing: border-box; - - border: 2px solid var(--gray-l4); - border-radius: 3px; - min-width: 160px; - height: 46px; - } - - .status { - display: inline-block; - margin-top: calc((var(--baseline)/2)); - background: none; - } - - // CASE: incorrect answer - > .incorrect { - input { - border: 2px solid var(--incorrect); - } - - .status { - @include status-icon(var(--incorrect), $cross-icon); - } - } - - // CASE: partially correct answer - > .partially-correct { - input { - border: 2px solid var(--partially-correct); - } - - .status { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - } - - // CASE: correct answer - > .correct { - input { - border: 2px solid var(--correct); - } - - .status { - @include status-icon(var(--correct), $checkmark-icon); - } - } - - // CASE: submitted, correctness withheld - > .submitted { - input { - border: 2px solid var(--submitted); - } - - .status { - content: ''; - } - } - - // CASE: unanswered and unsubmitted - > .unanswered, > .unsubmitted { - input { - border: 2px solid var(--gray-l4); - } - - .status { - .status-icon { - &::after { - content: ''; - display: inline-block; - } - } - } - } - - } - - .inputtype.formulaequationinput { - > div { - input { - direction: ltr; - @include text-align(left); - } - } - } - - .trailing_text { - @include margin-right(calc((var(--baseline)/2))); - - display: inline-block; - } -} - - -// +Problem - Option Input (Dropdown) -// ==================== -.problem { - .inputtype.option-input { - margin: 0 0 0 0 !important; - - .indicator-container { - display: inline-block; - - .status.correct::after, - .status.partially-correct::after, - .status.incorrect::after, - .status.submitted::after, - .status.unanswered::after { - @include margin-left(0); - } - } - } -} - -// +Problem - CodeMirror -// ==================== -div.problem { - .CodeMirror { - border: 1px solid black; - font-size: 14px; - line-height: 18px; - resize: none; - - .cm-tab { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); - background-position: right; - background-repeat: no-repeat; - } - - pre { - overflow: hidden; - margin: 0; - padding: 0; - border-width: 0; - border-radius: 0; - background: transparent; - white-space: pre; - word-wrap: normal; - font-size: inherit; - font-family: inherit; - resize: none; - - &.CodeMirror-cursor { - @extend %ui-depth1; - - position: absolute; - visibility: hidden; - width: 0; - border-right: none; - border-left: 1px solid var(--black); - } - } - } - - .CodeMirror-focused pre.CodeMirror-cursor { - visibility: visible; - } - - .CodeMirror-code pre { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - } - - .CodeMirror-scroll { - margin-right: 0px; - } -} - -.capa-message { - display: inline-block; - color: var(--gray-d1); - -webkit-font-smoothing: antialiased; -} - -// +Problem - Actions -// ==================== -div.problem .action { - min-height: var(--baseline); - width: 100%; - display: flex; - display: -ms-flexbox; - -ms-flex-align: start; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - - .problem-action-buttons-wrapper { - display: inline-flex; - justify-content: flex-end; - width: 100%; - padding-bottom: var(--baseline); - } - - .problem-action-button-wrapper { - @include border-right(1px solid var(--gray-300)); - @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation - - display: inline-block; - - &:last-child { - border: none; - padding-right: 0; - } - } - - .problem-action-btn { - border: none; - max-width: 110px; - - &:hover, - &:focus, - &:active { - color: var(--primary) !important; - } - - .icon { - margin-bottom: calc(var(--baseline) / 10); - display: block; - } - - @media print { - display: none; - } - } - - .submit-attempt-container { - padding-bottom: var(--baseline); - flex-grow: 1; - display: flex; - align-items: center; - - @media (max-width: var(--bp-screen-lg)) { - max-width: 100%; - padding-bottom: var(--baseline); - } - - .submit { - @include margin-right(calc((var(--baseline) / 2))); - @include float(left); - - white-space: nowrap; - } - - .submit-cta-description { - color: var(--primary); - font-size: small; - padding-right: calc(var(--baseline) / 2); - } - .submit-cta-link-button { - color: var(--primary); - padding-right: calc(var(--baseline) / 4); - } - } - - .submission-feedback { - @include margin-right(calc((var(--baseline) / 2))); - - margin-top: calc(var(--baseline) / 2); - display: inline-block; - color: var(--gray-d1); - font-size: var(--medium-font-size); - -webkit-font-smoothing: antialiased; - vertical-align: middle; - - &.cta-enabled { - margin-top: 0; - } - } -} - - -// +Problem - Misc, Unclassified Mess Part 2 -// ==================== -div.problem { - hr { - float: none; - clear: both; - margin: 0 0 .75rem; - width: 100%; - height: 1px; - border: none; - background: #ddd; - color: #ddd; - } - - .hidden { - display: none; - visibility: hidden; - } - - #{var(--all-text-inputs)} { - display: inline; - width: auto; - } - - // this supports a deprecated element and should be removed once the center tag is removed - center { - display: block; - margin: lh() 0; - padding: lh(); - border: 1px solid var(--gray-l3); - } - - .message { - font-size: inherit; - } - - .detailed-solution > p { - margin: 0; - - &:first-child { - @extend %t-strong; - - margin-bottom: 0; - } - - } - - .detailed-targeted-feedback, - .detailed-targeted-feedback-partially-correct, - .detailed-targeted-feedback-correct { - > p { - margin: 0; - font-weight: normal; - - &:first-child { - @extend %t-strong; - } - } - } - - div.capa_alert { - margin-top: var(--baseline); - padding: 8px 12px; - border: 1px solid var(--warning-color); - border-radius: 3px; - background: var(--warning-color-accent); - font-size: 0.9em; - } - - .notification { - @include float(left); - - margin-top: calc(var(--baseline) / 2); - padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2)); - line-height: var(--base-line-height); - - &.success { - @include notification-by-type(var(--success)); - } - - &.error { - @include notification-by-type(var(--danger)); - } - - &.warning { - @include notification-by-type(var(--warning)); - } - - &.general { - @include notification-by-type(var(--general-color-accent)); - } - - &.problem-hint { - border: 1px solid var(--uxpl-gray-background); - border-radius: 6px; - - .icon { - @include margin-right(calc(3 * var(--baseline) / 4) ); - - color: var(--uxpl-gray-dark); - } - - li { - color: var(--uxpl-gray-base); - - strong { - color: var(--uxpl-gray-dark); - } - } - } - - .icon { - @include float(left); - - position: relative; - top: calc(var(--baseline) / 5); - } - - .notification-message { - display: inline-block; - width: flex-grid(7,10); - // Make notification tall enough that when the "Review" button is displayed, - // the notification does not grow in height. - margin-bottom: 8px; - - ol { - list-style: none outside none; - padding: 0; - margin: 0; - - li:not(:last-child) { - margin-bottom: calc(var(--baseline) / 4); - } - } - } - - .notification-btn-wrapper { - @include float(right); - } - - } - - .notification-btn { - @include float(right); - - padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4)); - min-width: calc((var(--baseline) * 3)); - display: block; - clear: both; - - &:first-child { - margin-bottom: calc(var(--baseline) / 4); - } - } - - // override default button hover - button { - &:hover { - background-image: none; - box-shadow: none; - } - - &:focus { - box-shadow: none; - } - - &.btn-default { - background-color: transparent; - } - - &.btn-brand { - &:hover { - background-color: var(--btn-brand-focus-background); - } - } - } - - .review-btn { - color: var(--blue); // notification type has other colors - &.sr { - color: var(--blue); - } - } - - div.capa_reset { - padding: 25px; - background-color: var(--error-color-light); - border: 1px solid var(--error-color); - border-radius: 3px; - font-size: 1em; - margin-top: calc(var(--baseline)/2); - margin-bottom: calc(var(--baseline)/2); - } - - .capa_reset>h2 { - color: #a00; - } - - .capa_reset li { - font-size: 0.9em; - } - - .hints { - border: 1px solid var(--gray-l3); - - h3 { - @extend %t-strong; - - padding: 9px; - border-bottom: 1px solid #e3e3e3; - background: #eee; - text-shadow: 0 1px 0 var(--white); - font-size: em(16); - } - - div { - border-bottom: 1px solid #ddd; - - &:last-child { - border-bottom: none; - } - - p { - margin-bottom: 0; - } - - header { - a { - display: block; - padding: 9px; - background: var(--gray-l6); - box-shadow: inset 0 0 0 1px var(--white); - } - } - - > section { - padding: 9px; - } - } - } - - .test { - padding-top: 18px; - - header { - margin-bottom: 12px; - - h3 { - @extend %t-strong; - - color: #aaa; - font-style: normal; - font-size: 0.9em; - } - } - - > section { - position: relative; - margin-bottom: calc((var(--baseline)/2)); - padding: 9px 9px var(--baseline); - border: 1px solid #ddd; - border-radius: 3px; - background: var(--white); - box-shadow: inset 0 0 0 1px #eee; - - p:last-of-type { - margin-bottom: 0; - } - - .shortform { - margin-bottom: .6em; - } - - a.full { - @include position(absolute, 0 0 1px 0); - box-sizing: border-box; - - display: block; - padding: calc((var(--baseline)/5)); - background: var(--gray-l4); - text-align: right; - font-size: 1em; - - &.full-top { - @include position(absolute, 1px 0 auto 0); - } - - &.full-bottom { - @include position(absolute, auto 0 1px 0); - } - } - } - } - - .external-grader-message { - section { - padding-top: calc((var(--baseline)*1.5)); - padding-left: var(--baseline); - background-color: #fafafa; - color: #2c2c2c; - font-size: 1em; - font-family: monospace; - - header { - font-size: 1.4em; - } - - .shortform { - @extend %t-strong; - } - - .longform { - margin: 0; - padding: 0; - - .result-errors { - margin: calc((var(--baseline)/4)); - padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2)); - background: url('#{var(--static-path)}/images/incorrect-icon.png') center left no-repeat; - - li { - color: #b00; - } - } - - .result-output { - margin: calc(var(--baseline)/4); - padding: var(--baseline) 0 calc((var(--baseline)*0.75)) 50px; - border-top: 1px solid #ddd; - border-left: var(--baseline) solid #fafafa; - - h4 { - font-size: 1em; - font-family: monospace; - } - - dl { - margin: 0; - } - - dt { - margin-top: var(--baseline); - } - - dd { - margin-left: 24pt; - } - } - - .result-correct { - background: url('#{var(--static-path)}/images/correct-icon.png') left 20px no-repeat; - - .result-actual-output { - color: #090; - } - } - - .result-partially-correct { - background: url('#{var(--static-path)}/images/partially-correct-icon.png') left 20px no-repeat; - - .result-actual-output { - color: #090; - } - } - - .result-incorrect { - background: url('#{var(--static-path)}/images/incorrect-icon.png') left 20px no-repeat; - - .result-actual-output { - color: #b00; - } - } - - .markup-text{ - margin: calc((var(--baseline)/4)); - padding: var(--baseline) 0 15px 50px; - border-top: 1px solid #ddd; - border-left: 20px solid #fafafa; - - bs { - color: #b00; - } - - bg { - color: #bda046; - } - } - } - } - } -} - - -// +Problem - Rubric -// ==================== -div.problem { - .rubric { - tr { - margin: calc((var(--baseline)/2)) 0; - height: 100%; - } - - td { - margin: calc((var(--baseline)/2)) 0; - padding: var(--baseline) 0; - height: 100%; - } - - th { - margin: calc((var(--baseline)/4)); - padding: calc((var(--baseline)/4)); - } - - label, - .view-only { - position: relative; - display: inline-block; - margin: 3px; - padding: calc((var(--baseline)*0.75)); - min-width: 50px; - min-height: 50px; - width: 150px; - height: 100%; - background-color: var(--gray-l3); - font-size: .9em; - } - - .grade { - position: absolute; - right: 0; - bottom: 0; - margin: calc((var(--baseline)/2)); - } - - .selected-grade { - background: #666; - color: white; - } - - input[type=radio]:checked + label { - background: #666; - color: white; - } - - input[class='score-selection'] { - display: none; - } - } -} - -// +Problem - Annotation -// ==================== -div.problem { - .annotation-input { - margin: 0 0 1em 0; - border: 1px solid var(--gray-l3); - border-radius: 1em; - - .annotation-header { - @extend %t-strong; - - padding: .5em 1em; - border-bottom: 1px solid var(--gray-l3); - } - - .annotation-body { padding: .5em 1em; } - - a.annotation-return { - float: right; - font: inherit; - font-weight: normal; - } - - a.annotation-return::after { content: " \2191" } - - .block, ul.tags { - margin: .5em 0; - padding: 0; - } - - .block-highlight { - padding: .5em; - border: 1px solid darken($annotation-yellow, 10%); - background-color: $annotation-yellow; - color: #333; - font-style: normal; - } - - .block-comment { font-style: italic; } - - ul.tags { - display: block; - margin-left: 1em; - list-style-type: none; - - li { - position: relative; - display: block; - margin: 1em 0 0 0; - - .tag { - @extend %ui-fake-link; - - display: inline-block; - margin-left: calc((var(--baseline)*2)); - border: 1px solid rgb(102,102,102); - - &.selected { - background-color: $annotation-yellow; - } - } - - .tag-status { - position: absolute; - left: 0; - } - .tag-status, .tag { padding: .25em .5em; } - } - } - - textarea.comment { - $num-lines-to-show: 5; - $line-height: 1.4em; - $padding: .2em; - - padding: $padding (2 * $padding); - width: 100%; - height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2); - line-height: $line-height; - } - - .answer-annotation { display: block; margin: 0; } - - /* for debugging the input value field. enable the debug flag on the inputtype */ - .debug-value { - margin: 1em 0; - padding: 1em; - border: 1px solid var(--black); - background-color: #999; - color: var(--white); - - input[type="text"] { width: 100%; } - - pre { background-color: var(--gray-l3); color: var(--black); } - - &::before { - @extend %t-strong; - - display: block; - content: "debug input value"; - font-size: 1.5em; - } - } - } -} - -// +Problem - Choice Text Group -// ==================== -div.problem { - .choicetextgroup { - @extend %choicegroup-base; - - input[type="text"]{ - margin-bottom: 0.5em; - } - - label.choicetextgroup_correct, section.choicetextgroup_correct { - @extend label.choicegroup_correct; - - input[type="text"] { - border-color: var(--correct); - } - } - - label.choicetextgroup_partially-correct, section.choicetextgroup_partially-correct { - @extend label.choicegroup_partially-correct; - - input[type="text"] { - border-color: var(--partially-correct); - } - } - - label.choicetextgroup_incorrect, section.choicetextgroup_incorrect { - @extend label.choicegroup_incorrect; - } - - label.choicetextgroup_submitted, section.choicetextgroup_submitted { - @extend label.choicegroup_submitted; - } - - label.choicetextgroup_show_correct, section.choicetextgroup_show_correct { - &::after { - @include margin-left(calc((var(--baseline)*0.75))); - - content: url('#{var(--static-path)}/images/correct-icon.png'); - } - } - - span.mock_label { - cursor : default; - } - } -} - -// +Problem - Image Input Overrides -// ==================== - -// NOTE: temporary override until image inputs use same base html structure as other common capa input types. -div.problem .imageinput.capa_inputtype { - .status { - display: inline-block; - position: relative; - top: 3px; - width: 25px; - height: 20px; - - &.unsubmitted, - &.unanswered { - .status-icon { - content: ''; - } - - .status-message { - display: none; - } - } - } - - .correct { - @include status-icon(var(--correct), $checkmark-icon); - } - - .incorrect { - @include status-icon(var(--incorrect), $cross-icon); - } - - .partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - - .submitted { - content: ''; - } -} - -// +Problem - Annotation Problem Overrides -// ==================== - -// NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types. -div.problem .annotation-input { - .tag-status { - display: inline-block; - position: relative; - top: 3px; - width: 25px; - height: 20px; - - &.unsubmitted, - &.unanswered { - .status-icon { - content: ''; - } - - .status-message { - display: none; - } - } - } - - .correct { - @include status-icon(var(--correct), $checkmark-icon); - } - - .incorrect { - @include status-icon(var(--incorrect), $cross-icon); - } - - .partially-correct { - @include status-icon(var(--partially-correct), $asterisk-icon); - } - - .submitted { - content: ''; - } -} - -// Loading Spinner -// ==================== -.problems-wrapper .loading-spinner { - text-align: center; - color: var(--gray-d1); -} diff --git a/xmodule/assets/editor/_edit.scss b/xmodule/assets/editor/_edit.scss deleted file mode 100644 index 0af846f8b201..000000000000 --- a/xmodule/assets/editor/_edit.scss +++ /dev/null @@ -1,83 +0,0 @@ -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'cms/theme/variables-v1'; -@import 'mixins'; - -// This is shared CSS between the xmodule problem editor and the xmodule HTML editor. -.editor { - position: relative; - - .row { - position: relative; - } - - .editor-bar { - @include clearfix(); - @include linear-gradient(top, #d4dee8, #c9d5e2); - - position: relative; - padding: calc(var(--baseline)/4); - border-bottom-color: #a5aaaf; - - button { - display: inline-block; - - @include float(left); - - padding: 3px calc(var(--baseline)/2) 5px; - margin-left: 7px; - border: 0; - border-radius: 2px; - background: transparent; - - .icon { - height: 21px; - } - - &:hover, - &:focus { - background: rgba(255, 255, 255, .5); - } - } - } - - .editor-tabs { - position: absolute; - top: 10px; - - @include right(10px); - @include text-align(left); - @include direction(); - - li { - @include float(left); - @include margin-right(calc(var(--baseline)/4)); - - &:last-child { - @include margin-right(0); - } - } - - .tab { - display: block; - height: 24px; - padding: 7px 20px 3px; - border: 1px solid #a5aaaf; - border-radius: 3px 3px 0 0; - - @include linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, .06)); - - background-color: #e5ecf3; - font-size: 13px; - color: #3c3c3c; - box-shadow: 1px -1px 1px rgba(0, 0, 0, .05); - - &.current { - background: var(--white); - border-bottom-color: var(--white); - } - } - } -} diff --git a/xmodule/assets/problem/_edit.scss b/xmodule/assets/problem/_edit.scss deleted file mode 100644 index 6630dd8a2903..000000000000 --- a/xmodule/assets/problem/_edit.scss +++ /dev/null @@ -1,109 +0,0 @@ -.editor-bar { - .editor-tabs { - .advanced-toggle { - height: auto; - margin-top: -4px; - padding: 3px 9px; - font-size: 12px; - color: var(--link-color); - - &.current { - border: 1px solid var(--lightGrey) !important; - border-radius: 3px !important; - background: var(--lightGrey) !important; - color: var(--darkGrey) !important; - pointer-events: none; - cursor: none; - - &:hover, - &:focus { - box-shadow: 0 0 0 0 !important; - background-color: var(--white); - } - } - } - - } -} - -.simple-editor-cheatsheet { - position: absolute; - top: 41px; - @include left(70%); - width: 0; - border-left: 1px solid var(--gray-l2); - - background-color: var(--lightGrey); - overflow: hidden; - - &.shown { - width: 30%; - height: 92%; - overflow-y: scroll; - } - - .cheatsheet-wrapper { - padding: 5%; - } - - h6 { - margin-top: 4px; - margin-bottom: 7px; - margin-left: 4px; - font-size: 15px; - font-weight: 700; - display: inline-block; - vertical-align: top; - } - - .row { - @include clearfix(); - - padding-bottom: 5px !important; - margin-bottom: 10px !important; - border-bottom: 1px solid #ddd !important; - - &:last-child { - border-bottom: none !important; - margin-bottom: 0 !important; - } - } - - .col { - display: block; - - &.sample { - margin-right: 30px; - - .icon { - height: calc(var(--baseline) * 1.5); - } - } - } - - pre { - font-size: 12px; - line-height: 18px; - } - - code { - padding: 0; - background: none; - } -} - -.problem-editor { - // adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror - .markdown-box + .CodeMirror { - padding: 10px; - width: 69%; - } -} - -.problem-editor-icon { - display: inline-block; - width: 26px; - height: 21px; - vertical-align: middle; - color: var(--body-color); -} diff --git a/xmodule/assets/tabs/_codemirror.scss b/xmodule/assets/tabs/_codemirror.scss deleted file mode 100644 index 37a894a10395..000000000000 --- a/xmodule/assets/tabs/_codemirror.scss +++ /dev/null @@ -1,20 +0,0 @@ -.editor { - @include clearfix(); - - .CodeMirror { - box-sizing: border-box; - - width: 100%; - position: relative; - height: 379px; - border: 1px solid #3c3c3c; - border-top: 1px solid #8891a1; - background: var(--white); - color: #3c3c3c; - } - - .CodeMirror-scroll { - height: 100%; - } -} - diff --git a/xmodule/capa_block.py b/xmodule/capa_block.py index c1c650144b05..24737b689845 100644 --- a/xmodule/capa_block.py +++ b/xmodule/capa_block.py @@ -37,7 +37,7 @@ from xmodule.graders import ShowCorrectness from xmodule.raw_block import RawMixin from xmodule.util.sandboxing import SandboxService -from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment +from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment from xmodule.x_module import ( ResourceTemplates, XModuleMixin, @@ -361,7 +361,7 @@ def student_view(self, _context, show_detailed_errors=False): else: html = self.get_html() fragment = Fragment(html) - add_sass_to_fragment(fragment, "ProblemBlockDisplay.scss") + add_css_to_fragment(fragment, "ProblemBlockDisplay.css") add_webpack_js_to_fragment(fragment, 'ProblemBlockDisplay') shim_xmodule_js(fragment, 'Problem') return fragment @@ -393,7 +393,7 @@ def studio_view(self, _context): fragment = Fragment( self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context()) ) - add_sass_to_fragment(fragment, 'ProblemBlockEditor.scss') + add_css_to_fragment(fragment, 'ProblemBlockEditor.css') add_webpack_js_to_fragment(fragment, 'ProblemBlockEditor') shim_xmodule_js(fragment, 'MarkdownEditingDescriptor') return fragment diff --git a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css new file mode 100644 index 000000000000..31ce58efe387 --- /dev/null +++ b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css @@ -0,0 +1,1541 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); + +.xmodule_display.xmodule_ProblemBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { + font-family: FontAwesome; + -webkit-font-smoothing: antialiased; + display: inline-block; + speak: none; +} + +.xmodule_display.xmodule_ProblemBlock h2 { + margin-top: 0; + margin-bottom: calc((var(--baseline) * 0.75)); +} + +.xmodule_display.xmodule_ProblemBlock h2.problem-header { + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock h2.problem-header section.staff { + margin-top: calc((var(--baseline) * 1.5)); + font-size: 80%; +} + +@media print { + .xmodule_display.xmodule_ProblemBlock h2 { + display: block; + width: auto; + border-right: 0; + } +} + +.xmodule_display.xmodule_ProblemBlock .explanation-title { + font-weight: bold; +} + +.xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect, .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct, +.xmodule_display.xmodule_ProblemBlock .feedback-hint-correct { + margin-top: calc((var(--baseline) / 4)); +} + +.xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon, .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, +.xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { + margin-right: calc((var(--baseline) / 4)); +} + +.xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon { + color: var(--incorrect); +} + +.xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, +.xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { + color: var(--correct); +} + +.xmodule_display.xmodule_ProblemBlock .feedback-hint-text { + color: #646464; +} + +.xmodule_display.xmodule_ProblemBlock .problem-hint { + margin-bottom: 20px; + width: 100%; +} + +.xmodule_display.xmodule_ProblemBlock .hint-label { + display: inline-block; + padding-right: 0.5em; +} + +.xmodule_display.xmodule_ProblemBlock .hint-text { + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock .feedback-hint-multi .hint-text { + display: block; +} + +.xmodule_display.xmodule_ProblemBlock iframe[seamless] { + overflow: hidden; + padding: 0; + border: 0 none transparent; + background-color: transparent; +} + +.xmodule_display.xmodule_ProblemBlock .inline-error { + color: var(--error-color-dark); +} + +.xmodule_display.xmodule_ProblemBlock div.problem-progress { + display: inline-block; + color: var(--gray-d1); + font-size: 0.875em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem { + padding-top: var(--baseline); +} + +@media print { + .xmodule_display.xmodule_ProblemBlock div.problem { + display: block; + padding: 0; + width: auto; + } + + .xmodule_display.xmodule_ProblemBlock div.problem canvas, + .xmodule_display.xmodule_ProblemBlock div.problem img { + page-break-inside: avoid; + } +} + +.xmodule_display.xmodule_ProblemBlock div.problem input.math { + direction: ltr; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .inline { + display: inline; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .inline + p { + margin-top: var(--baseline); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .question-description { + color: var(--gray-d1); + font-size: var(--small-font-size); +} + +.xmodule_display.xmodule_ProblemBlock div.problem form > label, .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label { + display: block; + margin-bottom: var(--baseline); + font: inherit; + color: inherit; + -webkit-font-smoothing: initial; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label + .question-description { + margin-top: calc(-1 * var(--baseline)); +} + +.xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + .wrapper-problem-response, +.xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + p { + margin-top: calc((var(--baseline) * 1.5)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup { + min-width: 100px; + width: auto !important; + width: 100px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup:after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label { + box-sizing: border-box; + display: inline-block; + clear: both; + margin-bottom: calc((var(--baseline) / 2)); + border: 2px solid var(--gray-l4); + border-radius: 3px; + padding: calc((var(--baseline) / 2)); + width: 100%; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label::after { + margin-left: calc((var(--baseline) * 0.75)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .indicator-container, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .indicator-container { + min-height: 1px; + width: 25px; + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup fieldset, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup fieldset { + box-sizing: border-box; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="checkbox"] { + margin: calc((var(--baseline) / 4)); + margin-right: calc((var(--baseline) / 2)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label { + border: 2px solid var(--blue); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_correct { + border: 2px solid var(--correct); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct { + border: 2px solid var(--partially-correct); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect { + border: 2px solid var(--incorrect); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_submitted { + border: 2px solid var(--submitted); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .field { + position: relative; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label { + padding: calc((var(--baseline) / 2)); + padding-left: calc((var(--baseline) * 2.3)); + position: relative; + font-size: var(--base-font-size); + line-height: normal; + cursor: pointer; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"] { + left: 0.5625em; + position: absolute; + top: 0.35em; + width: calc(var(--baseline) * 1.1); + height: calc(var(--baseline) * 1.1); + z-index: 1; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend { + margin-bottom: var(--baseline); + max-width: 100%; + white-space: normal; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend + .question-description { + margin-top: calc(-1 * var(--baseline)); + max-width: 100%; + white-space: normal; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container { + margin-left: calc((var(--baseline) * 0.75)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status { + width: var(--baseline); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.submitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.unanswered .status-icon { + content: ''; +} + +.xmodule_display.xmodule_ProblemBlock div.problem ol.enumerate li::before { + display: block; + visibility: hidden; + height: 0; + content: " "; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span { + margin: var(--baseline) 0; + display: block; + position: relative; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span:empty { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span { + display: block; + position: relative; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span:empty { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div p.answer { + margin-top: -2px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i { + font-style: normal; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i:hover { + color: var(--blue); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { + border-color: var(--correct); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.partially-correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { + border-color: var(--partially-correct); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.processing input { + border-color: #aaa; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-close input { + border-color: var(--incorrect); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.incorrect input, .xmodule_display.xmodule_ProblemBlock div.problem div.incomplete input { + border-color: var(--incorrect); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.submitted input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { + border-color: var(--submitted); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div p.answer { + display: inline-block; + margin-top: calc((var(--baseline) / 2)); + margin-bottom: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div p.answer::before { + display: inline; + content: "Answer: "; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div p.answer:empty::before { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div div.equation { + clear: both; + margin-top: 3px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div div.equation .MathJax_Display { + width: auto; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div div.equation img.loading { + padding-left: calc((var(--baseline) / 2)); + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div div.equation span { + margin-bottom: 0; + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax_CHTML, .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax, .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax_SVG { + padding: 6px; + min-width: 30px; + border: 1px solid #e3e3e3; + border-radius: 4px; + background: #f1f1f1; +} + +@media print { + .xmodule_display.xmodule_ProblemBlock div.problem div [id^='display'].equation { + display: none; + } +} + +.xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-bullet { + display: inline-block; + position: relative; + top: 4px; + width: 14px; + height: 14px; + background: url("var(--static-path)/images/unanswered-icon.png") center center no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div span.processing, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-processing { + display: inline-block; + position: relative; + top: 6px; + width: 25px; + height: 20px; + background: url("var(--static-path)/images/spinner.gif") center center no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-check { + display: inline-block; + position: relative; + top: 3px; + width: 25px; + height: 20px; + background: url("var(--static-path)/images/correct-icon.png") center center no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div span.incomplete, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-close { + display: inline-block; + position: relative; + top: 3px; + width: 20px; + height: 20px; + background: url("var(--static-path)/images/incorrect-icon.png") center center no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .reload { + float: right; + margin: calc((var(--baseline) / 2)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status { + margin: calc(var(--baseline) / 2) 0; + padding: calc(var(--baseline) / 2); + border-radius: 5px; + background: var(--gray-l6); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status span { + display: block; + float: left; + overflow: hidden; + margin: -7px 7px 0 0; + text-indent: -9999px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status .grading { + margin: 0px 7px 0 0; + padding-left: 25px; + background: url("var(--static-path)/images/info-icon.png") left center no-repeat; + text-indent: 0px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status p { + float: left; + margin-bottom: 0; + text-transform: capitalize; + line-height: 20px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file { + margin-top: var(--baseline); + padding: var(--baseline) 0 0 0; + border: 0; + border-top: 1px solid #eee; + background: var(--white); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file p.debug { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file input { + float: left; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation p { + margin-bottom: calc((var(--baseline) / 5)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .feedback-on-feedback { + margin-right: var(--baseline); + height: 100px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header { + text-align: right; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header a { + font-size: .85em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list { + margin-left: 3px; + list-style-type: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li { + display: inline; + margin-left: 50px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li:first-child { + margin-left: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li label { + font-size: .9em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div .submit-message-container { + margin: var(--baseline) 0px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.inline > span { + display: inline; +} + +.xmodule_display.xmodule_ProblemBlock div.problem ul { + margin-bottom: lh(); + margin-left: .75em; + margin-left: .75rem; + list-style: disc outside none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem ol { + margin-bottom: lh(); + margin-left: .75em; + margin-left: .75rem; + list-style: decimal outside none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem dl { + line-height: 1.4em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem dl dd { + margin-bottom: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem dd { + margin-left: .5em; + margin-left: .5rem; +} + +.xmodule_display.xmodule_ProblemBlock div.problem li { + margin-bottom: lh(0.5); + line-height: 1.4em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem li:last-child { + margin-bottom: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem p { + margin-bottom: lh(); +} + +.xmodule_display.xmodule_ProblemBlock div.problem table { + margin: lh() 0; + border-collapse: collapse; + table-layout: auto; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-left, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-left { + text-align: left !important; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-right, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-right { + text-align: right !important; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-center, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-center { + text-align: center !important; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table th { + text-align: left; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table td { + text-align: left; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table caption, .xmodule_display.xmodule_ProblemBlock div.problem table th, .xmodule_display.xmodule_ProblemBlock div.problem table td { + padding: .25em .75em .25em 0; + padding: .25rem .75rem .25rem 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table caption { + margin-bottom: .75em; + margin-bottom: .75rem; + padding: .75em 0; + padding: .75rem 0; + background: #f1f1f1; +} + +.xmodule_display.xmodule_ProblemBlock div.problem table tr, .xmodule_display.xmodule_ProblemBlock div.problem table td, .xmodule_display.xmodule_ProblemBlock div.problem table th { + vertical-align: middle; +} + +.xmodule_display.xmodule_ProblemBlock div.problem code { + margin: 0 2px; + padding: 0px 5px; + border: 1px solid #eaeaea; + border-radius: 3px; + background-color: var(--gray-l6); + white-space: nowrap; + font-size: .9em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem pre { + overflow: auto; + padding: 6px calc(var(--baseline) / 2); + border: 1px solid var(--gray-l3); + border-radius: 3px; + background-color: var(--gray-l6); + font-size: .9em; + line-height: 1.4; +} + +.xmodule_display.xmodule_ProblemBlock div.problem pre > code { + margin: 0; + padding: 0; + border: none; + background: transparent; + white-space: pre; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput input { + box-sizing: border-box; + border: 2px solid var(--gray-l4); + border-radius: 3px; + min-width: 160px; + height: 46px; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput .status { + display: inline-block; + margin-top: calc((var(--baseline) / 2)); + background: none; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect input { + border: 2px solid var(--incorrect); +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct input { + border: 2px solid var(--partially-correct); +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct input { + border: 2px solid var(--correct); +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct .status .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted input { + border: 2px solid var(--submitted); +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted .status { + content: ''; +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unanswered input, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unsubmitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unanswered input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unsubmitted input { + border: 2px solid var(--gray-l4); +} + +.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unanswered .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unsubmitted .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unanswered .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unsubmitted .status .status-icon::after { + content: ''; + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > div input { + direction: ltr; + text-align: left; +} + +.xmodule_display.xmodule_ProblemBlock .problem .trailing_text { + margin-right: calc((var(--baseline) / 2)); + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input { + margin: 0 0 0 0 !important; +} + +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container { + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.correct::after, +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.partially-correct::after, +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.incorrect::after, +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.submitted::after, +.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.unanswered::after { + margin-left: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror { + border: 1px solid black; + font-size: 14px; + line-height: 18px; + resize: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror .cm-tab { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); + background-position: right; + background-repeat: no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre { + overflow: hidden; + margin: 0; + padding: 0; + border-width: 0; + border-radius: 0; + background: transparent; + white-space: pre; + word-wrap: normal; + font-size: inherit; + font-family: inherit; + resize: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre.CodeMirror-cursor { + position: absolute; + visibility: hidden; + width: 0; + border-right: none; + border-left: 1px solid var(--black); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-focused pre.CodeMirror-cursor { + visibility: visible; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-code pre { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-scroll { + margin-right: 0px; +} + +.xmodule_display.xmodule_ProblemBlock .capa-message { + display: inline-block; + color: var(--gray-d1); + -webkit-font-smoothing: antialiased; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action { + min-height: var(--baseline); + width: 100%; + display: flex; + display: -ms-flexbox; + -ms-flex-align: start; + flex-direction: row; + align-items: center; + flex-wrap: wrap; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-buttons-wrapper { + display: inline-flex; + justify-content: flex-end; + width: 100%; + padding-bottom: var(--baseline); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper { + border-right: 1px solid var(--gray-300); + padding: 0 13px; + display: inline-block; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper:last-child { + border: none; + padding-right: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { + border: none; + max-width: 110px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:hover, .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:focus, .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:active { + color: var(--primary) !important; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn .icon { + margin-bottom: calc(var(--baseline) / 10); + display: block; +} + +@media print { + .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { + display: none; + } +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { + padding-bottom: var(--baseline); + flex-grow: 1; + display: flex; + align-items: center; +} + +@media (max-width: var(--bp-screen-lg)) { + .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { + max-width: 100%; + padding-bottom: var(--baseline); + } +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit { + margin-right: calc((var(--baseline) / 2)); + float: left; + white-space: nowrap; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-description { + color: var(--primary); + font-size: small; + padding-right: calc(var(--baseline) / 2); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-link-button { + color: var(--primary); + padding-right: calc(var(--baseline) / 4); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback { + margin-right: calc((var(--baseline) / 2)); + margin-top: calc(var(--baseline) / 2); + display: inline-block; + color: var(--gray-d1); + font-size: var(--medium-font-size); + -webkit-font-smoothing: antialiased; + vertical-align: middle; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback.cta-enabled { + margin-top: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem hr { + float: none; + clear: both; + margin: 0 0 .75rem; + width: 100%; + height: 1px; + border: none; + background: #ddd; + color: #ddd; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hidden { + display: none; + visibility: hidden; +} + +.xmodule_display.xmodule_ProblemBlock div.problem + +var +( +--all-text-inputs + +) +{ + display: inline +; + width: auto +; +} +.xmodule_display.xmodule_ProblemBlock div.problem center { + display: block; + margin: lh() 0; + padding: lh(); + border: 1px solid var(--gray-l3); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .message { + font-size: inherit; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p { + margin: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p:first-child { + margin-bottom: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback > p, +.xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback-partially-correct > p, +.xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback-correct > p { + margin: 0; + font-weight: normal; +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.capa_alert { + margin-top: var(--baseline); + padding: 8px 12px; + border: 1px solid var(--warning-color); + border-radius: 3px; + background: var(--warning-color-accent); + font-size: 0.9em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification { + float: left; + margin-top: calc(var(--baseline) / 2); + padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2)); + line-height: var(--base-line-height); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.success { + border-top: 3px solid var(--success); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.success .icon { + margin-right: 15px; + color: var(--success); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.error { + border-top: 3px solid var(--danger); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.error .icon { + margin-right: 15px; + color: var(--danger); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.warning { + border-top: 3px solid var(--warning); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.warning .icon { + margin-right: 15px; + color: var(--warning); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.general { + border-top: 3px solid var(--general-color-accent); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.general .icon { + margin-right: 15px; + color: var(--general-color-accent); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint { + border: 1px solid var(--uxpl-gray-background); + border-radius: 6px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint .icon { + margin-right: calc(3 * var(--baseline) / 4); + color: var(--uxpl-gray-dark); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li { + color: var(--uxpl-gray-base); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li strong { + color: var(--uxpl-gray-dark); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification .icon { + float: left; + position: relative; + top: calc(var(--baseline) / 5); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message { + display: inline-block; + width: 69.38776%; + margin-bottom: 8px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol { + list-style: none outside none; + padding: 0; + margin: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol li:not(:last-child) { + margin-bottom: calc(var(--baseline) / 4); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-btn-wrapper { + float: right; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification-btn { + float: right; + padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4)); + min-width: calc((var(--baseline) * 3)); + display: block; + clear: both; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .notification-btn:first-child { + margin-bottom: calc(var(--baseline) / 4); +} + +.xmodule_display.xmodule_ProblemBlock div.problem button:hover { + background-image: none; + box-shadow: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem button:focus { + box-shadow: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem button.btn-default { + background-color: transparent; +} + +.xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover { + background-color: var(--btn-brand-focus-background); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .review-btn { + color: var(--blue); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .review-btn.sr { + color: var(--blue); +} + +.xmodule_display.xmodule_ProblemBlock div.problem div.capa_reset { + padding: 25px; + background-color: var(--error-color-light); + border: 1px solid var(--error-color); + border-radius: 3px; + font-size: 1em; + margin-top: calc(var(--baseline) / 2); + margin-bottom: calc(var(--baseline) / 2); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .capa_reset > h2 { + color: #a00; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .capa_reset li { + font-size: 0.9em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints { + border: 1px solid var(--gray-l3); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints h3 { + padding: 9px; + border-bottom: 1px solid #e3e3e3; + background: #eee; + text-shadow: 0 1px 0 var(--white); + font-size: 1em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints div { + border-bottom: 1px solid #ddd; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints div:last-child { + border-bottom: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints div p { + margin-bottom: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints div header a { + display: block; + padding: 9px; + background: var(--gray-l6); + box-shadow: inset 0 0 0 1px var(--white); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .hints div > section { + padding: 9px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test { + padding-top: 18px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test header { + margin-bottom: 12px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test header h3 { + color: #aaa; + font-style: normal; + font-size: 0.9em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test > section { + position: relative; + margin-bottom: calc((var(--baseline) / 2)); + padding: 9px 9px var(--baseline); + border: 1px solid #ddd; + border-radius: 3px; + background: var(--white); + box-shadow: inset 0 0 0 1px #eee; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test > section p:last-of-type { + margin-bottom: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test > section .shortform { + margin-bottom: .6em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full { + position: absolute; + top: 0; + right: 0; + bottom: 1px; + left: 0; + box-sizing: border-box; + display: block; + padding: calc((var(--baseline) / 5)); + background: var(--gray-l4); + text-align: right; + font-size: 1em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-top { + position: absolute; + top: 1px; + right: 0; + bottom: auto; + left: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-bottom { + position: absolute; + top: auto; + right: 0; + bottom: 1px; + left: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section { + padding-top: calc((var(--baseline) * 1.5)); + padding-left: var(--baseline); + background-color: #fafafa; + color: #2c2c2c; + font-size: 1em; + font-family: monospace; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section header { + font-size: 1.4em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform { + margin: 0; + padding: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors { + margin: calc((var(--baseline) / 4)); + padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 2)) calc((var(--baseline) / 2)) calc((var(--baseline) * 2)); + background: url("var(--static-path)/images/incorrect-icon.png") center left no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors li { + color: #b00; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output { + margin: calc(var(--baseline) / 4); + padding: var(--baseline) 0 calc((var(--baseline) * 0.75)) 50px; + border-top: 1px solid #ddd; + border-left: var(--baseline) solid #fafafa; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output h4 { + font-size: 1em; + font-family: monospace; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dl { + margin: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dt { + margin-top: var(--baseline); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dd { + margin-left: 24pt; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct { + background: url("var(--static-path)/images/correct-icon.png") left 20px no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct .result-actual-output { + color: #090; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct { + background: url("var(--static-path)/images/partially-correct-icon.png") left 20px no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct .result-actual-output { + color: #090; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect { + background: url("var(--static-path)/images/incorrect-icon.png") left 20px no-repeat; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect .result-actual-output { + color: #b00; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text { + margin: calc((var(--baseline) / 4)); + padding: var(--baseline) 0 15px 50px; + border-top: 1px solid #ddd; + border-left: 20px solid #fafafa; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bs { + color: #b00; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bg { + color: #bda046; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric tr { + margin: calc((var(--baseline) / 2)) 0; + height: 100%; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric td { + margin: calc((var(--baseline) / 2)) 0; + padding: var(--baseline) 0; + height: 100%; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric th { + margin: calc((var(--baseline) / 4)); + padding: calc((var(--baseline) / 4)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric label, +.xmodule_display.xmodule_ProblemBlock div.problem .rubric .view-only { + position: relative; + display: inline-block; + margin: 3px; + padding: calc((var(--baseline) * 0.75)); + min-width: 50px; + min-height: 50px; + width: 150px; + height: 100%; + background-color: var(--gray-l3); + font-size: .9em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric .grade { + position: absolute; + right: 0; + bottom: 0; + margin: calc((var(--baseline) / 2)); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric .selected-grade { + background: #666; + color: white; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric input[type=radio]:checked + label { + background: #666; + color: white; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .rubric input[class='score-selection'] { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input { + margin: 0 0 1em 0; + border: 1px solid var(--gray-l3); + border-radius: 1em; + /* for debugging the input value field. enable the debug flag on the inputtype */ +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-header { + padding: .5em 1em; + border-bottom: 1px solid var(--gray-l3); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-body { + padding: .5em 1em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return { + float: right; + font: inherit; + font-weight: normal; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return::after { + content: " \2191"; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { + margin: .5em 0; + padding: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-highlight { + padding: .5em; + border: 1px solid rgba(214, 214, 0, 0.3); + background-color: rgba(255, 255, 10, 0.3); + color: #333; + font-style: normal; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-comment { + font-style: italic; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { + display: block; + margin-left: 1em; + list-style-type: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li { + position: relative; + display: block; + margin: 1em 0 0 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { + display: inline-block; + margin-left: calc((var(--baseline) * 2)); + border: 1px solid #666666; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag.selected { + background-color: rgba(255, 255, 10, 0.3); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status { + position: absolute; + left: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { + padding: .25em .5em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input textarea.comment { + padding: 0.2em 0.4em; + width: 100%; + height: 7.2em; + line-height: 1.4em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .answer-annotation { + display: block; + margin: 0; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value { + margin: 1em 0; + padding: 1em; + border: 1px solid var(--black); + background-color: #999; + color: var(--white); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value input[type="text"] { + width: 100%; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value pre { + background-color: var(--gray-l3); + color: var(--black); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value::before { + display: block; + content: "debug input value"; + font-size: 1.5em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="text"] { + margin-bottom: 0.5em; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_correct input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_correct input[type="text"] { + border-color: var(--correct); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_partially-correct input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_partially-correct input[type="text"] { + border-color: var(--partially-correct); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_show_correct::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_show_correct::after { + margin-left: calc((var(--baseline) * 0.75)); + content: url("var(--static-path)/images/correct-icon.png"); +} + +.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup span.mock_label { + cursor: default; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status { + display: inline-block; + position: relative; + top: 3px; + width: 25px; + height: 20px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unanswered .status-icon { + content: ''; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unsubmitted .status-message, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unanswered .status-message { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .submitted { + content: ''; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status { + display: inline-block; + position: relative; + top: 3px; + width: 25px; + height: 20px; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unanswered .status-icon { + content: ''; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unsubmitted .status-message, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unanswered .status-message { + display: none; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after { + color: var(--correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after { + color: var(--incorrect); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { + color: var(--partially-correct); + font-size: 1.2em; + content: ""; +} + +.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .submitted { + content: ''; +} + +.xmodule_display.xmodule_ProblemBlock .problems-wrapper .loading-spinner { + text-align: center; + color: var(--gray-d1); +} diff --git a/xmodule/static/css-builtin-blocks/ProblemBlockEditor.css b/xmodule/static/css-builtin-blocks/ProblemBlockEditor.css new file mode 100644 index 000000000000..086a3ebd2208 --- /dev/null +++ b/xmodule/static/css-builtin-blocks/ProblemBlockEditor.css @@ -0,0 +1,222 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); + +.xmodule_edit.xmodule_ProblemBlock { +} + +.xmodule_edit.xmodule_ProblemBlock .ui-col-wide { + width: 74.46809%; + margin-right: 2.12766%; + float: left; +} + +.xmodule_edit.xmodule_ProblemBlock .ui-col-narrow { + width: 23.40426%; + float: left; +} + +.xmodule_edit.xmodule_ProblemBlock .ui-loading { + box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); + padding: 15px 20px; +} + +.xmodule_edit.xmodule_ProblemBlock .ui-loading { + animation: fadeIn 0.25s linear 1; + opacity: 0.6; + background-color: #fff; + padding: 30px 20px; + text-align: center; +} + +.xmodule_edit.xmodule_ProblemBlock .ui-loading .spin { + display: inline-block; +} + +.xmodule_edit.xmodule_ProblemBlock .ui-loading .copy { + padding-left: 5px; +} + +.xmodule_edit.xmodule_ProblemBlock .is-hidden { + display: none; +} + +.xmodule_edit.xmodule_ProblemBlock .editor { + position: relative; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .row { + position: relative; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-bar { + background-color: #d4dee8; + background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2); + background-image: linear-gradient(to bottom, #d4dee8, #c9d5e2); + position: relative; + padding: calc(var(--baseline) / 4); + border-bottom-color: #a5aaaf; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-bar:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button { + display: inline-block; + float: left; + padding: 3px calc(var(--baseline) / 2) 5px; + margin-left: 7px; + border: 0; + border-radius: 2px; + background: transparent; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button .icon { + height: 21px; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button:hover, .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button:focus { + background: rgba(255, 255, 255, 0.5); +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs { + position: absolute; + top: 10px; + right: 10px; + text-align: left; + direction: ltr; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs li { + float: left; + margin-right: calc(var(--baseline) / 4); +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs li:last-child { + margin-right: 0; +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs .tab { + display: block; + height: 24px; + padding: 7px 20px 3px; + border: 1px solid #a5aaaf; + border-radius: 3px 3px 0 0; + background-color: var(--transparent); + background-image: -webkit-linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, 0.06)); + background-image: linear-gradient(to bottom, var(--transparent) 87%, rgba(0, 0, 0, 0.06)); + background-color: #e5ecf3; + font-size: 13px; + color: #3c3c3c; + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.05); +} + +.xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs .tab.current { + background: var(--white); + border-bottom-color: var(--white); +} + +.xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle { + height: auto; + margin-top: -4px; + padding: 3px 9px; + font-size: 12px; + color: var(--link-color); +} + +.xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current { + border: 1px solid var(--lightGrey) !important; + border-radius: 3px !important; + background: var(--lightGrey) !important; + color: var(--darkGrey) !important; + pointer-events: none; + cursor: none; +} + +.xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current:hover, .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current:focus { + box-shadow: 0 0 0 0 !important; + background-color: var(--white); +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet { + position: absolute; + top: 41px; + left: 70%; + width: 0; + border-left: 1px solid var(--gray-l2); + background-color: var(--lightGrey); + overflow: hidden; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet.shown { + width: 30%; + height: 92%; + overflow-y: scroll; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .cheatsheet-wrapper { + padding: 5%; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet h6 { + margin-top: 4px; + margin-bottom: 7px; + margin-left: 4px; + font-size: 15px; + font-weight: 700; + display: inline-block; + vertical-align: top; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row { + padding-bottom: 5px !important; + margin-bottom: 10px !important; + border-bottom: 1px solid #ddd !important; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row:after { + content: ""; + display: table; + clear: both; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row:last-child { + border-bottom: none !important; + margin-bottom: 0 !important; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col { + display: block; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col.sample { + margin-right: 30px; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col.sample .icon { + height: calc(var(--baseline) * 1.5); +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet pre { + font-size: 12px; + line-height: 18px; +} + +.xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet code { + padding: 0; + background: none; +} + +.xmodule_edit.xmodule_ProblemBlock .problem-editor .markdown-box + .CodeMirror { + padding: 10px; + width: 69%; +} + +.xmodule_edit.xmodule_ProblemBlock .problem-editor-icon { + display: inline-block; + width: 26px; + height: 21px; + vertical-align: middle; + color: var(--body-color); +} diff --git a/xmodule/tests/test_util_builtin_assets.py b/xmodule/tests/test_util_builtin_assets.py index ea5933c79215..b922ec4b6a65 100644 --- a/xmodule/tests/test_util_builtin_assets.py +++ b/xmodule/tests/test_util_builtin_assets.py @@ -10,64 +10,6 @@ from xmodule.util import builtin_assets -class AddSassToFragmentTests(TestCase): - """ - Tests for add_sass_to_fragment. - - We would have liked to also test two additional cases: - * When a theme is enabled, and add_sass_to_fragment is called with a - theme-overriden Sass file, then a URL to themed CSS is added. - * When a theme is enabled, but add_sass_to_fragment is called with a Sass - file that the theme doesn't override, then a URL to the original (unthemed) - CSS is added. - Unfortunately, under edx-platform tests, settings.STATICFILES_STORAGE does not - include the ThemeStorage class, so themed URL generation doesn't work. - """ - - def test_absolute_path_raises_value_error(self): - fragment = Fragment() - with self.assertRaises(ValueError): - builtin_assets.add_sass_to_fragment( - fragment, - "/openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.scss", - ) - - def test_not_scss_raises_value_error(self): - fragment = Fragment() - with self.assertRaises(ValueError): - builtin_assets.add_sass_to_fragment( - fragment, - "vertical/public/js/vertical_student_view.js" - ) - - def test_misspelled_path_raises_not_found(self): - fragment = Fragment() - with self.assertRaises(FileNotFoundError): - builtin_assets.add_sass_to_fragment( - fragment, - "ProblemBlockDisplayyyy.scss", - ) - - def test_static_file_missing_raises_improperly_configured(self): - fragment = Fragment() - with patch.object(builtin_assets, 'get_static_file_url', lambda _path: None): - with self.assertRaises(ImproperlyConfigured): - builtin_assets.add_sass_to_fragment( - fragment, - "ProblemBlockDisplay.scss", - ) - - def test_happy_path(self): - fragment = Fragment() - builtin_assets.add_sass_to_fragment(fragment, "ProblemBlockDisplay.scss") - assert fragment.resources[0] == FragmentResource( - kind='url', - data='/static/css/ProblemBlockDisplay.css', - mimetype='text/css', - placement='head', - ) - - class AddCssToFragmentTests(TestCase): """ Tests for add_css_to_fragment.