styling for unit location module on container page

cms/static/sass/elements/_modules.scss

@@ -12,8 +12,8 @@
   .bar-mod-title {
     @extend %t-title6;
     display: block;
-    background-color: $gray-l4;
     padding: ($baseline/2) ($baseline*.75);
+    background-color: $gray-l4;
     font-weight: 600;
   }
 
@@ -267,12 +267,39 @@
 // outline: utilities
 $outline-indent-width: $baseline;
 
+// UI: general outline
+.outline-content {
+  margin-top: 5px;
+
+  .unit-content {
+    margin-top: 0;
+  }
+
+  // add/new items
+  .add-item {
+    margin-top: ($baseline*0.75);
+
+    .button-new {
+      @extend %ui-btn-flat-outline;
+      padding: ($baseline/2) $baseline;
+      display: block;
+
+      .icon {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: ($baseline/2);
+      }
+    }
+  }
+}
+
+
 // UI: section
 %outline-section {
   @include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s, padding-left $tmg-f2 linear 0s);
   border-left: 1px solid $color-draft;
   margin-bottom: $baseline;
-  padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline + 4);
+  padding: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
 
   // STATE: is-collapsed
   &.is-collapsed {
@@ -314,7 +341,7 @@ $outline-indent-width: $baseline;
   border-left: ($baseline/4) solid $color-draft;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  padding: ($baseline*0.75);
+  padding: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
 
   // CASE: is ready to be live
   &.is-ready {

cms/static/sass/views/_container.scss

@@ -240,6 +240,29 @@
 
       .wrapper-unit-tree-location {
         // tree location-specific styles should go here
+
+        .outline-section{
+          box-shadow: none;
+          border: 0;
+          padding: 0;
+        }
+
+        .outline-subsection {
+          border-left: 1px solid $gray-l4;
+          padding: ($baseline/2);
+
+          .subsection-header {
+            margin-bottom: ($baseline/2);
+          }
+        }
+
+        .item-title a {
+            color: $color-heading-base;
+
+          &:hover {
+            color: $blue;
+          }
+        }
       }
     }
   }

cms/static/sass/views/_outline.scss

@@ -180,6 +180,10 @@
   // --------------------
   .outline {
 
+    .outline-content {
+      margin-top: 0;
+    }
+
     // add/new items
     .add-item {
       margin-top: ($baseline*0.75);
@@ -261,6 +265,7 @@
   // outline: sections
   // --------------------
   .outline-section {
+    padding: ($baseline*0.75) $baseline ($baseline*0.75) ($baseline + 4);
 
     // header
     .section-header {
@@ -344,6 +349,7 @@
   }
 
   .outline-subsection {
+    padding: ($baseline*0.75);
 
     // header
     .subsection-header {

cms/templates/container.html

@@ -136,14 +136,14 @@ templates = ["basic-modal", "modal-button", "edit-xblock-modal",
                     <div class="unit-location is-hidden">
                         <h4 class="bar-mod-title">${_("Unit Location")}</h4>
                         <div class="wrapper-unit-id bar-mod-content">
-                            <h5 class="title">Unit Location ID</h5>
+                            <h5 class="title">${_("Location ID")}</h5>
                             <p class="unit-id">
                                 <span class="unit-id-value" id="unit-location-id-input">${unit.location.name}</span>
                                 <span class="tip"><span class="sr">Tip: </span>${_("Use this ID to link to this unit from other places in your course")}</span>
                             </p>
                         </div>
                         <div class="wrapper-unit-tree-location bar-mod-content">
-                            <h5 class="title">Unit Tree Location</h5>
+                            <h5 class="title">${_("Location in Course Outline")}</h5>
                             <div class="wrapper-unit-overview">
                             </div>
                         </div>

cms/templates/js/unit-outline.underscore

@@ -3,7 +3,7 @@
         data-parent="<%= parentInfo.get('id') %>" data-locator="<%= xblockInfo.get('id') %>">
         <div class="<%= xblockType %>-header">
             <h3 class="<%= xblockType %>-header-details">
-                <span class="unit-title item-title">
+                <span class="<%= xblockType %>-title item-title">
                     <a href="<%= xblockInfo.get('studio_url') %>"><%= xblockInfo.get('display_name') %></a>
                 </span>
             </h3>