refactoring is--expanded and is--collapsed markup and styling

apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html

@@ -11,7 +11,7 @@
 
 <!-- CASE: default/not started -->
 {% block list_item %}
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
 {% endblock %}
     <span class="system__element" id="peer_submission_uuid">
         {{ peer_submission.uuid }}

apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html

 {%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
 <!-- CASE: started, but incomplete and problem closed -->
 {% block list_item %}
-<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
+<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html

 {%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
 <!-- CASE: completed -->
 {% 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 ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html

 {%  extends "openassessmentblock/peer/oa_peer_assessment.html" %}
 <!-- CASE: no peer responses to assess -->
 {% block list_item %}
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/response/oa_response.html

@@ -14,7 +14,7 @@
 
 <!-- CASE: default/unanswered -->
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
+<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
 {% endblock %}
 
     <header class="step__header ui-toggle-visibility__control">

apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html

 {%  extends "openassessmentblock/response/oa_response.html" %}
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
+<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/response/oa_response_collapsed.html

 {%  extends "openassessmentblock/response/oa_response.html" %}
 
 {% block list_item %}
-    <li id="openassessment__response" class="openassessment__steps__step step--response is--collapsed ui-toggle-visibility">
+    <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
 {% endblock %}
 
 {% block body %}

apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html

 {%  extends "openassessmentblock/response/oa_response.html" %}
 
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility">
+<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html

 {% extends "openassessmentblock/response/oa_response.html" %}
 
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--expanded ui-toggle-visibility">
+<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html

@@ -12,7 +12,7 @@
 
 <!-- CASE: default/not started -->
 {% block list_item %}
-<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--expanded">
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
 {% endblock %}
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">

apps/openassessment/templates/openassessmentblock/self/oa_self_assessment_collapsed.html

 {%  extends "openassessmentblock/self/oa_self_assessment.html" %}
 
 {% block list_item %}
-    <li id="openassessment__self-assessment" class="openassessment__steps__step is--collapsed step--self-assessment">
+    <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
 {% endblock %}
 
 {% block body %}

apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html

@@ -2,7 +2,7 @@
 
 <!-- CASE: not started and problem closed -->
 {% block list_item %}
-<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility is--collapsed">
+<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html

@@ -2,7 +2,7 @@
 
 <!-- CASE: complete -->
 {% 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 ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss

@@ -95,11 +95,31 @@
     .step__header {
       @extend %trans-opacity;
       @include row();
+      margin-bottom: $spacing-bravo;
       opacity: 1.0;
 
-      // STATE: hover
-      &:hover {
+      @include media($bp-ds) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      @include media($bp-dm) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      @include media($bp-dl) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
 
+      @include media($bp-dx) {
+        border-bottom: ($baseline-v/10) solid $color-focused;
+        padding-bottom: $spacing-charlie;
+      }
+
+      .step__deadline {
+        color: $color-focused;
       }
     }
 
@@ -142,8 +162,10 @@
           counter-increment: item;
           margin-right: $spacing-delta;
           border-radius: ($baseline-v/10);
-          border: 1px solid rgba($heading-color, 0.5);
+          border: 1px solid rgba($color-focused, 0.5);
           padding: $spacing-delta $spacing-charlie;
+          color: $color-focused;
+
         }
       }
 
@@ -171,7 +193,7 @@
       .step__status__value {
         border-radius: ($baseline-v/5);
         padding: ($baseline-v/4) ($baseline-h/4);
-        background: $color-secondary;
+        background: $color-focused;
         color: $white-t;
 
         @include media($bp-m) {
@@ -194,6 +216,7 @@
       .copy {
         @extend %copy-foxtrot;
         @extend %t-titlecase;
+        color: $white-t;
       }
 
       @include media($bp-m) {
@@ -234,6 +257,13 @@
     @extend %text-sr;
     }
 
+    // STATE: default/visible/expanded
+    .step__instruction, .step__content, .step__actions {
+      display: block;
+      visibility: visible;
+      opacity: 1.0;
+    }
+
     // step instructions
     .step__instruction {
       @extend %copy-delta;
@@ -261,60 +291,60 @@
 
       .step__header {
         opacity: 0.4;
-
-        // STATE: hover
-        &:hover {
-          opacity: 1.0;
-        }
-      }
-    }
-
-    // STATE: step is expanded (focused)
-    &.is--expanded {
-
-      .step__header {
-        margin-bottom: $spacing-bravo;
-        opacity: 1.0;
+        margin-bottom: 0;
 
         @include media($bp-ds) {
-          border-bottom: ($baseline-v/10) solid $color-focused;
-          padding-bottom: $spacing-charlie;
+          border-bottom: none;
+          padding-bottom: 0;
         }
 
         @include media($bp-dm) {
-          border-bottom: ($baseline-v/10) solid $color-focused;
-          padding-bottom: $spacing-charlie;
+         border-bottom: none;
+         padding-bottom: 0;
         }
 
         @include media($bp-dl) {
-          border-bottom: ($baseline-v/10) solid $color-focused;
-          padding-bottom: $spacing-charlie;
+          border-bottom: none;
+          padding-bottom: 0;
         }
 
         @include media($bp-dx) {
-          border-bottom: ($baseline-v/10) solid $color-focused;
-          padding-bottom: $spacing-charlie;
+          border-bottom: none;
+          padding-bottom: 0;
         }
 
         .step__deadline {
           color: $color-focused;
         }
+
+        // STATE: hover
+        &:hover {
+          opacity: 1.0;
+        }
       }
 
-      .step__counter:before, .step__label .step__deadline {
-        color: $color-focused;
+      .step__status__value {
+        background: $color-secondary;
       }
 
+      // step counter
       .step__counter:before {
-        border-color: rgba($color-focused, 0.5);
+        border: 1px solid rgba($heading-color, 0.5);
       }
 
-      .step__status__value {
-        background: $color-focused;
+      .step__instruction, .step__content, .step__actions {
+        @extend %trans-opacity;
+        display: none;
+        visibility: hidden;
+        opacity: 0.0;
+      }
+    }
 
-        .copy {
-          color: $white-t;
-        }
+    // STATE: step is expanded (focused)
+    &.is--expanded {
+
+      .step__status__value {
+        background: $color-focus;
       }
     }