Add visual progress checkmarks to course outline

lms/static/sass/features/_course-experience.scss

@@ -365,8 +365,6 @@
             @include margin-left(16px);
 
             list-style-type: none;
-            border: 1px solid transparent;
-            border-radius: 2px;
 
             a.outline-item {
               display: flex;
@@ -377,6 +375,22 @@
               border-top: 1px solid $border-color;
             }
 
+            a.outline-item:hover {
+              text-decoration: none;
+
+              .vertical-details {
+                text-decoration: underline;
+              }
+
+              .complete-checkmark {
+                text-decoration: none;
+              }
+            }
+
+            .vertical-details {
+              float:left;
+            }
+
             &:hover,
             &:focus {
               background-color: palette(primary, x-back);
@@ -399,11 +413,11 @@
 
 // Course outline accordion
 button.accordion-trigger, button.prerequisite-button {
-  margin: 2px;
   padding: 10px 0 10px 0;
   border: none;
   width: 100%;
   text-align: left;
+  margin: 0px;
 
   .fa {
     color: $blue;
@@ -414,6 +428,15 @@ button.accordion-trigger, button.prerequisite-button {
   display: none;
 }
 
+.fa-check.fa.complete-checkmark {
+  border: 1px solid $green;
+  margin-right: $baseline / 2;
+  border-radius: 100px;
+  color: white;
+  background-color: $green;
+  float: right;
+}
+
 // Course outline
 .course-outline {
   .block-tree {