Update to new styling

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

@@ -1,45 +1,50 @@
 .course-outline {
   color: $lms-gray;
 
-  ol {
-    margin: 0 $baseline;
-    list-style: none;
+  .block-tree {
+    margin: 0;
+    list-style-type: none;
 
-    > ol {
-      @include margin-left($baseline / 2);
-    }
+    .section {
+      margin: 0 (-1 * $baseline);
+      width: calc(100% + (2 * $baseline));
+      padding: 0 ($baseline * 2);
 
-    div.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;
-      margin-bottom: $baseline * 0.5;
-    }
+      &:not(:first-child) {
+        border-top: 1px solid $lms-border-color;
 
-    ol.outline-item {
-      @include margin-left($baseline);
-      padding-bottom: ($baseline / 2);
+        .section-name {
+          margin-top: $baseline;
+        }
+      }
 
-      li {
+      .section-name {
+        @include margin(0, 0, ($baseline / 2), ($baseline / 2));
+        padding: 0;
+        font-weight: bold;
+      }
 
-        a {
-          padding: ($baseline / 4) ($baseline * 1.5);
-          display: block;
+      .outline-item {
+        @include padding-left(0);
+      }
 
-          &:hover {
-            background-color: $lms-background-color;
-            text-decoration: none;
+      ol.outline-item {
+        margin: 0 0 ($baseline / 2) 0;
+
+        .subsection {
+          list-style-type: none;
+
+          a.outline-item {
+            display: block;
+            padding: ($baseline / 2);
+
+            &:hover {
+              background-color: palette(primary, x-back);
+              text-decoration: none;
+            }
           }
         }
       }
     }
-
-    .icon {
-      margin: 0 ($baseline * 0.75);
-      position: relative;
-      top: -2px;
-      font-size: 12px;
-    }
   }
-
 }

lms/static/sass/shared-v2/_layouts.scss

@@ -46,16 +46,6 @@
                     display: inline-block;
                 }
 
-                .form-actions > * {
-                    @include margin-left($baseline/2);
-                    vertical-align: middle;
-                    height: 34px;
-                }
-
-                .form-actions > button {
-                    height: 34px;
-                }
-
                 .form-actions > *:first-child {
                     @include margin-left(0);
                 }

lms/templates/courseware/course_outline.html

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

lms/templates/courseware/unified-course-view.html

@@ -46,7 +46,7 @@ ${HTML(outline_fragment.foot_html())}
         </div>
         <div class="page-header-secondary">
             <div class="form-actions">
-                <a class="btn btn-small" href="${reverse('courseware', kwargs={'course_id': unicode(course.id.to_deprecated_string())})}">
+                <a class="btn" href="${reverse('courseware', kwargs={'course_id': unicode(course.id.to_deprecated_string())})}">
                     ${_("Resume Course")}
                 </a>
             </div>