Skip to content

E
edx-ora2
Commit 44d69399 by Christina Roberts Committed by GitHub
Options

Merge pull request #940 from edx/christina/colors 

Fix color contrast issues in ORA
parents a9650aba 9f290006
Showing with 212 additions and 365 deletions
openassessment/templates/openassessmentblock/oa_base.html
......@@ -21,12 +21,14 @@
<ol class="openassessment__steps">
{% for assessment in rubric_assessments %}
<li class="{{ assessment.class_id }} openassessment__steps__step is--loading">
<header class="step__header">
<header class="step__header ui-slidable__container">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans assessment.title %}</span>
</span>
<button class="ui-slidable" aria-expanded="false" disabled>
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans assessment.title %}</span>
</span>
</button>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status:" %}</span>
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -3,7 +3,7 @@
{% block list_item %}
<li
id="openassessment__peer-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container {% if allow_latex %} allow--latex {%endif%}"
class="openassessment__steps__step step--peer-assessment is--in-progress is--showing ui-slidable__container {% if allow_latex %} allow--latex {%endif%}"
data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1"
>
......
openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--incomplete is--showing ui-slidable__container" tabindex="-1">
{% endblock %}
......
openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -2,7 +2,7 @@
{% load i18n %}
{% spaceless %}
{% block list_item %}
<li class="openassessment__steps__step step--response is--showing ui-slidable__container"
<li class="openassessment__steps__step step--response is--in-progress is--showing ui-slidable__container"
tabindex="-1">
{% endblock %}
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -3,7 +3,7 @@
{% spaceless %}
{% block list_item %}
<li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
class="openassessment__steps__step step--self-assessment is--showing is--in-progress ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
......
openassessment/templates/openassessmentblock/student_training/student_training.html
......@@ -2,7 +2,7 @@
{% load tz %}
{% spaceless %}
{% block list_item %}
<li class="openassessment__steps__step step--student-training is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
<li class="openassessment__steps__step step--student-training is--showing is--in-progress ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
......
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/sass/oa/elements/_staff.scss
......@@ -29,7 +29,7 @@
.ui-staff__title {
@extend %t-heading;
color: $copy-staff-color;
color: $heading-staff-color;
}
.ui-staff__subtitle {
......@@ -52,7 +52,7 @@
.ui-staff__content {
margin-top: $baseline-v;
color: $copy-staff-color;
color: $heading-staff-color;
}
.ui-staff__content__section {
......@@ -63,6 +63,7 @@
.wrapper--content {
padding: $baseline-v ($baseline-h/2);
background-color: $bg-content;
color: $copy-color;
}
}
......@@ -91,14 +92,10 @@
.openassessment_student_info_form {
margin-bottom: ($baseline-v/2);
.list--actions__item {
@include text-align(left);
.action--submit-username {
@extend %btn--secondary;
.action--submit-username {
@extend %btn--primary;
margin-left: 0;
}
@include margin-left(0);
}
}
......@@ -124,7 +121,7 @@
}
th, td {
border: 1px solid rgba($copy-staff-color, 0.25);
border: 1px solid rgba($heading-staff-color, 0.25);
padding: ($baseline-v/2) ($baseline-h/4);
}
......@@ -168,7 +165,7 @@
.staff-assessment__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
color: $heading-color;
}
}
......@@ -319,7 +316,7 @@
.staff-info__cancel-submission__content {
.comments__label {
color: $copy-secondary-color;
color: $copy-color;
}
.cancel_submission_comments {
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -27,10 +27,6 @@
// Developer styles for Staff Section
// --------------------
// edX constants
$lighter-base-font-color: rgb(100,100,100);
$link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.org/elements/colors/
.wrapper--openassessment .wrapper--staff-area {
width: 100%;
overflow: auto;
......@@ -50,7 +46,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
font-size: 12px;
border-radius: ($baseline-v/4);
text-transform: uppercase;
color: $lighter-base-font-color;
color: $copy-color;
background-color: $shadow-l2;
&.is--active {
......@@ -64,7 +60,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
&:hover {
color: white;
background-color: $link-hover;
background-color: $action-primary-color;
}
}
}
......@@ -121,7 +117,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
}
.student__answer__display__content {
border: 1px solid rgba($copy-staff-color, 0.25);
border: 1px solid rgba($heading-staff-color, 0.25);
padding: ($baseline-v/2) ($baseline-h/4);
margin-bottom: ($baseline-v/2);
}
......@@ -163,7 +159,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
.student-training__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
color: $heading-color;
}
.student-training__display__response {
......@@ -1120,7 +1116,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
.leaderboard__title {
@extend %t-superheading;
color: $heading-primary-color;
color: $heading-color;
}
.list.leaderboard__score__list {
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -84,6 +84,11 @@
}
}
// STATE: is in-progress
&.is--in-progress {
border-top-color: $action-primary-color;
}
// STATE: is complete
&.is--complete {
border-top-color: $color-complete;
......@@ -202,7 +207,7 @@
@extend %copy-3;
@extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style
color: $copy-secondary-color;
color: $copy-color;
}
.answer__value {
......@@ -247,7 +252,7 @@
@extend %copy-3;
@include margin-right($baseline-v);
color: $copy-secondary-color;
color: $copy-color;
@include media($bp-dm) {
@include bidi-span-columns(6 of 8);
......@@ -274,7 +279,7 @@
.answer__points {
@extend %t-score;
color: $copy-secondary-color;
color: $copy-color;
@include media($bp-dm) {
@include float(right);
......@@ -295,7 +300,7 @@
.answer__points__label {
display: inline-block; // FIX: need to reset base label style
@include margin-left(($baseline-v/4));
color: $copy-secondary-color;
color: $copy-color;
}
// ELEM: criterion selects
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -38,7 +38,7 @@
.openassessment__steps .openassessment__steps__step .step__header {
.step__deadline {
color: $heading-secondary-color;
color: $heading-color;
}
// step title/name
......@@ -67,7 +67,7 @@
@extend %t-strong;
content: counter(item, decimal);
counter-increment: item;
color: $color-decorative-tertiary;
color: $copy-color;
}
}
}
......@@ -120,7 +120,7 @@
.self-assessment__display__title, .peer-assessment__display__title {
margin-bottom: ($baseline-v/2) !important;
color: $heading-secondary-color !important;
color: $heading-color !important;
}
// shown submission/results
......@@ -142,7 +142,7 @@
}
// actions
.action--submit, .action--save {
.action--submit, .action--save, .action--upload {
text-shadow: none !important;
box-shadow: none !important;
}
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -64,7 +64,7 @@
.action--submit {
@extend %btn--primary;
@extend %action-2;
margin-left: ($baseline-v/2);
@include margin-left($baseline-v/2);
margin-top: ($baseline-v/2);
.copy, .icon {
......@@ -132,7 +132,7 @@
display: none;
content: counter(item, decimal);
counter-increment: item;
color: $color-decorative-tertiary;
color: $copy-color;
}
@include media($bp-dm) {
......@@ -173,7 +173,7 @@
.step__deadline {
@extend %hd-4;
color: $heading-secondary-color;
color: $heading-color;
}
}
......@@ -260,7 +260,7 @@
.step__instruction {
@extend %copy-2;
margin-bottom: $baseline-v;
color: $copy-secondary-color;
color: $copy-color;
}
// step content
......@@ -286,7 +286,7 @@
}
.step__counter:before, .step__label, .step__deadline {
color: $color-unavailable;
color: $copy-color;
}
.step__status__value {
......@@ -298,11 +298,11 @@
.icon {
display: inline-block;
color: $copy-secondary-color;
color: $copy-color;
}
.copy {
color: $copy-secondary-color;
color: $copy-color;
}
}
}
......@@ -311,15 +311,15 @@
&.is--incomplete {
.step__counter:before {
border-color: rgba($color-incomplete, 0.5);
color: $color-incomplete;
border-color: $color-incomplete;
color: $copy-color;
}
.step__status__value {
background: $color-incomplete;
.copy, .icon {
color: $white-t;
color: $copy-color;
}
}
}
......@@ -328,7 +328,7 @@
&.is--unavailable {
.step__counter:before, .step__label, .step__deadline {
color: $color-unavailable;
color: $copy-color;
}
.step__status__value {
......@@ -336,11 +336,11 @@
.icon {
display: inline-block;
color: $copy-secondary-color;
color: $copy-color;
}
.copy {
color: $copy-secondary-color;
color: $copy-color;
}
}
}
......@@ -349,7 +349,7 @@
&.is--waiting {
.step__counter:before, .step__label, .step__deadline {
color: $color-unavailable;
color: $copy-color;
}
.step__status__value {
......@@ -357,11 +357,11 @@
.icon {
display: inline-block;
color: $copy-secondary-color;
color: $copy-color;
}
.copy {
color: $copy-secondary-color;
color: $copy-color;
}
}
......@@ -370,7 +370,7 @@
}
.step__instruction, .grade__value__description {
color: $copy-secondary-color;
color: $copy-color;
}
}
......@@ -389,7 +389,31 @@
}
.copy, .icon {
color: $white-t;
color: $copy-inverse-color;
}
}
button {
opacity: 1;
}
}
// STATE: in-progress
&.is--in-progress {
.step__counter:before {
color: $action-primary-color;
}
.step__status__value {
background: $action-primary-color;
.icon {
display: inline-block;
}
.copy, .icon {
color: $copy-inverse-color;
}
}
......@@ -410,7 +434,7 @@
background: $color-error;
.copy, .icon {
color: $white-t;
color: $copy-inverse-color;
}
}
......@@ -525,7 +549,7 @@
div.submission__answer__part__text__value {
border: 1px solid $color-decorative-secondary;
background-color: $white-t;
background-color: $white;
padding: $baseline-v;
}
......@@ -557,13 +581,13 @@
@extend %t-score;
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-secondary;
color: $white-t;
color: $copy-inverse-color;
}
}
.response__submission__label {
@extend %t-score;
color: $action-secondary-color;
color: $copy-color;
display: inline-block;
vertical-align: middle;
@include margin-left(($baseline-h/4));
......@@ -638,7 +662,7 @@
.peer-assessment__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
color: $heading-color;
}
}
......@@ -706,7 +730,7 @@
.self-assessment__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
color: $heading-color;
}
.self-assessment__display__response {
......@@ -853,7 +877,7 @@
.submission__answer__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
color: $heading-color;
}
.submission__answer__display__content {
......@@ -887,7 +911,7 @@
.submission__peer-evaluations__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
color: $heading-color;
}
// rubric questions
......@@ -935,18 +959,18 @@
.question__score__value {
@extend %t-strong;
color: $heading-primary-color;
color: $heading-color;
&:after {
content: "/";
@include margin-left(($baseline-v/4));
color: $heading-secondary-color;
color: $heading-color;
}
}
.question__score__potential {
@extend %t-strong;
color: $heading-secondary-color;
color: $heading-color;
.unit {
@extend %t-strong;
......@@ -1001,18 +1025,18 @@
@extend %t-strong;
@extend %t-titlecase;
display: block;
color: $heading-secondary-color;
color: $heading-color;
.answer__source__value-with-points {
@extend %t-score;
color: $heading-primary-color;
color: $heading-color;
}
}
.answer__value {
display: block;
margin-bottom: ($baseline-v/2);
color: $heading-primary-color;
color: $heading-color;
.answer__value__raw {
white-space: pre-wrap;
......@@ -1038,7 +1062,7 @@
.answer__score, .answer__score__value {
@extend %t-score;
display: block;
color: $heading-primary-color;
color: $heading-color;
}
}
......@@ -1084,7 +1108,7 @@
@extend %t-strong;
@extend %t-titlecase;
display: block;
color: $heading-secondary-color;
color: $heading-color;
}
.feedback__value {
......@@ -1130,7 +1154,7 @@
.submission__feedback__instructions {
@extend %copy-2;
margin-bottom: $baseline-v;
color: $copy-secondary-color;
color: $copy-color;
}
.submission__feedback__elements {
......
openassessment/xblock/static/sass/themes/edx/_utilities.scss
......@@ -10,47 +10,11 @@
// --------------------
$edx-blue: rgb(58, 162, 224);
$edx-blue-l1: tint($edx-blue,20%);
$edx-blue-l2: tint($edx-blue,40%);
$edx-blue-l3: tint($edx-blue,60%);
$edx-blue-l4: tint($edx-blue,80%);
$edx-blue-l5: tint($edx-blue,90%);
$edx-blue-d1: shade($edx-blue,20%);
$edx-blue-d2: shade($edx-blue,40%);
$edx-blue-d3: shade($edx-blue,60%);
$edx-blue-d4: shade($edx-blue,80%);
$edx-blue-d5: shade($edx-blue,90%);
$edx-blue-s1: saturate($edx-blue,15%);
$edx-blue-s2: saturate($edx-blue,30%);
$edx-blue-s3: saturate($edx-blue,45%);
$edx-blue-u1: desaturate($edx-blue,15%);
$edx-blue-u2: desaturate($edx-blue,30%);
$edx-blue-u3: desaturate($edx-blue,45%);
$edx-blue-t0: rgba($edx-blue,0.125);
$edx-blue-t1: rgba($edx-blue,0.25);
$edx-blue-t2: rgba($edx-blue,0.50);
$edx-blue-t3: rgba($edx-blue,0.75);
$edx-pink: rgb(182,37,104);
$edx-pink-l1: tint($edx-pink,20%);
$edx-pink-l2: tint($edx-pink,40%);
$edx-pink-l3: tint($edx-pink,60%);
$edx-pink-l4: tint($edx-pink,80%);
$edx-pink-l5: tint($edx-pink,90%);
$edx-pink-d1: shade($edx-pink,20%);
$edx-pink-d2: shade($edx-pink,40%);
$edx-pink-d3: shade($edx-pink,60%);
$edx-pink-d4: shade($edx-pink,80%);
$edx-pink-d5: shade($edx-pink,90%);
$edx-pink-s1: saturate($edx-pink,15%);
$edx-pink-s2: saturate($edx-pink,30%);
$edx-pink-s3: saturate($edx-pink,45%);
$edx-pink-u1: desaturate($edx-pink,15%);
$edx-pink-u2: desaturate($edx-pink,30%);
$edx-pink-u3: desaturate($edx-pink,45%);
$edx-pink-t0: rgba($edx-pink,0.125);
$edx-pink-t1: rgba($edx-pink,0.25);
$edx-pink-t2: rgba($edx-pink,0.50);
$edx-pink-t3: rgba($edx-pink,0.75);
$edx-gray: rgb(164, 165, 168);
$edx-gray-l1: tint($edx-gray,20%);
......@@ -74,19 +38,10 @@ $edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75);
$edx-lms-header: rgb(100, 100, 100);
$edx-lms-copy: rgb(60, 60, 60);
$edx-lms-action-primary: rgb(29, 157, 217);
$edx-lms-action-secondary: rgb(135, 135, 135);
// --------------------
// variables: overrides
// --------------------
// colors
$white-t: rgb(255,255,255);
$black-t: rgb(0,0,0);
// fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
......@@ -100,74 +55,26 @@ $gutter: $baseline-v;
$f-title: $f-sans-serif;
$f-copy: $f-sans-serif;
$f-action: $f-sans-serif;
$f-base-color: $edx-gray;
// application - colors
$color-primary: $edx-lms-action-primary;
$color-secondary: $edx-lms-action-secondary;
$color-tertiary: $gray-l1;
$color-quarternary: $gray-l2;
// application - colors: decorative
$color-decorative-primary: $gray-d3;
// application - colors: states
$color-disabled: $edx-gray-l4;
$color-focused: $edx-gray;
// application - colors: copy and headings
$heading-color: $edx-lms-header;
$copy-color: $edx-lms-copy;
// application - colors:states
$selected-bg: $edx-blue-t1;
$selected-color: $edx-blue;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
$action-primary-color-focus: saturate($color-primary,25%);
$action-primary-color-active: $color-primary;
$action-primary-color-visited: shade($color-primary,20%);
$action-secondary-color: $color-secondary;
$action-secondary-color-focus: shade($color-secondary,25%);
$action-secondary-color-active: $color-secondary;
$action-secondary-color-visited: shade($color-secondary,20%);
$action-tertiary-color: tint($color-teritary,10%);
$action-tertiary-color-focus: shade($color-teritary,25%);
$action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: view-based elements
$bg-view: transparent;
$bg-header-main: $white-t;
$color-header-main: $black;
$bg-content: $white-t;
$color-content: $gray-d1;
$bg-content-main: $gray-l5;
$color-content-main: $gray-d1;
// application - colors: states
$selected-color: $black-t;
// application - colors: staff UI
$color-decorative-staff: $edx-pink;
// --------------------
// mixins:
// --------------------
// --------------------
// extends:
// --------------------
%hd-problem {
@extend %hd-3;
@extend %t-titlecase;
margin-bottom: $baseline-v;
color: $heading-secondary-color;
color: $heading-color;
}
openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -26,40 +26,6 @@
}
}
// links - meta
%link-meta {
@include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
border-bottom: 1px solid transparent;
color: $action-secondary-color;
text-decoration: none;
&:hover, &:focus {
color: $action-secondary-color-focus;
border-color: $action-secondary-color-focus;
}
&:active, &.is--current {
color: $action-secondary-color-active;
border-color: $action-secondary-color-active;
}
}
// links - page nav
%link-nav-page {
@include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
display: block;
border-right: 1px solid solid $gray-l5;
padding: ($baseline-v/2) ($baseline-h/4);
color: $gray-l3;
font-family: $f-action;
text-decoration: none;
&:hover, &:active {
border-left-color: $action-secondary-color-focus;
color: $action-secondary-color-focus;
}
}
// --------------------
// buttons
// --------------------
......@@ -117,14 +83,14 @@
border-image: none;
}
// buttons - primary (assuming dark bg/light copy)
// buttons - primary
%btn--primary {
@extend %btn-pill;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%);
border: 1px solid $action-primary-color;
color: $copy-inverse-color;
.copy {
@extend %t-strong;
......@@ -133,7 +99,6 @@
&:hover, &:active, &:focus {
background: $action-primary-color-focus;
border-color: $action-primary-color-focus;
color: tint($action-primary-color, 99%);
}
&.current, &.active {
......@@ -146,33 +111,36 @@
}
&.disabled, &.is--disabled, &[disabled] {
opacity: 0.4;
color: $action-primary-color-disabled;
border-color: $action-primary-color-disabled;
background: $action-primary-color-disabled-back;
}
}
// buttons - secondary (assuming dark bg/light copy)
// buttons - secondary
%btn--secondary {
@extend %btn-pill;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%);
background: $white;
border: 1px solid $uxpl-primary-dark;
color: $uxpl-primary-dark;
.copy {
@extend %t-strong;
}
&:hover, &:active, &:focus {
background: $action-secondary-color-focus;
border-color: $action-secondary-color-focus;
color: tint($action-secondary-color, 99%);
background: $action-primary-color;
border-color: $action-primary-color;
color: $copy-inverse-color;
}
&.current, &.active {
background: $action-secondary-color-active;
border-color: $action-secondary-color-active;
background: $white;
border-color: $uxpl-primary-dark;
color: $uxpl-primary-dark;
&:hover, &:active, &:focus {
......@@ -180,40 +148,8 @@
}
&.disabled, &.is--disabled, &[disabled] {
opacity: 0.4;
}
}
// buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary {
@extend %btn-edged;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color;
border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-strong;
}
&:hover, &:active, &:focus {
background: $action-tertiary-color-focus;
border-color: $action-tertiary-color-focus;
color: tint($action-tertiary-color, 99%);
}
&.current, &.active {
background: $action-tertiary-color-active;
border-color: $action-tertiary-color-active;
&:hover, &:active, &:focus {
}
}
&.disabled, &.is-disabled, &[disabled] {
opacity: 0.5;
background: $white;
border-color: $action-primary-color-disabled;
color: $action-primary-color-disabled;
}
}
openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -28,7 +28,7 @@
@include placeholder {
@extend %t-regular;
color: $copy-secondary-color;
color: $copy-color;
}
// STATE: focus
......@@ -58,7 +58,7 @@
.tip {
display: block;
@extend %copy-4;
color: $copy-secondary-color;
color: $copy-color;
}
}
......@@ -102,7 +102,7 @@
@extend %copy-3;
@extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style
color: $copy-secondary-color;
color: $copy-color;
}
.option__input {
......
openassessment/xblock/static/sass/xb/elements/_system-feedback.scss
......@@ -24,7 +24,7 @@
.message__content {
@extend %copy-3;
color: $copy-secondary-color;
color: $copy-color;
p {
margin-bottom: ($baseline-v/2);
......@@ -42,50 +42,40 @@
// TYPE: error
.message--error {
background: tint($color-error, 95%);
background: $color-error-back;
.message__title {
color: $color-error;
color: $copy-color;
border-bottom-color: $color-error;
}
}
// TYPE: warning
.message--warning {
background: tint($color-warning, 95%);
background: $color-warning-back;
.message__title {
color: $color-warning;
color: $copy-color;
border-bottom-color: $color-warning;
}
}
// TYPE: confirmation
.message--confirmation {
background: tint($color-confirm, 95%);
.message__title {
color: $color-confirm;
border-bottom-color: $color-confirm;
}
}
// TYPE: complete
.message--complete {
background: tint($color-complete, 95%);
background: $color-complete-back;
.message__title {
color: $color-complete;
color: $copy-color;
border-bottom-color: $color-complete;
}
}
// TYPE: incomplete
.message--incomplete {
background: tint($color-incomplete, 95%);
background: $color-incomplete-back;
.message__title {
color: $color-incomplete;
color: $copy-color;
border-bottom-color: $color-incomplete;
}
}
......@@ -114,30 +104,26 @@
margin-bottom: 0;
border: none;
padding-bottom: 0;
color: $white-t;
color: $copy-inverse-color;
}
&.message--error {
background: tint($color-error, 15%);
background: $color-error;
.message__content {
color: tint($color-error, 90%);
color: $copy-inverse-color;
}
}
&.message--warning {
background: tint($color-warning, 15%);
background: $color-warning;
.message__content {
color: tint($color-warning, 90%);
color: $uxpl-gray-dark;
}
}
&.message--confirm {
background: tint($color-warning, 15%);
.message__content {
color: tint($color-confirm, 90%);
.message__title {
color: $uxpl-gray-dark;
}
}
}
......@@ -162,7 +148,7 @@
.icon, .copy {
display: block;
color: $copy-secondary-color;
color: $copy-color;
}
.icon {
......
openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -39,57 +39,26 @@ $gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
$gray-d5: shade($gray,90%);
$gray-d6: shade($gray,95%);
$gray-d7: shade($gray,99%);
$gray-t0: rgba($gray,0.125);
$gray-t1: rgba($gray,0.25);
$gray-t2: rgba($gray,0.50);
$gray-t3: rgba($gray,0.75);
// blacks
$black: $gray-d6; // system black
$black-t: $gray-d7;
$black-t0: rgba($black,0.125);
$black-t1: rgba($black,0.25);
$black-t2: rgba($black,0.50);
$black: $gray-d6;
$black-t: rgb(0,0,0);
$black-t3: rgba($black,0.75);
// whites
$white: $gray-l6; // system white
$white-t: $gray-l7;
$white-t0: rgba($white,0.125);
$white-t1: rgba($white,0.25);
$white-t2: rgba($white,0.50);
$white-t3: rgba($white,0.75);
$white: rgb(255, 255, 255);
// shadows
$shadow: rgba($black,0.2);
$shadow-l1: rgba($black,0.1);
$shadow-l2: rgba($black,0.05);
$shadow-d1: rgba($black,0.4);
$shadow-d2: rgba($black,0.6);
// blue
$blue: rgb(128, 169, 204);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%);
$blue-l3: tint($blue,60%);
$blue-l4: tint($blue,80%);
$blue-l5: tint($blue,90%);
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d3: shade($blue,60%);
$blue-d4: shade($blue,80%);
$blue-d5: shade($blue,90%);
$blue-s1: saturate($blue,15%);
$blue-s2: saturate($blue,30%);
$blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
$blue-t0: rgba($blue,0.125);
$blue-t1: rgba($blue,0.25);
$blue-t2: rgba($blue,0.50);
$blue-t3: rgba($blue,0.75);
// --------------------
// fonts
......@@ -114,6 +83,21 @@ $tmg-f3: 0.125s;
// animation-based settings
$anim-distance-offviewport: ($baseline-h*100); // for larger/page-level animations
//---------------------
// UXPL colors
//---------------------
$uxpl-gray-base: rgb(65, 65, 65);
$uxpl-gray-dark: rgb(17, 17, 17);
$uxpl-gray-back: rgb(217, 217, 217);
$uxpl-gray-x-back: rgb(245, 245, 245);
$uxpl-primary-base: rgb(0, 117, 180);
$uxpl-primary-dark: rgb(6, 86, 131);
$uxpl-success-text: rgb(0, 129, 0);
$uxpl-success-back: rgb(236, 250, 236);
$uxpl-warning-accent: rgb(255, 192, 31) ;
$uxpl-warning-back: rgb(255, 249, 235);
$uxpl-error-text: rgb(178, 6, 16);
$uxpl-error-back: rgb(254, 236, 237);
// --------------------
// application - fonts
......@@ -121,7 +105,7 @@ $anim-distance-offviewport: ($baseline-h*100); // for large
$f-title: $f-sans-serif;
$f-copy: $f-serif;
$f-action: $f-sans-serif;
$f-base-color: $gray-l2;
$f-base-color: $uxpl-gray-base;
// type sizes
$f-size-xsmall: 10;
......@@ -131,19 +115,14 @@ $f-size-medium: 16;
$f-size-large: 18;
$f-size-xlarge: 22;
// --------------------
// application - colors
// --------------------
// application - colors: basic
$color-primary: $blue;
$color-secondary: $blue-u1;
$color-teritary: $blue-u2;
// application - colors: decorative
$color-decorative-primary: $blue-u2;
$color-decorative-secondary: tint($color-decorative-primary, 30%);
$color-decorative-tertiary: tint($color-decorative-primary, 60%);
$color-decorative-tertiary: $uxpl-gray-back;
$color-decorative-quaternary: tint($color-decorative-primary, 90%);
$color-decorative-quinternary: tint($color-decorative-primary, 98%);
......@@ -153,31 +132,19 @@ $color-unfocused: $gray-l2;
$color-focused: $blue-u2;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
$action-primary-color-focus: saturate($color-primary,25%);
$action-primary-color-active: $color-primary;
$action-primary-color-visited: shade($color-primary,20%);
$action-secondary-color: $color-secondary;
$action-secondary-color-focus: saturate($color-secondary,25%);
$action-secondary-color-active: $color-secondary;
$action-secondary-color-visited: shade($color-secondary,20%);
$action-tertiary-color: tint($color-teritary,10%);
$action-tertiary-color-focus: saturate($color-teritary,25%);
$action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
$action-primary-color: $uxpl-primary-base;
$action-primary-color-focus: $uxpl-primary-dark;
$action-primary-color-active: $uxpl-primary-base;
$action-primary-color-disabled: rgb(180,179,179);
$action-primary-color-disabled-back: $uxpl-gray-x-back;
// application - colors: copy and headings
$heading-color: shade($f-base-color, 50%);
$heading-primary-color: shade($f-base-color, 66%);
$heading-secondary-color: tint($f-base-color, 33%);
$heading-color: $f-base-color;
$copy-color: $f-base-color;
$copy-secondary-color: tint($copy-color, 25%);
$copy-inverse-color: $white;
// application - colors: states
$selected-bg: $blue-t1;
$selected-color: $blue-s1;
$selected-color: $black-t;
// application - colors: view-based elements
$bg-view: $gray-l7;
......@@ -187,17 +154,24 @@ $bg-message: $black;
// --------------------
// // application - colors: states
// --------------------
$color-error: rgb(188, 85, 71);
$color-warning: rgb(229, 166, 53);
$color-complete: rgb(98, 194, 74);
$color-error: $uxpl-error-text;
$color-error-back: $uxpl-error-back;
$color-warning: $uxpl-warning-accent;
$color-warning-back: $uxpl-warning-back;
$color-complete: $uxpl-success-text;
$color-complete-back: $uxpl-success-back;
$color-incomplete: $color-warning;
$color-confirm: $heading-primary-color;
$color-unavailable: tint($copy-color, 85%);
$color-incomplete-back: $color-warning-back;
$color-confirm: $heading-color;
$color-unavailable: $uxpl-gray-back;
// --------------------
// // application - colors: staff UI
// --------------------
$color-decorative-staff: $color-decorative-primary;
$copy-staff-color: $gray-l3;
$heading-staff-color: $white;
$staff-bg: $gray-d1;
test/acceptance/accessibility.py
......@@ -24,16 +24,11 @@ class OpenAssessmentA11yTest(OpenAssessmentTest):
page.a11y_audit.config.set_scope(
exclude=[
"#footer-edx-v3", # Links to Facebook, Twitter, etc. Populated in production, but not here.
".instructor-info-action", # Staff Debug Info link (general for all XBlocks).
".instructor-info-action", # Staff Debug Info link (general for all XBlocks)
".is--disabled", # TODO: TNL-5183
],
)
page.a11y_audit.config.set_rules({
"ignore": [
"color-contrast", # TODO: TNL-5104
]
})
class SelfAssessmentA11yTest(OpenAssessmentA11yTest):
"""
......@@ -295,7 +290,6 @@ class FileUploadA11yTest(OpenAssessmentA11yTest):
super(FileUploadA11yTest, self)._configure_a11y_audit_config(page)
page.a11y_audit.config.set_rules({
"ignore": [
"color-contrast", # TODO: TNL-5104
"list", # TODO: TNL-5900
]
})
......
test/acceptance/pages.py
......@@ -38,6 +38,7 @@ class BaseAssessmentPage(PageObject):
loc=self._problem_location
)
class MultipleAssessmentPage(BaseAssessmentPage):
"""
Page object for subsection unit containing multiple ORA problems
......@@ -63,7 +64,9 @@ class OpenAssessmentPage(BaseAssessmentPage):
The default implementation just returns the selector
"""
return "{vertical_index_class} {selector}".format(vertical_index_class=self.vertical_index_class, selector=selector)
return "{vertical_index_class} {selector}".format(
vertical_index_class=self.vertical_index_class, selector=selector
)
@property
def vertical_index_class(self):
......@@ -215,12 +218,35 @@ class AssessmentMixin(object):
>>> page.assess([0, 2, 1])
"""
for criterion_num, option_num in enumerate(options_selected):
def selector(criterion_num, option_num):
sel = ".rubric_{criterion_num}_{option_num}".format(
criterion_num=criterion_num,
option_num=option_num
)
self.q(css=self._bounded_selector(sel)).first.click()
return sel
def select_criterion():
for criterion_num, option_num in enumerate(options_selected):
sel = selector(criterion_num, option_num)
self.q(css=self._bounded_selector(sel)).first.click()
def criterion_selected():
for criterion_num, option_num in enumerate(options_selected):
sel = selector(criterion_num, option_num)
if not self.q(css=self._bounded_selector(sel))[0].is_selected():
return False
return True
# When selecting the criteria for the 2nd training assessment, sometimes
# radio buttons are not selected after the click, causing the test to fail (because the
# Submit button never becomes enabled). Since tests that use training assessments tend
# to be very long (meaning there is a high cost to retrying the whole test),
# retry just selecting the criterion a few times before failing the whole test.
attempts = 0
while not criterion_selected() and attempts < 5:
select_criterion()
attempts+=1
self.submit_assessment()
return self
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment