Skip to content

E
edx-ora2
Commit 8378745a by Brian Talbot
Options

Merge pull request #105 from edx/talbs/ui-transitions 

WIP: UI Transitions
parents 8db01ff1 90982173
Showing with 331 additions and 270 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
......@@ -43,7 +43,26 @@
<ol class="openassessment__steps" id="openassessment__steps">
{% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
<li id="{{ assessment.class_id }}" class="openassessment__steps__step is--loading">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{{ assessment.title }}</span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-cog icon-spin"></i>
<span class="copy">Loading</span>
</span>
</span>
</span>
</header>
</li>
{% endfor %}
</ol>
</div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -29,90 +29,97 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p>
</div>
<div class="wrapper--step__content">
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p>
</div>
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">Assessment #
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">Assessment #
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header>
<div class="peer-assessment__display__response">
{{ peer_submission.answer|linebreaks }}
<div class="peer-assessment__display__response">
{{ peer_submission.answer|linebreaks }}
</div>
</div>
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label"
>{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="label">points</span></span>
</div>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">Please provide additional feedback for this response.</span>
</label>
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
{% for criterion in rubric_criteria %}
<li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility is--collapsed" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<div class="peer-assessment__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</form>
</article>
</li>
</ul>
<div class="ui-toggle-visibility__content">
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label"
>{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="label">points</span></span>
</div>
</li>
{% endfor %}
</ol>
</div>
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback ui-toggle-visibility" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">Please provide additional feedback for this response.</span>
</label>
<div class="ui-toggle-visibility__content">
<textarea class="question__answers" id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div>
</li>
</ol>
</fieldset>
<div class="peer-assessment__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</form>
</article>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed">
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--collapsed">
{% endblock %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--collapsed">
{% endblock %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -26,39 +26,41 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__instruction">
<p>Please provide your response to the following question. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">After you submit your response, you cannot edit it</strong>.</p>
</div>
<div class="wrapper--step__content">
<div class="step__instruction">
<p>Please provide your response to the following question. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">After you submit your response, you cannot edit it</strong>.</p>
</div>
<div class="step__content">
<!-- @talbs: This is some more ugly placeholder stuff that you can replace -->
<div id="response__save_status">{{ save_status }}</div>
<form id="response__submission" class="response__submission">
<ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the question.</label>
<textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea>
</li>
</ol>
<div class="step__content">
<!-- @talbs: This is some more ugly placeholder stuff that you can replace -->
<div id="response__save_status">{{ save_status }}</div>
<form id="response__submission" class="response__submission">
<ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the question.</label>
<textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea>
</li>
</ol>
<ul class="list list--actions response__submission__actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save">Save Your Progress</button>
<span class="tip">You may continue to work on your response until you submit it.</span>
</li>
</ul>
</form>
</div>
<ul class="list list--actions response__submission__actions">
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save">Save Your Progress</button>
<span class="tip">You may continue to work on your response until you submit it.</span>
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response and move to the next step</span>
<i class="ico icon-caret-right"></i>
</a>
</li>
</ul>
</form>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response and move to the next step</span>
<i class="ico icon-caret-right"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -15,8 +15,10 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p>
<div class="wrapper--step__content">
<div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -16,85 +16,88 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
{{ student_submission.answer|linebreaks }}
</div>
</article>
<div class="submission__answer__display__content">
{{ student_submission.answer|linebreaks }}
</div>
</article>
<article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Assessments of Your Response</h3>
<article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Assessments of Your Response</h3>
<ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="question__title__copy">{{ criterion.name }}</span>
<ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.name }}</span>
<span class="question__score">
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">{{ criterion.median_score }}</span>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">
{{ criterion.total_value }}
<span class="unit">Points</span>
</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Peer Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<span class="answer__content">
{{ part.option.explanation }}
<span class="question__score">
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">{{ criterion.median_score }}</span>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">
{{ criterion.total_value }}
<span class="unit">Points</span>
</span>
</li>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li>
{% endwith %}
{% endfor %}
</ol>
</article>
</span>
</h4>
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Provide Feedback on Peer Assessments</h3>
<ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Peer Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide feedback on the score and comments you received from your peers.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the score and comments I received were..."></textarea>
<span class="answer__content">
{{ part.option.explanation }}
</span>
</li>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li>
</ol>
{% endwith %}
{% endfor %}
</ol>
</article>
<ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback on Peer Assessments</button>
</li>
</ul>
</form>
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Provide Feedback on Peer Assessments</h3>
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide feedback on the score and comments you received from your peers.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the score and comments I received were..."></textarea>
</li>
</ol>
<ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback on Peer Assessments</button>
</li>
</ul>
</form>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -16,14 +16,16 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
{{ student_submission.answer|linebreaks }}
</div>
</article>
<div class="submission__answer__display__content">
{{ student_submission.answer|linebreaks }}
</div>
</article>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %}
<span class="system__element" id="self_submission_uuid">
{{ self_submission.uuid }}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed">
{% endblock %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed is--complete">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed is--complete">
{% endblock %}
{% block title %}
......
apps/openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/js/src/design.js deleted 100644 → 0
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e) {
e.preventDefault();
window.open($(e.target).attr('href'));
}
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
}
// --------------------
jQuery(document).ready(function($) {
// collapse/expand UI
$('.ui-toggle-visibility ui-toggle-visibility__control').bind('click', toggleExpansion);
// general link management - new window/tab
$('a[data-rel="external"]').bind('click', $linkNewWindow);
});
apps/openassessment/xblock/static/js/src/design.min.js deleted 100644 → 0
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e){e.preventDefault();window.open($(e.target).attr("href"))}function $toggleExpansion(e){e.preventDefault();$(e.target).closest(".ui-toggle-visibility").toggleClass("is--collapsed")}jQuery(document).ready(function(e){e(".ui-toggle-visibility ui-toggle-visibility__control").bind("click",toggleExpansion);e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file
apps/openassessment/xblock/static/js/src/oa_base.js
......@@ -262,6 +262,12 @@ OpenAssessment.BaseUI.prototype = {
}
};
/* collapse/expand UI functionality */
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
}
/* XBlock JavaScript entry point for OpenAssessmentXBlock. */
function OpenAssessmentBlock(runtime, element) {
/**
......@@ -271,5 +277,8 @@ function OpenAssessmentBlock(runtime, element) {
var server = new OpenAssessment.Server(runtime, element);
var ui = new OpenAssessment.BaseUI(runtime, element, server);
ui.load();
/* TODO: refactor this event based on workflow and logic steps */
$(document).on('click', '.ui-toggle-visibility .ui-toggle-visibility__control', $toggleExpansion);
});
}
apps/openassessment/xblock/static/sass/oa/elements/_navigation.scss
......@@ -3,3 +3,64 @@
// NOTES:
// * openassessment-specific navigation UI
// --------------------
// collapse/expand
// --------------------
.ui-toggle-visibility {
// control to toggle
.ui-toggle-visibility__control {
@extend %fake-link;
color: $action-primary-color;
text-decoration: none;
// optional icon
.ico, .ui-toggle-visibility__control__copy {
display: inline-block;
vertical-align: middle;
}
.ico {
@include transition(all $tmg-f2 ease-in-out 0s);
margin-right: ($baseline-h/8);
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f1 ease-in 0, max-height $tmg-f2 ease-in 0);
@extend %trans-opacity;
max-height: ($baseline-v*2000);
overflow: auto;
opacity: 1.0;
padding-left: ($baseline-h/20);
padding-right: ($baseline-h/20);
}
// STATE: is collapsed
&.is--collapsed {
.ui-toggle-visibility__control .ico {
@include transform(rotate(-90deg));
@include transform-origin(50% 50%);
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f2 ease-in 0, max-height $tmg-f1 ease-in 0);
@extend %trans-opacity;
max-height: 0;
overflow: hidden;
opacity: 0.0;
}
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -42,13 +42,12 @@
// rubric question
%ui-rubric-question {
@include clearfix();
margin-bottom: $baseline-v;
margin-bottom: ($baseline-v/2);
@extend %wipe-last-child;
.question__title {
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4);
padding-bottom: ($baseline-v/2);
.ico {
display: inline-block;
......@@ -60,12 +59,13 @@
.question__title__copy {
@extend %hd-4;
@extend %t-weight3;
color: $heading-primary-color;
}
}
// rubric answers
%ui-rubric-answers {
margin-top: $baseline-v;
margin-bottom: $baseline-v;
.answer {
@include row();
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -54,29 +54,8 @@
.step__header {
@extend %trans-opacity;
@include row();
margin-bottom: $baseline-v;
opacity: 1.0;
@include media($bp-ds) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dm) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dl) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dx) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
.step__deadline {
color: $color-focused;
}
......@@ -146,13 +125,13 @@
.step__status {
.step__status__value {
display: block;
border-radius: ($baseline-v/5);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-focused;
color: $white-t;
@include media($bp-m) {
display: block;
margin-top: ($baseline-v/2);
}
}
......@@ -212,11 +191,9 @@
@extend %text-sr;
}
// STATE: default/visible/expanded
.step__instruction, .step__content, .step__actions {
display: block;
visibility: visible;
opacity: 1.0;
// step content wrapper
.wrapper--step__content {
margin-top: $baseline-v;
}
// step instructions
......@@ -257,6 +234,34 @@
}
}
// STATE: step is loading
&.is--loading {
opacity: 0.3;
.step__header {
@include media($bp-ds) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dm) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dl) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dx) {
border-bottom: none;
padding-bottom: 0;
}
}
}
// STATE: step is collapsed (not focused on)
&.is--collapsed {
......@@ -302,21 +307,6 @@
.step__counter:before {
border: 1px solid rgba($heading-color, 0.5);
}
.step__instruction, .step__content, .step__actions {
@extend %trans-opacity;
display: none;
visibility: hidden;
opacity: 0.0;
}
}
// STATE: step is expanded (focused)
&.is--expanded {
.step__status__value {
background: $color-focused;
}
}
// STATE: step is incomplete
......@@ -883,7 +873,6 @@
@extend %hd-4;
@extend %t-weight3;
float: left;
color: $heading-secondary-color;
}
.question__score {
......
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