diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss
index 1f813fac253d..3459f54d840a 100644
--- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss
+++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss
@@ -1,3 +1,8 @@
+@import '_builtin-block-variables';
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'neat/neat'; // lib - Neat
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+@import 'build-v1'; // shared app style assets/rendering
@import 'cms/theme/variables-v1';
@import 'elements/course-unit-mfe-iframe';
@@ -411,6 +416,9 @@ body {
}
}
}
+
+ // For openassessment xblock editor
+ @import 'iframe-editors/oa';
}
}
diff --git a/cms/static/sass/iframe-editors/_oa-base.scss b/cms/static/sass/iframe-editors/_oa-base.scss
new file mode 100644
index 000000000000..0b0dae998371
--- /dev/null
+++ b/cms/static/sass/iframe-editors/_oa-base.scss
@@ -0,0 +1,1214 @@
+// openassessment: views - base
+// ====================
+
+// NOTES:
+// * The basic view and all of its states of the openassessment xblock
+
+// openassessment: utilities - variables
+// ====================
+
+// NOTES:
+// * these are openassessment-specific variable files
+
+// --------------------
+// layout (neat-based) - forced breakpoints/sizing
+// --------------------
+$grid-size-s: 530px; // small
+$grid-size-m: 760px; // medium
+$grid-size-l: 925px; // large
+$grid-size-x: 1300px; // extra large
+$grid-size-f: 1600px; // full size
+
+// --------------------
+// layout (neat-based) - mediaqueries
+// --------------------
+$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4); // mobile devices - make grid 4 columns
+$bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6); // small displays - make grid 6 columns
+$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12); // medium displays - make grid 12 columns
+$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns
+$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns
+
+
+
+.wrapper--openassessment {
+ position: relative;
+}
+
+// default to hide and show when it is needed
+.openassessment-initial-wrapper {
+ display: none;
+
+ &.is--showing {
+ display: block;
+ }
+
+ .ora-loading {
+ background: $uxpl-gray-background;
+ padding: $baseline-horizontal;
+ text-align: center;
+
+ .wrapper--anim {
+ @include animation(pulse $tmg-s3 ease-in-out infinite);
+ }
+
+ .icon {
+ display: inline-block;
+ color: $uxpl-gray-base;
+ }
+
+ .copy {
+ color: $uxpl-gray-base;
+ }
+ }
+}
+
+.openassessment {
+ @include direction();
+
+ // --------------------
+ // general: chrome
+ // --------------------
+ .openassessment__title {
+ @include row();
+ @extend %t-regular;
+ }
+
+
+ // --------------------
+ // overall message
+ // --------------------
+ .openassessment__message {
+ @include row();
+ background: none;
+ padding: 0;
+ }
+
+ // --------------------
+ // overall actions
+ // --------------------
+ .list--actions {
+ margin-bottom: ($baseline-vertical/2);
+ @include text-align(center);
+
+ @include media($bp-ds) {
+ @include text-align(right);
+ }
+
+ @include media($bp-dm) {
+ @include text-align(right);
+ }
+
+ @include media($bp-dl) {
+ @include text-align(right);
+ }
+
+ @include media($bp-dx) {
+ @include text-align(right);
+ }
+
+ // STATE: actions has an error
+ &.has--error {
+
+ .message {
+ margin-bottom: $baseline-vertical;
+ @include text-align(left);
+ }
+ }
+
+ .action--submit {
+ @extend %btn--primary;
+ @extend %action-2;
+ @include margin-left($baseline-vertical/2);
+ margin-top: ($baseline-vertical/2);
+
+ .copy, .icon {
+ display: inline;
+ }
+
+ .icon {
+ @extend %icon-2;
+ }
+
+ .fa-caret-right:before {
+ @include transform(rotate(bidi-rotate-angle(0deg)));
+ }
+ }
+ }
+
+ // --------------------
+ // steps
+ // --------------------
+ .openassessment__steps {
+ @extend %no-list;
+ counter-reset: item; // setting counter here
+ }
+
+ .openassessment__steps__step {
+ @extend %ui-section;
+
+ // step title
+ .step__title {
+ display: inline;
+ margin-bottom: ($baseline-vertical/2);
+ width: 100%;
+ margin-bottom: 0;
+
+ .step__counter, .wrapper--copy {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ .wrapper--copy {
+ @include margin-left(($baseline-horizontal/2));
+ @include border-left(1px solid $uxpl-gray-background);
+ @include padding-left(($baseline-horizontal/2));
+
+ @include media($bp-m) {
+ @include margin-left(0);
+ @include border-left(none);
+ @include padding-left(0);
+ }
+
+ @include media($bp-ds) {
+ @include margin-left(0);
+ @include border-left(none);
+ @include padding-left(0);
+ }
+ }
+
+ .step__counter {
+ display: none;
+
+ // increment: show numbers using parent list counter
+ &:before {
+ @extend %hd-2;
+ @extend %t-strong;
+ display: none;
+ content: counter(item, decimal);
+ counter-increment: item;
+ color: $uxpl-gray-base;
+ }
+
+ @include media($bp-dm) {
+ display: inline-block;
+
+
+ &:before {
+ display: inline;
+ }
+ }
+
+ @include media($bp-dl) {
+ display: inline-block;
+
+
+ &:before {
+ display: inline;
+ }
+ }
+
+ @include media($bp-dx) {
+ display: inline-block;
+
+
+ &:before {
+ display: inline;
+ }
+ }
+ }
+
+ .step__label, .step__deadline {
+ display: block;
+ }
+
+ .step__label {
+ @extend %t-superheading;
+ }
+
+ .step__deadline {
+ @extend %hd-4;
+ color: $uxpl-gray-base;
+ margin-left: 5px;
+ }
+ }
+
+ // step status
+ .step__status {
+ display: inline;
+ margin-top: ($baseline-vertical/4);
+
+ @include media($bp-dm) {
+ margin-top: 0;
+ @include float(right);
+ position: relative;
+ top: -($baseline-vertical) - 12;
+ }
+
+ @include media($bp-dl) {
+ margin-top: 0;
+ @include float(right);
+ position: relative;
+ top: -($baseline-vertical) - 12;
+ }
+
+ @include media($bp-dx) {
+ margin-top: 0;
+ @include float(right);
+ position: relative;
+ top: -($baseline-vertical) - 12;
+ }
+
+ .step__status__value {
+ border-radius: ($baseline-vertical/10);
+ padding: ($baseline-vertical/4)-1 ($baseline-horizontal/4);
+ background: $uxpl-gray-background;
+ position: relative;
+
+ @include media($bp-ds) {
+ display: block;
+ }
+
+ @include media($bp-dm) {
+ display: block;
+ }
+
+ @include media($bp-dl) {
+ display: block;
+ }
+
+ @include media($bp-dx) {
+ display: block;
+ }
+ }
+
+ .icon {
+ @extend %icon-3;
+ display: inline-block;
+ vertical-align: baseline;
+ @include margin-right(($baseline-horizontal/4));
+ }
+
+ .copy {
+ @extend %t-score;
+ color: $uxpl-gray-base;
+ }
+ }
+
+ // step content wrapper
+ .wrapper--step__content {
+ margin-top: ($baseline-vertical/2);
+ padding-top: ($baseline-vertical/2);
+ border-top: 1px solid $uxpl-gray-background;
+ }
+
+ // step message
+ .step__message {
+ @include row();
+ margin-bottom: $baseline-vertical;
+ }
+
+ // step instructions
+ .step__instruction {
+ @extend %copy-2;
+ margin-bottom: $baseline-vertical;
+ color: $uxpl-gray-base;
+ }
+
+ // step content
+ .step__content {
+ margin-bottom: $baseline-vertical;
+ }
+
+ .step__content__section {
+ margin-bottom: ($baseline-vertical*2);
+
+ &:last-child {
+ @extend %wipe-last-child;
+ }
+ }
+
+ // STATE: step is loading
+ &.is--loading {
+
+ .step__header {
+ padding-bottom: 0;
+ border-bottom: none;
+ margin-bottom: 0;
+ }
+
+ .step__counter:before, .step__label, .step__deadline {
+ color: $uxpl-gray-base;
+ }
+
+ .step__status__value {
+ background: $uxpl-gray-background;
+
+ .wrapper--anim {
+ @include animation(pulse $tmg-s3 ease-in-out infinite);
+ }
+
+ .icon {
+ display: inline-block;
+ color: $uxpl-gray-base;
+ }
+
+ .copy {
+ color: $uxpl-gray-base;
+ }
+ }
+ }
+
+ // STATE: step is incomplete
+ &.is--incomplete {
+
+ .step__counter:before {
+ border-color: rgb(255, 249, 235);
+ color: $uxpl-gray-base;
+ }
+
+ .step__status__value {
+ background: rgb(255, 249, 235);
+
+ .copy, .icon {
+ color: $uxpl-gray-base;
+ }
+ }
+ }
+
+ // STATE: step is unavailable
+ &.is--unavailable {
+
+ .step__counter:before, .step__label, .step__deadline {
+ color: $uxpl-gray-base;
+ }
+
+ .step__status__value {
+ background: $uxpl-gray-background;
+
+ .icon {
+ display: inline-block;
+ color: $uxpl-gray-base;
+ }
+
+ .copy {
+ color: $uxpl-gray-base;
+ }
+ }
+ }
+
+ // STATE: step is unavailable
+ &.is--waiting {
+
+ .step__counter:before, .step__label, .step__deadline {
+ color: $uxpl-gray-base;
+ }
+
+ .step__status__value {
+ background: $uxpl-gray-background;
+
+ .icon {
+ display: inline-block;
+ color: $uxpl-gray-base;
+ }
+
+ .copy {
+ color: $uxpl-gray-base;
+ }
+ }
+
+ .step__title .grade__value__title {
+ color: $uxpl-gray-background;
+ }
+
+ .step__instruction, .grade__value__description {
+ color: $uxpl-gray-base;
+ }
+ }
+
+ // STATE: step is complete/submitted/graded
+ &.is--complete {
+
+ .step__counter:before {
+ color: rgb(0, 129, 0);
+ }
+
+ .step__status__value {
+ background: rgb(0, 129, 0);
+
+ .icon {
+ display: inline-block;
+ }
+
+ .copy, .icon {
+ color: $white;
+ }
+ }
+
+ button {
+ opacity: 1;
+ }
+ }
+
+ // STATE: in-progress
+ &.is--in-progress {
+
+ .step__counter:before {
+ color: rgb(0, 117, 180);
+ }
+
+ .step__status__value {
+ background: rgb(0, 117, 180);
+
+ .icon {
+ display: inline-block;
+ }
+
+ .copy, .icon {
+ color: $white;
+ }
+ }
+
+ button {
+ opacity: 1;
+ }
+ }
+
+ // STATE: has error
+ &.has--error {
+
+ .step__counter:before {
+ border-color: rgba($color-error, 0.5);
+ color: $color-error;
+ }
+
+ .step__status__value {
+ background: $color-error;
+
+ .copy, .icon {
+ color: $white;
+ }
+ }
+
+ .step__label {
+ color: $color-error;
+ }
+ }
+ }
+
+
+ // --------------------
+ // ui-slidable
+ // --------------------
+ .ui-slidable__container {
+ .ui-slidable__content {
+ width: 100%;
+ }
+
+ // If there is an icon, it should rotate when clicked
+ @include transition(color $tmg-f2 ease-in);
+ .icon {
+ @include transition(all $tmg-f2 ease-in-out 0s);
+ @include transform(rotate(bidi-rotate-angle(0deg)));
+ }
+
+ &.is--initially--collapsed {
+ .ui-slidable__content {
+ display: none;
+ }
+ }
+
+ &.is--showing {
+ .ui-slidable .icon {
+ @include transform(rotate(bidi-rotate-angle(90deg)));
+ @include transform-origin(50% 50%);
+ }
+
+ .ui-slidable__container {
+ &:not(.is--showing) {
+ .icon {
+ @include transition(all $tmg-f2 ease-in-out 0s);
+ @include transform(rotate(bidi-rotate-angle(0deg)));
+ }
+ }
+ }
+ }
+
+ .ui-slidable {
+ // Override default button styling.
+ @extend %btn-reset;
+ background: none;
+ border-radius: ($baseline-vertical/4);
+ padding: 5px;
+
+ &:active, &:focus:not(:disabled), &:hover:not(:disabled) {
+ background: none;
+ border: none;
+ box-shadow: none;
+ }
+
+ &:not([disabled]) {
+ color: rgb(0, 117, 180);
+
+ &:hover, &:focus {
+ color: rgb(0, 117, 180)-focus;
+ }
+ }
+
+ .wrapper--copy {
+ text-align: left;
+ }
+ }
+ }
+
+ // --------------------
+ // submission
+ // --------------------
+
+ .submission__answer__part__prompt {
+ @extend %ui-well;
+ position: relative;
+ margin: ($baseline-vertical/2) 0;
+ border: 1px solid $uxpl-gray-background;
+ @include border-left(($baseline-horizontal/4));
+ @include padding-left(($baseline-horizontal*0.75));
+ }
+
+ .submission__answer__part__prompt__title {
+ @extend %text-sr;
+ }
+
+ .submission__answer__part__prompt__copy {
+ @extend %copy-2;
+ color: $uxpl-gray-base;
+
+ > * {
+ margin-bottom: $baseline-vertical;
+
+ &:last-child {
+ @extend %wipe-last-child;
+ }
+ }
+
+ a {
+ @extend %link-copy;
+ }
+ }
+
+ .submission__answer__part__text__title {
+ @extend %t-heading;
+ }
+
+ .submission__answer__part__text__value {
+ margin: ($baseline-vertical/2) 0;
+ border-color: $gray-d4;
+
+ &:not(textarea) {
+ border: 1px;
+ background-color: $white;
+ padding: $baseline-vertical;
+ }
+ }
+
+ .submission__upload__files__title,
+ .submission__answer__part__tip__title {
+ @extend %t-heading;
+ }
+
+ .submission__file__description__label {
+ margin-bottom: 5px;
+ }
+
+ .submission__answer__file__block {
+ margin-bottom: 8px;
+ }
+
+ .submission__img__preview {
+ float: left;
+ margin-right: 10px;
+ }
+
+ // --------------------
+ // response
+ // --------------------
+ .step--response {
+
+ // response form
+ .response__submission {
+ padding: ($baseline-vertical/2) ($baseline-horizontal/4);
+ border-radius: ($baseline-vertical/10);
+ }
+
+ .response__submission__content {
+ @extend %action-items;
+
+ label {
+ @extend %text-sr;
+ }
+
+ .files__descriptions {
+ display: none;
+
+ .submission__file__description {
+ padding-bottom: 10px;
+ }
+ }
+
+ .submission__answer__part__text {
+ textarea {
+ @extend %ui-content-longanswer;
+ min-height: ($baseline-vertical*10);
+ }
+ }
+
+ .submission__file__description {
+ textarea {
+ @extend %ui-content-longanswer;
+ min-height: ($baseline-vertical*4);
+ width: 70%;
+ }
+ }
+
+ .submission__team__answer__display__file {
+ margin-bottom: ($baseline-vertical/2);
+ }
+
+ .tip {
+ @extend %t-score;
+ padding: ($baseline-vertical/4) ($baseline-horizontal/4);
+ color: $white;
+ }
+ }
+
+ .response__submission__actions {
+ @extend %action-items
+ }
+ }
+
+
+ // --------------------
+ // peer assessment
+ // --------------------
+ .step--peer-assessment {
+
+ .list--peer-assessments {
+ @extend %no-list;
+ }
+
+ // peer submission
+ .peer-assessment__display {
+ @extend %ui-subsection;
+ }
+
+ .peer-assessment__display__header {
+ @include clearfix();
+
+ span {
+ @extend %t-strong; // FIX: needed due to DOM structure
+ }
+
+ .peer-assessment__display__title {
+ @extend %t-heading;
+ margin-bottom: ($baseline-vertical/2);
+ color: $uxpl-gray-base;
+ }
+ }
+
+ .peer-assessment__display__response {
+ @extend %ui-subsection-content;
+ @extend %copy-3;
+ @extend %ui-content-longanswer;
+ @extend %ui-well;
+ color: $uxpl-gray-base;
+ }
+
+ // assessment form
+ .peer-assessment__assessment {
+ @extend %action-items;
+
+ // fields
+ .assessment__fields {
+ margin-bottom: $baseline-vertical;
+ }
+
+ // rubric question
+ .assessment__rubric__question {
+ @extend %ui-rubric-question;
+ }
+
+ // rubric options
+ .question__answers {
+ @extend %ui-rubric-answers;
+ }
+
+ // genereal feedback question
+ .assessment__rubric__question--feedback {
+
+ .wrapper--input {
+ margin-top: $baseline-vertical;
+ }
+
+ .question__title__copy {
+ @include margin-left(0);
+ white-space: pre-wrap;
+ }
+
+ textarea {
+ @extend %ui-content-longanswer;
+ min-height: ($baseline-vertical*5);
+ }
+ }
+ }
+ }
+
+
+ // --------------------
+ // self assessment
+ // --------------------
+ .step--self-assessment {
+
+ // submission
+ .self-assessment__display {
+ @extend %ui-subsection;
+ }
+
+ .self-assessment__display__header {
+ @include clearfix();
+ }
+
+ .self-assessment__display__title {
+ @extend %t-heading;
+ margin-bottom: ($baseline-vertical/2);
+ color: $uxpl-gray-base;
+ }
+
+ .self-assessment__display__response {
+ @extend %ui-subsection-content;
+ @extend %copy-3;
+ @extend %ui-content-longanswer;
+ @extend %ui-well;
+ color: $uxpl-gray-base;
+ }
+
+ // assessment form
+ .self-assessment__assessment {
+ @extend %action-items;
+
+ // fields
+ .assessment__fields {
+ margin-bottom: $baseline-vertical;
+ }
+
+ // rubric question
+ .assessment__rubric__question {
+ @extend %ui-rubric-question;
+ }
+
+ // rubric options
+ .question__answers {
+ @extend %ui-rubric-answers;
+ overflow: visible; // needed for ui-hints
+ }
+
+ // genereal feedback question
+ .assessment__rubric__question--feedback {
+
+ .wrapper--input {
+ margin-top: $baseline-vertical;
+ }
+
+ .question__title__copy {
+ @include margin-left(0);
+ white-space: pre-wrap;
+ }
+
+ textarea {
+ @extend %ui-content-longanswer;
+ min-height: ($baseline-vertical*5);
+ }
+ }
+ }
+ }
+
+
+ // --------------------
+ // grade status
+ // --------------------
+ // TODO: clean this up - need to make sure counter doens't show when loading or in other states
+ .step--grade {
+
+ .step__title {
+ // @include media($bp-m) {
+ // @include bidi-span-columns(4 of 4);
+ // }
+ //
+ // @include media($bp-ds) {
+ // @include bidi-span-columns(6 of 6);
+ // }
+ //
+ // @include media($bp-dm) {
+ // @include bidi-span-columns(12 of 12);
+ // }
+ //
+ // @include media($bp-dl) {
+ // @include bidi-span-columns(12 of 12);
+ // }
+ //
+ // @include media($bp-dx) {
+ // @include bidi-span-columns(12 of 12);
+ // }
+
+ .step__counter, .step__counter:before {
+ display: none;
+ }
+
+ .wrapper--copy {
+ @include margin-left(0);
+ @include border-left(none);
+ @include padding-left(0);
+ }
+
+ .step__label, .grade__value {
+ display: inline;
+ vertical-align: middle;
+ }
+
+ .step__label {
+ @include margin-right(($baseline-horizontal/4));
+ }
+
+ .grade__value__title {
+ @extend %t-superheading;
+
+ .grade__value__earned {
+ @extend %t-strong;
+ }
+
+ .grade__value__potential {
+ @extend %t-strong;
+ }
+ }
+ }
+
+ .grade__value__description {
+ @extend %copy-2;
+ margin-bottom: $baseline-vertical;
+ color: $uxpl-gray-base;
+ }
+
+ .grade__summary {
+ @extend %copy-2;
+ }
+ }
+
+
+ // --------------------
+ // UI: submitted response
+ // --------------------
+ .submission__answer__display__title {
+ @extend %t-heading;
+ margin-bottom: ($baseline-vertical/2);
+ color: $uxpl-gray-base;
+ }
+
+ .submission__answer__display__content {
+ @extend %copy-3;
+ @extend %ui-subsection-content;
+
+ padding: ($baseline-vertical/2) ($baseline-horizontal/4) $baseline-vertical ($baseline-horizontal/4);
+ border-radius: ($baseline-vertical/10);
+ list-style: none;
+
+ .submission__answer__part {
+ margin: ($baseline-vertical*1.5) 0px 0px;
+
+ &:first-child {
+ margin-top: 0px;
+ }
+ }
+ }
+
+
+ // --------------------
+ // UI: displayed peer assessments
+ // --------------------
+
+ // peer review summary
+ .submission__peer-evaluations {
+ @extend %ui-subsection;
+ }
+
+ .submission__peer-evaluations__title {
+ @extend %t-heading;
+ margin-bottom: ($baseline-vertical/2);
+ color: $uxpl-gray-base;
+ }
+
+ // rubric questions
+ .submission__peer-evaluations__questions {
+ @extend %no-list;
+ @extend %ui-subsection-content;
+ margin-bottom: ($baseline-vertical/2);
+
+ &:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ // individual question
+ .question {
+ margin-bottom: ($baseline-vertical*1.5);
+ @extend %wipe-last-child;
+ }
+
+ .question__title {
+ @include clearfix();
+ margin-bottom: $baseline-vertical;
+ border-bottom: ($baseline-vertical/10) solid $uxpl-gray-base;
+ padding-bottom: ($baseline-vertical/4);
+
+ .icon {
+ @extend %icon-1;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
+
+ .question__title__copy {
+ @extend %t-heading;
+ @include margin-left(($baseline-horizontal/4));
+ white-space: pre-wrap;
+ }
+
+ .question__score {
+ @extend %t-score;
+ @include float(right);
+ @include margin-left($baseline-vertical);
+ }
+
+ .question__score__value {
+ @extend %t-strong;
+ color: $uxpl-gray-base;
+
+ &:after {
+ content: "/";
+ @include margin-left(($baseline-vertical/4));
+ color: $uxpl-gray-base;
+ }
+ }
+
+ .question__score__potential {
+ @extend %t-strong;
+ color: $uxpl-gray-base;
+
+ .unit {
+ @extend %t-strong;
+ @include margin-left(($baseline-vertical/4));
+ }
+ }
+
+ .question__answers {
+ @extend %no-list;
+ @extend %wipe-last-child;
+ @include row();
+ overflow: visible; // needed for ui-hints
+ }
+
+ // individual answers
+ .answer {
+ margin-bottom: $baseline-vertical;
+ @extend %no-list;
+
+ // CASE: self assessment
+ &.self-assessment {
+ @include border-left(($baseline-horizontal/8));
+ @include padding-left(($baseline-horizontal/2));
+
+ .answer__source {
+ color: $uxpl-gray-background;
+ }
+ }
+ }
+
+ .answer__source {
+ @extend %hd-5;
+ @extend %t-strong;
+ @extend %t-titlecase;
+ display: block;
+ color: $uxpl-gray-base;
+
+ .answer__source__value-with-points {
+ @extend %t-score;
+ color: $uxpl-gray-base;
+ }
+ }
+
+ .answer__value {
+ display: block;
+ margin-bottom: ($baseline-vertical/2);
+ color: $uxpl-gray-base;
+
+ .answer__value__raw {
+ white-space: pre-wrap;
+ }
+ }
+
+ .answer__value__value {
+ @extend %hd-2;
+ @extend %t-strong;
+ color: $uxpl-gray-base;
+
+ .ui-hint {
+ @extend %trans-color;
+ color: $uxpl-gray-background;
+
+ // STATE: hover - needed to reset color to what's expected from _navigation.scss (TODO: clean up specificity)
+ &:hover, &:focus {
+ color: rgba(0, 117, 180, 0.2);
+ }
+ }
+ }
+
+ .answer__score, .answer__score__value {
+ @extend %t-score;
+ display: block;
+ color: $uxpl-gray-base;
+ }
+ }
+
+ // criterion-based feedback
+ .answer--feedback {
+
+ // @include media($bp-ds) {
+ // @include bidi-span-columns(6 of 6);
+ // }
+ //
+ // @include media($bp-dm) {
+ // @include bidi-span-columns(12 of 12);
+ // }
+ //
+ // @include media($bp-dl) {
+ // @include bidi-span-columns(12 of 12);
+ // }
+ //
+ // @include media($bp-dx) {
+ // @include bidi-span-columns(12 of 12);
+ // }
+
+ .answer--feedback__title {
+ @extend %action-2;
+ }
+
+ .answer--feedback__title__copy {
+ @include margin-left(($baseline-horizontal/4));
+ }
+
+ .answer--feedback__content {
+ margin-top: ($baseline-vertical/4);
+ }
+
+ .action--save {
+ @extend %action-button !optional
+ }
+
+ .feedback {
+ @extend %no-list;
+ @extend %wipe-last-child;
+ margin-bottom: $baseline-vertical;
+ }
+
+ .feedback__source {
+ @extend %hd-5;
+ @extend %t-strong;
+ @extend %t-titlecase;
+ display: block;
+ color: $uxpl-gray-base;
+ }
+
+ .feedback__value {
+ @extend %copy-3;
+ display: block;
+
+ .feedback__value__raw {
+ white-space: pre-wrap;
+ }
+
+ }
+ }
+
+
+ // overall feedback form
+ .submission__feedback {
+ @extend %ui-subsection;
+ }
+
+ .submission__feedback__title {
+ @extend %ui-subsection-title;
+ @extend %t-heading;
+ border-bottom-color: solid $uxpl-gray-base;
+ color: $uxpl-gray-base;
+
+ .icon {
+ @extend %icon-1;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
+
+ .submission__feedback__title__copy {
+ @extend %t-heading;
+ @include margin-left(($baseline-horizontal/4));
+ }
+
+ .submission__feedback__content {
+ @extend %ui-subsection-content;
+ margin-bottom: $baseline-vertical;
+ }
+
+ .submission__feedback__instructions {
+ @extend %copy-2;
+ margin-bottom: $baseline-vertical;
+ color: $uxpl-gray-base;
+ }
+
+ .submission__feedback__elements {
+ padding: $baseline-vertical ($baseline-horizontal/2) $baseline-vertical ($baseline-horizontal/2);
+ border-radius: ($baseline-vertical/10);
+ }
+
+ .submission__feedback__fields {
+ margin-bottom: $baseline-vertical;
+
+ .field {
+ margin-bottom: ($baseline-vertical*1.5);
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ select {
+ display: block;
+ }
+
+ textarea {
+ @extend %ui-content-longanswer;
+ min-height: ($baseline-vertical*10);
+ }
+ }
+
+ .submission__feedback__actions {
+ @extend %ui-subsection-content;
+ padding-top: 0;
+
+ .list--actions {
+ padding: 0;
+ }
+ }
+
+ .action--submit {
+ @extend %btn--secondary;
+ @extend %action-2;
+ @include margin-right(($baseline-vertical/2));
+ }
+}
diff --git a/cms/static/sass/iframe-editors/_oa.scss b/cms/static/sass/iframe-editors/_oa.scss
new file mode 100644
index 000000000000..a128cc627ffc
--- /dev/null
+++ b/cms/static/sass/iframe-editors/_oa.scss
@@ -0,0 +1,1050 @@
+@import 'iframe-editors/oa-base';
+
+@mixin rubric-reuse-jquery-ui {
+ .ui-widget {
+ font-family: Arial,Helvetica,sans-serif;
+ font-size: 1em;
+ }
+ .ui-widget .ui-widget {
+ font-size: 1em;
+ }
+ .ui-widget input,
+ .ui-widget select,
+ .ui-widget textarea,
+ .ui-widget button {
+ font-family: Arial,Helvetica,sans-serif;
+ font-size: 1em;
+ }
+ .ui-widget.ui-widget-content {
+ border: 1px solid #c5c5c5;
+ }
+ .ui-widget-content {
+ border: 1px solid #c5c5c5;
+ background: #ffffff;
+ color: #454545;
+ }
+ .ui-widget-content a {
+ color: #454545;
+ }
+ .ui-widget-header {
+ border: 1px solid #D7D3D1;
+ background: #ffffff;
+ color: #454545;
+ font-weight: bold;
+ }
+ .ui-widget-header a {
+ color: #454545;
+ }
+}
+
+// --------------------
+// colors - paragon
+// --------------------
+$gray-800: #333333;
+
+$light-700: #D7D3D1;
+
+$warning-fill: #F0CC00;
+
+// ====================
+// openassessment: utilities - mixins
+// ====================
+
+@mixin single-box-shadow($offset-x, $offset-y, $blur-radius: 0, $spread-radius: 0, $color: grey, $inset: null) {
+ $shadow : "";
+ @if $bi-app-direction == ltr {
+ $shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
+ } @else {
+ $shadow: -($offset-x) $offset-y $blur-radius $spread-radius $color;
+ }
+
+ @if $inset == inset {
+ $shadow: inset $shadow;
+ }
+ box-shadow: $shadow;
+}
+
+// --------------------
+// Developer Styles for Studio Editing of OA problems
+// --------------------
+
+#openassessment-editor {
+ margin-bottom: 0;
+ height: 100%;
+
+ .openassessment_editor_content_and_tabs {
+ width: 100%;
+ height: calc(100% - 55px);
+ }
+
+ #oa_editor_window_title{
+ @include float(left);
+ }
+
+ input[type="number"]{
+ background-image: -moz-linear-gradient(#F2F2F2,#FFF);
+ background-image: -webkit-linear-gradient(#F2F2F2,#FFF);
+ background-image: linear-gradient(#F2F2F2,#FFF);
+ width: 45%;
+ }
+
+ #openassessment_editor_header {
+ background-color: #e5e5e5;
+ width: 100%;
+ top: 0;
+ height: 42px;
+
+ .editor_tabs {
+
+ display: flex;
+ justify-content: flex-end;
+
+ .oa_editor_tab {
+ padding: 0 10px;
+ margin: 0px 1%;
+ height: 35px;
+ @include border-radius(5px);
+ box-shadow: none;
+ border: 0;
+ @include text-align(center);
+
+ /* For an invalid tab, drop a validation error icon in the button */
+ span.validation-warning {
+ display: none;
+ padding-right: 4px;
+
+ svg {
+ width: 1em;
+ vertical-align: middle;
+ stroke: $gray-d3;
+ fill: #F0CC00;
+ paint-order: stroke;
+
+ path:nth-child(2) {
+ stroke: #F0CC00;
+ fill: $gray-d3;
+ }
+ }
+ }
+
+ a {
+ @include padding(8px, 0, 0, 0);
+ width: 100%;
+ text-transform: uppercase;
+ outline-color: transparent;
+ }
+ }
+
+ /* Inactive tab styling */
+ .ui-state-default.oa_editor_tab{
+ background: #e5e5e5 none;
+ a {
+ color: $gray-d3;
+ }
+ }
+
+ /* Active tab styling */
+ .ui-state-active.ui-state-default.oa_editor_tab:hover,
+ .ui-state-active.oa_editor_tab {
+ background: $gray-d2 none;
+ a {
+ color: $white;
+ }
+ }
+
+ .ui-state-default.oa_editor_tab:hover{
+ background-color: $m-gray-t3;
+ }
+ }
+ }
+
+ #openassessment_validation_alert{
+ width: 100%;
+ @include border-top-left-radius(2px);
+ @include border-top-right-radius(2px);
+ background-color: $gray-800;
+ border-bottom: 3px solid #F0CC00;
+ padding: 10px;
+ position: absolute;
+ z-index: 10;
+ max-height: 200px;
+
+ .openassessment_alert_icon{
+ position: absolute;
+ @include left(3%);
+
+ svg {
+ width: 3em;
+ }
+ }
+
+ .openassessment_alert_header {
+ width: 85%;
+ @include margin(0, 5%, 0, 10%);
+
+ .openassessment_alert_title {
+ width: auto;
+ color: white;
+ }
+
+ .openassessment_alert_message {
+ font-size: 80%;
+ color: $light-700;
+ }
+ }
+
+ // with cancel
+ .openassessment_alert_close {
+ display: inline-block;
+ position: absolute;
+ top: 14px;
+ @include right(0px);
+ color: #e9e9e9;
+ font-size: 1.5em;
+ @include text-align(center);
+ margin: 5px 10px;
+
+ [class^="icon"] {
+ width: auto;
+ margin: 0;
+ padding: 2px;
+ }
+
+ &:hover {
+ color: $blue;
+ }
+ }
+ }
+
+ .oa_editor_content_wrapper {
+ height: calc(100% - 42px);
+ width: 100%;
+ @include border-radius(3px);
+ border: 1px solid $gray-d1;
+ background-color: white;
+ overflow-y: scroll;
+ position: absolute;
+ bottom: 0;
+ z-index: 11;
+
+ transition: height 1s ease-in-out 0;
+ -webkit-transition: height 1s ease-in-out 0;
+ -moz-transition: height 1s ease-in-out 0;
+ }
+
+ #openassessment_rubric_editor {
+ width: 100%;
+ height: 100%;
+ }
+
+ #oa_basic_settings_editor {
+ #openassessment_title_editor_wrapper{
+ label{
+ width: 25%;
+ @include text-align(left);
+ }
+ input{
+ width: 45%;
+ min-width: 100px;
+ }
+ }
+ }
+
+ #openassessment_step_select_description{
+ @include padding(10px, 10px, 0, 10px);
+ font-size: 80%;
+ border-top: 1px solid $gray-d1;
+ margin: 7.5px;
+ }
+
+ .openassessment_assessment_module_settings_editor.openassessment_shrink_for_drag{
+ height: 40px;
+ }
+
+ #ai_training_examples{
+ @include margin(5px, 20px, 10px, 10px);
+ height: 300px;
+ width: calc(100% - 20px);
+ resize: none;
+ font: inherit;
+ line-height: 110%;
+ font-size: 80%;
+ padding: 5px 10px;
+ }
+
+ .openassessment_assessment_module_settings_editor{
+ @include padding(0, 15px, 10px, 0);
+ margin: 10px;
+ border: 1px solid $gray-l3;
+ @include border-radius(3px);
+ position: relative;
+ background-color: white;
+
+ .drag-handle{
+ position: absolute;
+ background: center $m-gray-t1;
+ display: block;
+ top: 0px;
+ @include right(0px);
+ z-index: 10;
+ width: 15px;
+ height: 100%;
+ @include border-left(1px solid $gray-l3);
+ cursor: move;
+ @include transition(none);
+ }
+
+ .openassessment_description_closed{
+ @include padding(5px, 15px, 5px, 15px);
+ font-size: 75%;
+ margin: 0;
+ }
+ .openassessment_description{
+ @include padding(5px, 15px, 0, 15px);
+ font-size: 75%;
+ margin: 0;
+ }
+ .openassessment_view_details {
+ @include padding(5px, 15px, 0, 15px);
+ font-size: 75%;
+ margin: 0;
+
+ a {
+ color: #009fe6;
+ border-bottom: 1px dotted;
+ }
+ }
+ }
+
+ .openassessment_assessment_module_settings_editor.ui-sortable-helper{
+ opacity: 50%;
+ border-color: #009fe6;
+ }
+
+ .openassessment_assessment_module_settings_editor:hover {
+ border-color: $blue;
+ .drag-handle {
+ background-color: #009fe6;
+ border-color: #009fe6;
+ @include transition(none);
+ }
+ }
+
+ .openassessment_description{
+ font-size: 75%;
+ margin: 0;
+ }
+
+ .openassessment_inclusion_wrapper{
+ margin: 0;
+ @include padding(15px, 5px, 5px, 8px);
+ @include border-top-left-radius(2px);
+ @include border-top-right-radius(2px);
+
+ label{
+ font-size: 19px;
+ cursor: pointer;
+ @include margin-left(($baseline-horizontal/2));
+ }
+ }
+
+ label{
+ @include padding-right(10px);
+ }
+
+ .xblock_actions {
+ background-color: $gray-l2;
+ position: absolute;
+ width: 100%;
+ bottom: 0;
+ }
+
+ .openassessment_tab_instructions {
+ background-color: $m-gray-t1;
+ border-bottom: 1px solid $gray-d1;
+ padding: 10px;
+ }
+
+ .openassessment_container_header {
+ margin: ($baseline-vertical/2) ($baseline-horizontal/4);
+ padding-bottom: $baseline-vertical/4;
+ border-bottom: 1px solid;
+ overflow: auto;
+ color: $gray-d2;
+ }
+
+ .action.expand-collapse {
+ @include float(left);
+ .ui-toggle-expansion {
+ color: $gray-d2;
+ cursor: pointer;
+ }
+ .ui-toggle-expansion:hover {
+ color: $gray-d1;
+ cursor: pointer;
+ }
+ }
+
+ .openassessment_container_header_title_box {
+ @include float(left);
+ width: 80%;
+ display: inline-block;
+ }
+
+ .openassessment_container_header_title {
+ text-transform: uppercase;
+ cursor: default;
+ padding-top: 2px;
+ }
+
+ .openassessment_container_guide {
+ @extend %t-small;
+ }
+
+ .openassessment_container_remove_button{
+ cursor: pointer;
+ h2:after{
+ font-family: FontAwesome;
+ content: "\f00d";
+ display: inline-block;
+ color: inherit;
+ margin: 0 5px;
+ }
+ h2{
+ text-transform: uppercase;
+ font-size: 80%;
+ @include float(right);
+ display: inline-block;
+ padding: 3px 8px 3px 13px;
+ }
+ @include float(right);
+ }
+ .openassessment_container_remove_button:hover{
+ background-color: $gray-d2;
+ border-radius: 4px;
+ color: white;
+ }
+
+ .openassessment_container_add_button {
+ h6:before{
+ font-family: "FontAwesome";
+ display: inline-block;
+ @include margin-left(5px);
+ @include margin-right(10px);
+ width: auto;
+ height: auto;
+ content: "\f067";
+ }
+
+ background-color: white;
+ border: 1px solid;
+ border-radius: 4px;
+ text-align: center;
+ color: #009fe6;
+ padding: 10px;
+ margin: 15px 10px;
+ }
+
+ .openassessment_container_add_button.openassessment_highlighted_field {
+ color: red;
+ border-width: 2px;
+ }
+
+ .openassessment_container_add_button:hover {
+ color: white;
+ background-color: #009fe6;
+ cursor: pointer;
+ }
+
+ .openassessment_container_remove_button.is--disabled,
+ .openassessment_container_remove_button.is--disabled:hover,
+ .openassessment_container_add_button.is--disabled,
+ .openassessment_container_add_button.is--disabled:hover {
+ color: $gray-l2;
+ background-color: transparent;
+ cursor: auto;
+ }
+
+ #oa_prompts_editor_wrapper {
+
+ .wrapper-comp-settings {
+ display: block;
+ }
+
+ .openassessment_prompt_description {
+ width: 100%;
+ min-height: 100px;
+ resize: none;
+ border: 1px solid #b2b2b2;
+ border-radius: 4px;
+ padding: 10px;
+ font-family: $f-sans-serif;
+ font-size: 14px;
+ overflow: auto;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ }
+
+ .openassessment_prompt_description.openassessment_highlighted_field {
+ border: 2px solid red;
+ }
+ }
+
+ #oa_rubric_editor_wrapper{
+
+ .wrapper-comp-settings{
+ display: block;
+ }
+
+ // Rubric cloning section
+ #openassessment_rubric_clone {
+ @include rubric-reuse-jquery-ui;
+ .ui-accordion-header {
+ padding: 5px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 28px;
+
+ #rubric-reuse-collapse-icon::after {
+ @include float(right);
+ font-family: FontAwesome;
+ display: inline-block;
+ color: inherit;
+ padding: 0 5px;
+ content: "\f067";
+ }
+ }
+
+ .ui-accordion-header-active #rubric-reuse-collapse-icon::after {
+ content: "\f068";
+ }
+
+ .ui-accordion-header-icon {
+ display: none
+ }
+
+ .openassessment_rubric_clone_block{
+ padding: 8px 0px;
+ .no-select{
+ user-select: none
+ }
+ }
+
+ .ui-accordion-content {
+ overflow: visible;
+
+ #openassessment_rubric_clone_form_container {
+ display: flex;
+
+ #openassessment_rubric_clone_input_container {
+ flex: 9;
+
+ #openassessment_rubric_clone_input {
+ padding: 6px;
+ width: 90%;
+ height: 40px;
+ vertical-align: middle;
+ }
+
+ .openassessment_clone_combobox {
+ position: relative;
+ display: inline-block;
+ }
+
+ .openassessment_clone_combobox_toggle {
+ vertical-align: middle;
+ font-family: FontAwesome;
+ margin-left: -1px;
+ padding: 6px;
+ height: 40px;
+
+ span {
+ padding: 0;
+ }
+ }
+ }
+ #openassessment_rubric_clone_button_container {
+ flex: 3;
+
+ #openassessment_rubric_clone_button {
+ margin-top: 0;
+ float: left;
+ }
+ }
+ }
+
+ #openassessment_rubric_clone_alert {
+ background: #BBE6D7;
+ border: 1px solid #175B3C;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 10px;
+ margin: 5px 0;
+ }
+ }
+ }
+
+ .openassessment_criterion {
+
+ .openassessment_criterion_add_option {
+ h2:before {
+ font-family: FontAwesome;
+ content: "\f067";
+ display: inline-block;
+ margin: 0 5px;
+ }
+ @include text-align(center);
+ border: 1px solid;
+ color: #009fe6;
+ background-color: white;
+ padding: 7.5px;
+ @include margin(10px, 10px, 10px, 20px);
+ @include border-radius(3px);
+ cursor: pointer;
+ }
+
+ .openassessment_criterion_add_option:hover{
+ background-color: #009fe6;
+ color: white;
+ }
+
+ .openassessment_criterion_basic_editor{
+ .comp-setting-entry{
+ @include padding-right(0);
+ @include margin-right(10px);
+ overflow: auto;
+
+ .wrapper-comp-settings{
+ label{
+ padding: 0;
+ margin: 0;
+ width: 100%;
+
+ input{
+ font-size: 11px;
+ @include float(right);
+ width: 70%;
+ }
+ }
+ .openassessment_criterion_prompt{
+ padding: 10px;
+ @extend .openassessment_large_text_input;
+ width: 70%;
+ @include float(right);
+ }
+ .openassessment_criterion_prompt.openassessment_highlighted_field{
+ border: 2px solid red;
+ }
+ }
+ }
+ }
+
+ .openassessment_criterion_feedback_wrapper{
+
+ .openassessment_criterion_feedback_header {
+ background-color: $gray-l2;
+ padding: 5px;
+ margin: 10px;
+ @include border-radius(3px);
+
+ }
+
+ label{
+ width: 100%;
+ select{
+ @include float(right);
+ @include margin-right(24%);
+ }
+ }
+
+ .openassessment_criterion_feedback_direction{
+ label{
+ @include margin-left(15px);
+ }
+ }
+ }
+ }
+
+ .openassessment_criterion_option{
+ @include padding(5px, 5px, 5px, 15px);
+
+ .openassessment_criterion_option_remove_button{
+ @extend .openassessment_container_remove_button;
+ }
+
+ .openassessment_option_header{
+ background-color: $m-gray-t1;
+ @include padding(5px, 5px, 5px, 10px);
+ @include margin(5px, 5px, 8px, 5px);
+ @include border-radius(3px);
+ overflow: auto;
+
+ .openassessment_option_header_title{
+ cursor: default;
+ @include float(left);
+ @include padding(2.5px, 0, 0, 5px);
+ }
+
+ .openassessment_option_header_remove{
+ @extend .openassessment_container_remove_button;
+ }
+ }
+
+ .openassessment_criterion_option_point_wrapper{
+ width: 30%;
+ border-top: none;
+ @include padding(10px, 5px, 10px, 0px);
+ @include float(left);
+ margin: 0;
+
+ .wrapper-comp-setting{
+ min-width: 150px;
+ }
+
+ label{
+ width: 100%;
+ @include padding-left(calc((100% - 150px)/2));
+ margin: 0;
+ @include float(right);
+
+ input{
+ min-width: 50px;
+ padding: 10px;
+ @include float(right);
+ width: 30%;
+ font-size: 11px;
+ }
+ }
+ }
+
+ .openassessment_criterion_option_name_wrapper{
+ @include float(left);
+ width: 70%;
+ @include padding(10px, 10px, 10px, 20px);
+ border-top: 0;
+ margin: 0;
+
+ label{
+ width: 100%;
+ vertical-align: middle;
+ padding: 0;
+ margin: 0;
+
+ input{
+ padding: 10px;
+ font-size: 11px;
+ width: 56%;
+ @include float(right);
+ }
+ }
+ }
+
+ .openassessment_criterion_option_explanation_wrapper{
+ @include padding(15px, 5px, 0px, 20px);
+ width: 100%;
+ display: inline-block;
+ margin: 0;
+
+ label {
+ width: 100%;
+ @include text-align(left);
+ margin: 0;
+
+ textarea {
+ padding: 10px;
+ @extend .openassessment_input_styling;
+ height: 70px;
+ width: 69.5%;
+ @include float(right);
+ }
+ }
+ }
+ }
+
+ .openassessment_large_text_input{
+ height: 70px;
+ width: 70%;
+ @extend .openassessment_input_styling;
+ }
+
+ .openassessment_input_styling{
+ resize: none;
+ box-sizing: border-box;
+ border: 1px solid #b2b2b2;
+ border-radius: 2px;
+ background-image: -webkit-linear-gradient(#F2F2F2,#FFF);
+ background-image: -moz-linear-gradient(#F2F2F2,#FFF);
+ background-image: linear-gradient(#F2F2F2,#FFF);
+ @include single-box-shadow(0, 1px, 2px, 0, rgba(0, 0, 0, 0.1), inset);
+ font-family: 'Open Sans', sans-serif;
+ font-size: 11px;
+ color: #4c4c4c;
+ }
+
+ #openassessment_rubric_feedback_wrapper{
+ padding: 0;
+
+
+ #openassessment_rubric_feedback_header{
+ background-color: $m-gray-t1;
+ @include padding(7.5px, 7.5px, 7.5px, 15px);
+ @include margin(10px, 10px, 0, 10px);
+ border-radius: 3px;
+ }
+
+ label{
+ padding-top: 10px;
+ }
+
+ textarea{
+ padding: 10px;
+ @extend .openassessment_large_text_input;
+ width: 70%;
+ @include float(right);
+ }
+ }
+ }
+
+ #oa_schedule_editor_wrapper {
+ .openassessment_schedule_setting_header {
+ font-size: 19px;
+ @include margin(15px, 0, 10px, 30px);
+ }
+
+ .openassessment_date_config_radio_container {
+ border-bottom: 1px solid #e5e5e5;
+
+ .date_config_radio_header {
+ font-size: 1.4em;
+ font-weight: 600;
+ }
+
+ .date_config_doc_link {
+ margin: 16px 0;
+ color: #0075b4;
+ :hover {
+ color: #065683;
+ }
+ }
+
+ .openassessment_date_config_radio_wrapper {
+ display: flex;
+ gap: 1em;
+ padding: 10px 0;
+
+ .wrapper-comp-setting {
+ min-width: unset;
+ display: flex;
+ align-items: center;
+
+ input[type="radio"] {
+ height: 20px;
+ min-width: auto;
+ width: 20px;
+ margin: 0 8px;
+ }
+
+ input:disabled+label {
+ color: $gray-l2;
+ font-weight: normal;
+ }
+
+ .setting-label {
+ width: auto;
+ font-weight: normal;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 992px) {
+ .openassessment_date_config_radio_wrapper {
+ flex-direction: column;
+ gap: 0;
+
+ .wrapper-comp-setting input[type="radio"] {
+ width: auto;
+ margin: 0 5px;
+ }
+ }
+ }
+
+ li {
+ &:nth-child(2) {
+ border-bottom: 1px solid #e5e5e5;
+ }
+ }
+
+ #peer_assessment_schedule_editor
+ #self_assessment_schedule_editor {
+ li {
+ &:nth-child(2) {
+ border-bottom: 1px solid #e5e5e5;
+ }
+ }
+ }
+ }
+
+ hr{
+ background-color: transparent;
+ color: $gray-d3;
+ height: 1px;
+ border: 0px;
+ clear: both;
+ }
+
+}
+
+//For Both of these, we use high specificity to overload the previous styles
+//without the important tag.
+.modal-lg.modal-window.confirm.openassessment_modal_window{
+ height: 80%;
+ top: 10%;
+ min-width: 600px;
+}
+
+.openassessment_full_height.edit-xblock-modal,
+.openassessment_full_height.xblock-editor,
+.openassessment_full_height.xblock.xblock-studio_view.xblock-initialized,
+[class*="view-"] .modal-lg.modal-editor .openassessment_full_height.modal-content
+{
+ height: 100%;
+}
+
+#openassessment-editor {
+ .openassessment_highlighted_field{
+ border-color: red;
+ border-width: 2px;
+ }
+}
+
+#student_training_settings_editor {
+
+ .openassessment_training_example {
+ padding: 5px;
+ .openassessment_training_example_header {
+ margin: 10px;
+ padding: 5px;
+ border-bottom: 1px solid;
+ overflow: auto;
+ color: $gray-d2;
+
+ .openassessment_training_example_header_title {
+ text-transform: uppercase;
+ width: 50%;
+ display: inline-block;
+ @include float(left);
+ padding-top: 2px;
+ }
+
+ .openassessment_training_example_remove {
+ @include padding(3px, 5px, 3px, 7px);
+ cursor: pointer;
+ border-radius: 4px;
+
+ h2:after {
+ font-family: FontAwesome;
+ content: "\f00d";
+ display: inline-block;
+ color: inherit;
+ margin: 0 5px;
+ }
+ h2 {
+ text-transform: uppercase;
+ font-size: 80%;
+ @include float(right);
+ display: inline-block;
+ }
+ @include float(right);
+ }
+
+ .openassessment_training_example_remove:hover {
+ background-color: lightgray;
+ }
+
+ }
+
+ .openassessment_training_example_body {
+ @include padding(0, 15px, 15px, 15px);
+ position: relative;
+ overflow: scroll;
+ .openassessment_training_example_essay_wrapper {
+ width: 58%;
+ display: inline-block;
+ position: absolute;
+ @include left(15px);
+ height: 100%;
+ textarea {
+ min-height: 90px;
+ height: calc(100% - 35px);
+ resize: none;
+ box-sizing: border-box;
+ border: 1px solid #b2b2b2;
+ border-radius: 2px;
+ @include padding(6px, 8px, 8px, 8px);
+ background-color: white;
+ @include single-box-shadow(0, 1px, 2px, 0, rgba(0, 0, 0, 0.1), inset);
+ font-family: 'Open Sans', sans-serif;
+ font-size: 11px;
+ color: #4c4c4c;
+ @include margin(5px, 15px, 0, 10px);
+ width: calc(100% - 25px);
+ }
+ }
+
+ .openassessment_training_example_scored_rubric {
+ width: 40%;
+ display: inline-block;
+ @include float(right);
+ min-height: 150px;
+ .openassessment_training_example_criteria_selections {
+ .comp-setting-entry {
+ .wrapper-comp-setting{
+ min-width: 100px;
+ }
+ margin: 0;
+ padding: 10px;
+ label{
+ width: 100%;
+ @include margin-left(0);
+ select {
+ width: 60%;
+ @include float(right);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .openassessment_add_training_example {
+ color: #009fe6;
+ @include text-align(center);
+ padding: 5px;
+ border: 1px solid;
+ border-radius: 4px;
+ margin: 10px;
+ }
+
+ .openassessment_add_training_example:hover {
+ color: white;
+ background-color: #009fe6;
+ cursor: pointer;
+ }
+
+ .openassessment_add_training_example:before {
+ font-family: "FontAwesome";
+ display: inline-block;
+ width: auto;
+ height: auto;
+ content: "\f067";
+ margin: 0 10px;
+ }
+}
+
+#openassessment-editor .wrapper-comp-settings .list-input.settings-list .field.comp-setting-entry select {
+ padding: 5px;
+}
+
diff --git a/common/static/css/vendor/hint.css b/common/static/css/vendor/hint.css
new file mode 100644
index 000000000000..30602ade6933
--- /dev/null
+++ b/common/static/css/vendor/hint.css
@@ -0,0 +1,283 @@
+/*! Hint.css - v1.3.1 - 2013-11-23
+* http://kushagragour.in/lab/hint/
+* Copyright (c) 2013 Kushagra Gour; Licensed MIT */
+
+/*-------------------------------------*\
+ HINT.css - A CSS tooltip library
+\*-------------------------------------*/
+/**
+ * HINT.css is a tooltip library made in pure CSS.
+ *
+ * Source: https://github.com/chinchang/hint.css
+ * Demo: http://kushagragour.in/lab/hint/
+ *
+ * Release under The MIT License
+ *
+ */
+/**
+ * source: hint-core.scss
+ *
+ * Defines the basic styling for the tooltip.
+ * Each tooltip is made of 2 parts:
+ * 1) body (:after)
+ * 2) arrow (:before)
+ *
+ * Classes added:
+ * 1) hint
+ */
+.hint, [data-hint] {
+ position: relative;
+ display: inline-block;
+ /**
+ * tooltip arrow
+ */
+ /**
+ * tooltip body
+ */ }
+ .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
+ position: absolute;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ visibility: hidden;
+ opacity: 0;
+ z-index: 1000000;
+ pointer-events: none;
+ -webkit-transition: 0.3s ease;
+ -moz-transition: 0.3s ease;
+ transition: 0.3s ease; }
+ .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
+ visibility: visible;
+ opacity: 1; }
+ .hint:before, [data-hint]:before {
+ content: '';
+ position: absolute;
+ background: transparent;
+ border: 6px solid transparent;
+ z-index: 1000001; }
+ .hint:after, [data-hint]:after {
+ content: attr(data-hint);
+ background: #383838;
+ color: white;
+ text-shadow: 0 -1px 0px black;
+ padding: 8px 10px;
+ font-size: 12px;
+ line-height: 12px;
+ white-space: nowrap;
+ box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
+
+/**
+ * source: hint-position.scss
+ *
+ * Defines the positoning logic for the tooltips.
+ *
+ * Classes added:
+ * 1) hint--top
+ * 2) hint--bottom
+ * 3) hint--left
+ * 4) hint--right
+ */
+/**
+ * set default color for tooltip arrows
+ */
+.hint--top:before {
+ border-top-color: #383838; }
+
+.hint--bottom:before {
+ border-bottom-color: #383838; }
+
+.hint--left:before {
+ border-left-color: #383838; }
+
+.hint--right:before {
+ border-right-color: #383838; }
+
+/**
+ * top tooltip
+ */
+.hint--top:before {
+ margin-bottom: -12px; }
+.hint--top:after {
+ margin-left: -18px; }
+.hint--top:before, .hint--top:after {
+ bottom: 100%;
+ left: 50%; }
+.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
+ -webkit-transform: translateY(-8px);
+ -moz-transform: translateY(-8px);
+ transform: translateY(-8px); }
+
+/**
+ * bottom tooltip
+ */
+.hint--bottom:before {
+ margin-top: -12px; }
+.hint--bottom:after {
+ margin-left: -18px; }
+.hint--bottom:before, .hint--bottom:after {
+ top: 100%;
+ left: 50%; }
+.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
+ -webkit-transform: translateY(8px);
+ -moz-transform: translateY(8px);
+ transform: translateY(8px); }
+
+/**
+ * right tooltip
+ */
+.hint--right:before {
+ margin-left: -12px;
+ margin-bottom: -6px; }
+.hint--right:after {
+ margin-bottom: -14px; }
+.hint--right:before, .hint--right:after {
+ left: 100%;
+ bottom: 50%; }
+.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
+ -webkit-transform: translateX(8px);
+ -moz-transform: translateX(8px);
+ transform: translateX(8px); }
+
+/**
+ * left tooltip
+ */
+.hint--left:before {
+ margin-right: -12px;
+ margin-bottom: -6px; }
+.hint--left:after {
+ margin-bottom: -14px; }
+.hint--left:before, .hint--left:after {
+ right: 100%;
+ bottom: 50%; }
+.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
+ -webkit-transform: translateX(-8px);
+ -moz-transform: translateX(-8px);
+ transform: translateX(-8px); }
+
+/**
+ * source: hint-color-types.scss
+ *
+ * Contains tooltips of various types based on color differences.
+ *
+ * Classes added:
+ * 1) hint--error
+ * 2) hint--warning
+ * 3) hint--info
+ * 4) hint--success
+ *
+ */
+/**
+ * Error
+ */
+.hint--error:after {
+ background-color: #b34e4d;
+ text-shadow: 0 -1px 0px #592726; }
+.hint--error.hint--top:before {
+ border-top-color: #b34e4d; }
+.hint--error.hint--bottom:before {
+ border-bottom-color: #b34e4d; }
+.hint--error.hint--left:before {
+ border-left-color: #b34e4d; }
+.hint--error.hint--right:before {
+ border-right-color: #b34e4d; }
+
+/**
+ * Warning
+ */
+.hint--warning:after {
+ background-color: #c09854;
+ text-shadow: 0 -1px 0px #6c5328; }
+.hint--warning.hint--top:before {
+ border-top-color: #c09854; }
+.hint--warning.hint--bottom:before {
+ border-bottom-color: #c09854; }
+.hint--warning.hint--left:before {
+ border-left-color: #c09854; }
+.hint--warning.hint--right:before {
+ border-right-color: #c09854; }
+
+/**
+ * Info
+ */
+.hint--info:after {
+ background-color: #3986ac;
+ text-shadow: 0 -1px 0px #193b4d; }
+.hint--info.hint--top:before {
+ border-top-color: #3986ac; }
+.hint--info.hint--bottom:before {
+ border-bottom-color: #3986ac; }
+.hint--info.hint--left:before {
+ border-left-color: #3986ac; }
+.hint--info.hint--right:before {
+ border-right-color: #3986ac; }
+
+/**
+ * Success
+ */
+.hint--success:after {
+ background-color: #458746;
+ text-shadow: 0 -1px 0px #1a321a; }
+.hint--success.hint--top:before {
+ border-top-color: #458746; }
+.hint--success.hint--bottom:before {
+ border-bottom-color: #458746; }
+.hint--success.hint--left:before {
+ border-left-color: #458746; }
+.hint--success.hint--right:before {
+ border-right-color: #458746; }
+
+/**
+ * source: hint-always.scss
+ *
+ * Defines a persisted tooltip which shows always.
+ *
+ * Classes added:
+ * 1) hint--always
+ *
+ */
+.hint--always:after, .hint--always:before {
+ opacity: 1;
+ visibility: visible; }
+.hint--always.hint--top:after, .hint--always.hint--top:before {
+ -webkit-transform: translateY(-8px);
+ -moz-transform: translateY(-8px);
+ transform: translateY(-8px); }
+.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
+ -webkit-transform: translateY(8px);
+ -moz-transform: translateY(8px);
+ transform: translateY(8px); }
+.hint--always.hint--left:after, .hint--always.hint--left:before {
+ -webkit-transform: translateX(-8px);
+ -moz-transform: translateX(-8px);
+ transform: translateX(-8px); }
+.hint--always.hint--right:after, .hint--always.hint--right:before {
+ -webkit-transform: translateX(8px);
+ -moz-transform: translateX(8px);
+ transform: translateX(8px); }
+
+/**
+ * source: hint-rounded.scss
+ *
+ * Defines rounded corner tooltips.
+ *
+ * Classes added:
+ * 1) hint--rounded
+ *
+ */
+.hint--rounded:after {
+ border-radius: 4px; }
+
+/**
+ * source: hint-effects.scss
+ *
+ * Defines various transition effects for the tooltips.
+ *
+ * Classes added:
+ * 1) hint--bounce
+ *
+ */
+.hint--bounce:before, .hint--bounce:after {
+ -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+ -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+ transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
+
diff --git a/common/templates/xblock_v2/xblock_iframe.html b/common/templates/xblock_v2/xblock_iframe.html
index 57ff4684ddbd..ce74924b8c5c 100644
--- a/common/templates/xblock_v2/xblock_iframe.html
+++ b/common/templates/xblock_v2/xblock_iframe.html
@@ -15,6 +15,8 @@
{% endif %}
+
+