Verification: adds in progress styling support based on body classes

lms/static/sass/views/_verification.scss

@@ -125,7 +125,7 @@
   }
 
   .expandable-area {
-    @include transition(opacity 0.25s ease-in-out 0s);
+    @include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
   }
 
   // STATE: active
@@ -145,8 +145,10 @@
     }
 
     .expandable-area {
-      display: none;
+      visibility: none;
+      height: 0;
       opacity: 0.0;
+      overflow: scroll;
     }
   }
 
@@ -159,7 +161,8 @@
     }
 
     .expandable-area {
-      display: block;
+      visibility: visible;
+      height: ($baseline*10.5);
       opacity: 1.0;
     }
   }
@@ -1264,6 +1267,24 @@
   // VIEW: requirements
   &.step-requirements {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is current
+      &#progress-step0 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 0%;
@@ -1396,6 +1417,37 @@
   // VIEW: take cam photo
   &.step-photos-cam {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step1 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 20%;
@@ -1405,6 +1457,37 @@
   // VIEW: take id photo
   &.step-photos-id {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0, &#progress-step1 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step2 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 40%;
@@ -1449,6 +1532,37 @@
       }
     }
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0, &#progress-step1, &#progress-step2 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step3 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 60%;
@@ -1458,6 +1572,37 @@
   // VIEW: take and review photos
   &.step-confirmation {
 
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step0, &#progress-step1, &#progress-step2, &#progress-step3, &#progress-step4 {
+        border-bottom: ($baseline/5) solid $m-green-l2;
+
+        .wrapper-step-number {
+          border-color: $m-green-l2;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step5 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
     // progress indicator
     .progress-sts-value {
       width: 100%;