styling

lms/static/sass/_build-lms-v2.scss

@@ -20,3 +20,6 @@
 @import 'shared-v2/help-tab';
 
 @import 'notifications';
+
+// course outline
+@import 'shared-v2/course-outline';

lms/static/sass/shared-v2/_course-outline.scss

+.course-outline {
+  color: $lms-gray;
+
+  ul {
+    margin: 0 $baseline;
+    list-style: none;
+
+    > ul {
+      @include margin-left($baseline / 2);
+    }
+
+    li.section-name {
+      @include padding($baseline * 0.75, $baseline * 0.75, $baseline * 0.75, $baseline / 4);
+      background-color: $lms-background-color;
+      border-top: 1px solid $lms-border-color;
+    }
+
+    ul.outline-item {
+      @include margin-left($baseline);
+      padding-bottom: ($baseline / 2);
+
+      li {
+
+        a {
+          padding: ($baseline / 4) ($baseline * 1.5);
+          display: block;
+
+          &:hover {
+            background-color: $lms-background-color;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+
+    .icon {
+      margin: 0 ($baseline * 0.75);
+      position: relative;
+      top: -2px;
+      font-size: 12px;
+    }
+  }
+
+}

lms/templates/courseware/course-outline.html

@@ -13,10 +13,15 @@ from django.utils.translation import ugettext as _
 <section class="course-outline" id="main">
     <ul class="block-tree" role="tree">
         % for section in blocks.get('children') or []:
-            <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">${ section['display_name'] }</li>
+            <li class="section-name outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">
+                <span class="icon fa fa-chevron-down" aria-hidden="true"></span>
+                ${ section['display_name'] }
+            </li>
             <ul class="outline-item focusable" role="group" tabindex="0">
                 % for subsection in section.get('children') or []:
-                    <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">${ subsection['display_name'] }</li>
+                    <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">
+                        <a href="#">${ subsection['display_name'] }</a>
+                    </li>
                 % endfor
             </ul>
         % endfor