Skip to content

E
edx-ora2
Commit c4b1659c by Brian Talbot
Options

styling general frame UI revisions, prompt, and response

parent 5d1416e3
Showing with 269 additions and 134 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
<div class="openassessment" id="openassessment"> <div class="openassessment" id="openassessment">
<div class="wrapper--grid"> <div class="wrapper--grid">
<h1 class="openassessment__title"> <h1 class="openassessment__title">
<span class="openassessment__title--super">
{{ title }}
</span>
<span class="openassessment__title--sub"> <span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span> <span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
{% for assessment in rubric_assessments %} {% for assessment in rubric_assessments %}
...@@ -21,10 +25,6 @@ ...@@ -21,10 +25,6 @@
<span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.name }}</span> <span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.name }}</span>
{% endfor %} {% endfor %}
</span> </span>
<span class="openassessment__title--super">
{{ title }}
</span>
</h1> </h1>
<!--?: may have trouble with aync --> <!--?: may have trouble with aync -->
......
apps/openassessment/templates/openassessmentblock/oa_peer_assessment.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
{% endblock %} {% endblock %}
<span class="system__element" id="peer_submission_uuid"> <span class="system__element" id="peer_submission_uuid">
{{ peer_submission.uuid }} {{ peer_submission.uuid }}
......
apps/openassessment/templates/openassessmentblock/oa_response.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<!-- CASE: default/unanswered --> <!-- CASE: default/unanswered -->
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
{% endblock %} {% endblock %}
{% block header %} {% block header %}
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<ol class="list list--fields"> <ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label> <label for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder=""></textarea> <textarea class="text" id="submission__answer__value" placeholder=""></textarea>
</li> </li>
</ol> </ol>
...@@ -64,7 +64,10 @@ ...@@ -64,7 +64,10 @@
<div class="step__actions"> <div class="step__actions">
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a> <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li> </li>
</ul> </ul>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/oa_self_assessment.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--expanded">
{% endblock %} {% endblock %}
{% block header %} {% block header %}
......
apps/openassessment/templates/openassessmentblock/t-response.html
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<!-- CASE: default/unanswered --> <!-- CASE: default/unanswered -->
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> <span class="step__counter"></span>
......
apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -77,3 +77,5 @@ ...@@ -77,3 +77,5 @@
@extend %copy-foxtrot; @extend %copy-foxtrot;
} }
} }
// temp
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -4,10 +4,18 @@ ...@@ -4,10 +4,18 @@
// NOTES: // NOTES:
// * The basic view and all of its states of the openassessment xblock // * The basic view and all of its states of the openassessment xblock
// --------------------
// in-view extends
// --------------------
%oa--ui--window {
box-shadow: 0 1px 1px $shadow-l1;
border: ($baseline-v/10) solid $color-decorative-tertiary;
border-radius: ($baseline-v/10);
}
.wrapper--openassessment { .wrapper--openassessment {
position: relative; position: relative;
background: $bg-view;
} }
.openassessment { .openassessment {
...@@ -22,7 +30,7 @@ ...@@ -22,7 +30,7 @@
@include row(); @include row();
margin-bottom: $spacing-bravo; margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary; border-bottom: ($baseline-v/5) solid $color-decorative-tertiary;
padding-bottom: $spacing-bravo; padding-bottom: $spacing-charlie;
} }
.openassessment__title--super { .openassessment__title--super {
...@@ -47,8 +55,9 @@ ...@@ -47,8 +55,9 @@
} }
.openassessment__title--sub { .openassessment__title--sub {
@extend %hd-hotel; @extend %hd-golf;
display: block; display: block;
color: $heading-tertiary-color;
@include media($bp-m) { @include media($bp-m) {
} }
...@@ -78,20 +87,19 @@ ...@@ -78,20 +87,19 @@
padding-bottom: $spacing-bravo; padding-bottom: $spacing-bravo;
&:last-child { &:last-child {
padding-bottom: 0;
border-bottom: none; border-bottom: none;
padding-bottom: 0;
} }
// step header // step header
.step__header { .step__header {
@extend %trans-opacity;
@include row(); @include row();
opacity: 1.0;
// STATE: hover // STATE: hover
&:hover { &:hover {
.step__deadline, .step__label {
color: $heading-secondary-color;
}
} }
} }
...@@ -128,11 +136,14 @@ ...@@ -128,11 +136,14 @@
// increment: show numbers using parent list counter // increment: show numbers using parent list counter
&:before { &:before {
@extend %hd-charlie; @extend %hd-foxtrot;
@extend %t-weight3; @extend %t-weight4;
content: counter(item, decimal); content: counter(item, decimal);
counter-increment: item; counter-increment: item;
margin-right: $spacing-charlie; margin-right: $spacing-delta;
border-radius: ($baseline-v/10);
border: 1px solid $heading-color;
padding: $spacing-delta $spacing-charlie;
} }
} }
...@@ -142,12 +153,14 @@ ...@@ -142,12 +153,14 @@
.step__label { .step__label {
@extend %hd-delta; @extend %hd-delta;
@extend %t-weight3;
@extend %trans-color; @extend %trans-color;
} }
.step__deadline { .step__deadline {
@extend %hd-hotel; @extend %hd-hotel;
@extend %trans-color; @extend %trans-color;
color: $heading-secondary-color;
} }
} }
...@@ -156,10 +169,10 @@ ...@@ -156,10 +169,10 @@
.step__status { .step__status {
.step__status__value { .step__status__value {
border-radius: ($baseline-v/10); border-radius: ($baseline-v/5);
padding: ($baseline-v/4) ($baseline-h/4); padding: ($baseline-v/4) ($baseline-h/4);
background: $color-disabled; background: $color-disabled;
color: $white; color: $white-t;
@include media($bp-m) { @include media($bp-m) {
display: block; display: block;
...@@ -220,53 +233,82 @@ ...@@ -220,53 +233,82 @@
@extend %text-sr; @extend %text-sr;
} }
// STATE: step is collapsed (not focused on) // step instructions
&.is--collapsed { .step__instruction {
@extend %copy-delta;
margin-bottom: $spacing-bravo;
color: $copy-color;
}
.step__label { // step content
color: $heading-tertiary-color; .step__content {
} margin-bottom: $spacing-bravo;
}
.step__counter:before { // step actions
color: $color-disabled; .step__actions {
text-align: right;
.action--submit {
@extend %btn--primary;
@extend %action-delta;
} }
}
.step__status__value { // STATE: step is collapsed (not focused on)
background: $color-disabled; &.is--collapsed {
.step__header {
opacity: 0.4;
// STATE: hover
&:hover {
opacity: 1.0;
}
} }
} }
// STATE: step is expanded (focused) // STATE: step is expanded (focused)
&.is--expanded { &.is--expanded {
border-bottom-color: $color-focused;
.step__header { .step__header {
margin-bottom: $spacing-charlie; margin-bottom: $spacing-charlie;
border-bottom: ($baseline-v/10) solid $color-focused; opacity: 1.0;
padding-bottom: $spacing-charlie;
// STATE: hover @include media($bp-ds) {
&:hover { border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
}
.step__deadline, .step__label { @include media($bp-dm) {
color: $color-focused; border-bottom: ($baseline-v/20) solid $color-focused;
} padding-bottom: $spacing-charlie;
} }
@include media($bp-m) { @include media($bp-dl) {
padding-bottom: 0; border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
}
@include media($bp-dx) {
border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
} }
} }
.step__counter:before, .step__title .step__deadline { .step__counter:before, .step__label .step__deadline {
color: $color-focused; color: $color-focused;
} }
.step__counter:before {
border-right-color: $color-focused;
}
.step__status__value { .step__status__value {
background: $color-focused; background: $color-focused;
.copy { .copy {
color: $white; color: $white-t;
} }
} }
} }
...@@ -274,25 +316,11 @@ ...@@ -274,25 +316,11 @@
// STATE: step is incomplete // STATE: step is incomplete
&.is--incomplete { &.is--incomplete {
.step__counter:before {
color: $color-incomplete;
}
.step__status__value {
background: $color-incomplete;
}
} }
// STATE: step is complete // STATE: step is complete
&.is--complete { &.is--complete {
.step__counter:before {
color: $color-complete;
}
.step__status__value {
background: $color-complete;
}
} }
} }
...@@ -330,9 +358,7 @@ ...@@ -330,9 +358,7 @@
} }
.openassessment__prompt { .openassessment__prompt {
margin-bottom: $spacing-bravo; margin-bottom: $spacing-alpha;
border-bottom: ($baseline-v/10) solid $gray-l6;
padding-bottom: $spacing-bravo;
} }
.openassessment__prompt__title { .openassessment__prompt__title {
...@@ -340,7 +366,8 @@ ...@@ -340,7 +366,8 @@
} }
.openassessment__prompt__copy { .openassessment__prompt__copy {
@extend %copy-charlie; @extend %copy-bravo;
color: $copy-lead-color;
> * { > * {
margin-bottom: $spacing-bravo; margin-bottom: $spacing-bravo;
...@@ -362,6 +389,41 @@ ...@@ -362,6 +389,41 @@
// -------------------- // --------------------
.step--response { .step--response {
// response form
.response__submission {
padding: $spacing-charlie $spacing-charlie $spacing-bravo $spacing-charlie;
background: $color-decorative-tertiary;
.action--submit, .tip {
display: inline-block;
vertical-align: middle;
}
.action--submit {
@extend %btn--secondary;
@extend %action-delta;
margin-right: $spacing-charlie;
}
.tip {
@extend %copy-epsilon;
color: $copy-supplemental-color;
}
.submission__answer {
margin-bottom: $spacing-charlie;
label {
@extend %text-sr;
}
textarea {
width: 100%;
min-height: ($baseline-v*10);
}
}
}
} }
...@@ -386,9 +448,8 @@ ...@@ -386,9 +448,8 @@
// -------------------- // --------------------
.openassessment__grade { .openassessment__grade {
@include row(); @include row();
border-top: ($baseline-v/10) solid $color-decorative-secondary; border-top: ($baseline-v/5) solid $color-decorative-tertiary;
padding: $spacing-bravo; padding-top: $spacing-bravo;
background: $color-decorative-tertiary;
.openassessment__grade__title, .openassessment__grade__content { .openassessment__grade__title, .openassessment__grade__content {
display: inline-block; display: inline-block;
...@@ -397,23 +458,8 @@ ...@@ -397,23 +458,8 @@
.openassessment__grade__title { .openassessment__grade__title {
@extend %hd-delta; @extend %hd-delta;
margin-right: $spacing-bravo;
color: $heading-tertiary-color; color: $heading-tertiary-color;
@include media($bp-ds) {
margin-bottom: $spacing-bravo;
}
@include media($bp-dm) {
margin-right: $spacing-bravo;
}
@include media($bp-dl) {
margin-right: $spacing-bravo;
}
@include media($bp-dx) {
margin-right: $spacing-bravo;
}
} }
.openassessment__grade__content { .openassessment__grade__content {
...@@ -435,12 +481,10 @@ ...@@ -435,12 +481,10 @@
// CASE: is incomplete // CASE: is incomplete
&.is--incomplete { &.is--incomplete {
border-top-color: $color-incomplete;
} }
// CASE: is complete // CASE: is complete
&.is--complete { &.is--complete {
border-top-color: $color-complete;
} }
} }
......
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
...@@ -74,6 +74,12 @@ $edx-gray-t1: rgba($edx-gray,0.25); ...@@ -74,6 +74,12 @@ $edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50); $edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75); $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 // variables: overrides
// -------------------- // --------------------
...@@ -93,41 +99,62 @@ $f-copy: $f-sans-serif; ...@@ -93,41 +99,62 @@ $f-copy: $f-sans-serif;
$f-action: $f-sans-serif; $f-action: $f-sans-serif;
// application - colors // application - colors
$color-primary: $edx-blue-d1; $color-primary: $edx-lms-action-primary;
$color-secondary: $edx-blue-l1; $color-secondary: $edx-lms-action-secondary;
$color-tertiary: $gray-l1; $color-tertiary: $gray-l1;
$color-quarternary: $gray-l2; $color-quarternary: $gray-l2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $edx-blue-u2; $color-decorative-primary: $gray-d3;
$color-decorative-secondary: $gray-l4; $color-decorative-secondary: $gray-l3;
$color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $gray-l4;
$color-focused: $edx-lms-header;
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $gray-d3; $heading-color: $edx-lms-header;
$heading-primary-color: $black; $heading-primary-color: shade($edx-lms-header, 33%);
$heading-secondary-color: $gray-l1; $heading-secondary-color: tint($edx-lms-header, 33%);
$heading-tertiary-color: $gray-l3; $heading-tertiary-color: tint($edx-lms-header, 66%);
$copy-color: $gray-l1; $copy-color: $edx-lms-copy;
$copy-color-alt: $gray-d1; $copy-color-alt: tint($edx-lms-copy, 33%);
$copy-color-focus: $gray-d4; $copy-color-focus: shade($edx-lms-copy, 33%);
$copy-lead-color: $gray; $copy-lead-color: $edx-lms-copy;
$copy-lead-color: $gray-d1; $copy-lead-color-focus: shade($edx-lms-copy, 33%);
$copy-lead-color-focus: $gray-d4;
$copy-supplemental-color: $gray-l2; $copy-supplemental-color: tint($edx-lms-copy, 33%);
$copy-supplemental-color-alt: $gray-l2; $copy-supplemental-color-alt: tint($edx-lms-copy, 66%);
$copy-supplemental-color-focus: $gray-d1; $copy-supplemental-color-focus: $edx-lms-copy;
// application - colors:states // application - colors:states
$selected-bg: $edx-blue-t1; $selected-bg: $edx-blue-t1;
$selected-color: $edx-blue-s1; $selected-color: $edx-blue-s1;
// 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 // application - colors: view-based elements
$bg-view: $gray-l6; $bg-view: transparent;
$bg-header-main: $white; $bg-header-main: $white-t;
$color-header-main: $black; $color-header-main: $black;
$bg-content: $gray-l6; $bg-content: $gray-l6;
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -79,11 +79,17 @@ ...@@ -79,11 +79,17 @@
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
// CASE: icons in buttons
.copy, .ico {
display: inline-block;
vertical-align: middle;
}
} }
%btn-pill { %btn-pill {
@extend %btn; @extend %btn;
border-radius: $baseline-v/5; border-radius: ($baseline-v/5);
} }
%btn-rounded { %btn-rounded {
...@@ -97,20 +103,23 @@ ...@@ -97,20 +103,23 @@
} }
// buttons - primary // buttons - primary (assuming dark bg/light copy)
%btn--primary { %btn--primary {
@extend %btn-edged; @extend %btn-pill;
@extend %t-weight3; @extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color; background: $action-primary-color;
border-color: saturate($action-primary-color, 15%); border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%); color: tint($action-primary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-primary-color-focus; background: $action-primary-color-focus;
border-color: $action-primary-color-focus; border-color: $action-primary-color-focus;
color: tint($action-primary-color, 95%); color: tint($action-primary-color, 99%);
} }
&.current, &.active { &.current, &.active {
...@@ -128,20 +137,23 @@ ...@@ -128,20 +137,23 @@
} }
// buttons - secondary // buttons - secondary (assuming dark bg/light copy)
%btn--secondary { %btn--secondary {
@extend %btn-edged; @extend %btn-pill;
@extend %t-weight3; @extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color; background: $action-secondary-color;
border-color: saturate($action-secondary-color, 15%); border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%); color: tint($action-secondary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-secondary-color-focus; background: $action-secondary-color-focus;
border-color: $action-secondary-color-focus; border-color: $action-secondary-color-focus;
color: tint($action-secondary-color, 95%); color: tint($action-secondary-color, 99%);
} }
&.current, &.active { &.current, &.active {
...@@ -159,20 +171,23 @@ ...@@ -159,20 +171,23 @@
} }
// buttons - tertiary // buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary { %btn--tertiary {
@extend %btn-edged; @extend %btn-edged;
@extend %t-weight3; @extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color; background: $action-tertiary-color;
border-color: saturate($action-tertiary-color, 15%); border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%); color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-tertiary-color-focus; background: $action-tertiary-color-focus;
border-color: $action-tertiary-color-focus; border-color: $action-tertiary-color-focus;
color: tint($action-tertiary-color, 95%); color: tint($action-tertiary-color, 99%);
} }
&.current, &.active { &.current, &.active {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -4,3 +4,28 @@ ...@@ -4,3 +4,28 @@
// NOTES: // NOTES:
// * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks // * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks
// contains all form elements inside of the main xblock wrapper
.wrapper--xblock {
// forms - general
input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
border: 1px solid $color-decorative-secondary;
padding: $spacing-charlie;
font-family: $f-copy;
outline: 0;
@include placeholder {
color: $copy-supplemental-color;
}
&:focus {
box-shadow: 0 0 6px 0 rgba(29,157,217,0.4),inset 0 0 4px 0 rgba(0,0,0,0.15);
border-color: $selected-color;
outline: 0;
}
}
}
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
...@@ -67,7 +67,6 @@ ...@@ -67,7 +67,6 @@
@include font-size(24); @include font-size(24);
@include lh(24); @include lh(24);
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color;
} }
%hd-bravo { %hd-bravo {
...@@ -75,7 +74,6 @@ ...@@ -75,7 +74,6 @@
@include font-size(21); @include font-size(21);
@include lh(21); @include lh(21);
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color;
} }
%hd-charlie { %hd-charlie {
...@@ -84,7 +82,6 @@ ...@@ -84,7 +82,6 @@
@include font-size(18); @include font-size(18);
@include lh(18); @include lh(18);
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color;
} }
%hd-delta { %hd-delta {
...@@ -92,7 +89,6 @@ ...@@ -92,7 +89,6 @@
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color;
} }
%hd-epsilon { %hd-epsilon {
...@@ -101,7 +97,6 @@ ...@@ -101,7 +97,6 @@
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
font-family: $f-title; font-family: $f-title;
color: $heading-secondary-color;
} }
%hd-foxtrot { %hd-foxtrot {
...@@ -109,7 +104,6 @@ ...@@ -109,7 +104,6 @@
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
font-family: $f-title; font-family: $f-title;
color: $heading-secondary-color;
} }
%hd-golf { %hd-golf {
...@@ -118,7 +112,6 @@ ...@@ -118,7 +112,6 @@
@include font-size(13); @include font-size(13);
@include lh(13); @include lh(13);
font-family: $f-title; font-family: $f-title;
color: $heading-tertiary-color;
} }
%hd-hotel { %hd-hotel {
...@@ -126,7 +119,6 @@ ...@@ -126,7 +119,6 @@
@include font-size(13); @include font-size(13);
@include lh(13); @include lh(13);
font-family: $f-title; font-family: $f-title;
color: $heading-tertiary-color;
} }
%hd-india { %hd-india {
...@@ -135,7 +127,6 @@ ...@@ -135,7 +127,6 @@
@include font-size(11); @include font-size(11);
@include lh(11); @include lh(11);
font-family: $f-title; font-family: $f-title;
color: $heading-tertiary-color;
} }
...@@ -147,13 +138,11 @@ ...@@ -147,13 +138,11 @@
@include font-size(24); @include font-size(24);
@include lh(24); @include lh(24);
font-family: $f-copy; font-family: $f-copy;
color: $copy-color;
} }
%copy-bravo { %copy-bravo {
@include font-size(18); @include font-size(18);
@include lh(18); @include lh(18);
color: $copy-color;
font-family: $f-copy; font-family: $f-copy;
} }
...@@ -162,34 +151,59 @@ ...@@ -162,34 +151,59 @@
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
font-family: $f-copy; font-family: $f-copy;
color: $copy-color;
} }
%copy-delta { %copy-delta {
@include font-size(14); @include font-size(14);
@include lh(14); @include lh(14);
font-family: $f-copy; font-family: $f-copy;
color: $copy-color;
} }
%copy-epsilon { %copy-epsilon {
@include font-size(12); @include font-size(13);
@include lh(12); @include lh(12);
font-family: $f-copy; font-family: $f-copy;
color: $copy-supplemental-color;
} }
%copy-foxtrot { %copy-foxtrot {
@include font-size(11); @include font-size(12);
@include lh(11); @include lh(12);
font-family: $f-copy; font-family: $f-copy;
color: $copy-supplemental-color;
} }
// -------------------- // --------------------
// canned actions // canned actions
// -------------------- // --------------------
%action-alpha {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-bravo {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-charlie {
@include font-size(16);
@include lh(16);
font-family: $f-action;
}
%action-delta {
@include font-size(14);
@include lh(14);
font-family: $f-action;
}
%action-epsilon {
@include font-size(12);
@include lh(12);
font-family: $f-action;
}
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
...@@ -136,6 +136,10 @@ ...@@ -136,6 +136,10 @@
@include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out); @include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out);
} }
%trans-opacity {
@include transition(opacity $tmg-f1 ease-in-out);
}
%trans-color { %trans-color {
@include transition(color $tmg-f1 ease-in-out); @include transition(color $tmg-f1 ease-in-out);
} }
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -135,14 +135,15 @@ $f-action: $f-sans-serif; ...@@ -135,14 +135,15 @@ $f-action: $f-sans-serif;
// application - colors // application - colors
// -------------------- // --------------------
// application - colors: basic // application - colors: basic
$color-primary: $blue-s2; $color-primary: $blue;
$color-secondary: $blue; $color-secondary: $blue-u1;
$color-teritary: $blue-u2; $color-teritary: $blue-u2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $blue-u2; $color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-l4; $color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6; $color-decorative-tertiary: $gray-l6;
$color-decorative-quaternary: $gray-l7;
// application - colors: states // application - colors: states
$color-disabled: $gray-l4; $color-disabled: $gray-l4;
......
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