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); +}