started courseware sidebar styling

lms/static/sass/course/_info.scss

@@ -75,7 +75,7 @@ div.info-wrapper {
 
     h1 {
       margin-bottom: 0;
-      padding: 20px 26px;
+      padding: 32px 26px 20px 26px;
       font-size: 18px;
       font-style: normal;
       font-weight: bold;
@@ -83,8 +83,7 @@ div.info-wrapper {
 
     ol {
       li {
-        padding: 0 26px;
-        margin-bottom: 14px;
+        margin: 0 26px 14px 26px;
 
         a {
           display: block;
@@ -97,11 +96,25 @@ div.info-wrapper {
 
         &.expandable,
         &.collapsable {
+          margin: 0 16px 14px 16px;
+          @include transition(all .2s);
+
           h4 {
             color: $blue;
             font-size: 1em;
             font-weight: normal;
-            padding: lh(.25) 0 lh(.25) lh(1.5);
+            padding-left: 30px;
+          }
+        }
+
+        &.collapsable {
+          background: #fff;
+          border-radius: 3px;
+          padding: 14px 0;
+          @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25));
+
+          h4 {
+            margin-bottom: 16px;
           }
         }
 
@@ -123,10 +136,10 @@ div.info-wrapper {
 
           li {
             border-bottom: 0;
-            border-top: 1px solid $border-color;
-            @include box-shadow(inset 0 1px 0 #eee);
-            font-size: 1em;
-            padding: lh(.5) 0 lh(.5) lh(.5);
+            border-top: 1px solid #e6e6e6;
+            font-size: 0.9em;
+            margin: 0;
+            padding: 15px 30px;
 
             a {
               @include inline-block;
@@ -144,7 +157,7 @@ div.info-wrapper {
           display: block;
           height: 100%;
           margin-left: 0;
-          max-height: 30px;
+          max-height: 20px;
           position: absolute;
           width: 100%;
 
@@ -159,20 +172,20 @@ div.info-wrapper {
           }
 
           &.expandable-hitarea {
-            background-position: -72px 7px;
+            background-position: -72px 0px;
           }
 
           &.collapsable-hitarea {
-            background-position: -55px -15px;
+            background-position: -55px -23px;
           }
         }
 
         h3 {
           border-bottom: 0;
           @include box-shadow(none);
-          color: #aaa;
+          color: #888;
           font-size: 1em;
-          margin-bottom: em(6);          
+          margin-bottom: 0;
         }
 
         p {

lms/static/sass/course/base/_base.scss

@@ -31,8 +31,9 @@ a {
     width: 100%;
     box-sizing: border-box;
     border-radius: 3px;
+    border: 1px solid #ccc;
     background: #fff;
-    @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .08), 0 1px 10px rgba(0, 0, 0, 0.1));
+    @include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
   }
 }
 

lms/static/sass/course/base/_extends.scss

@@ -28,7 +28,7 @@ h1.top-header {
 .content {
   @include box-sizing(border-box);
   display: table-cell;
-  padding: 2.5em;
+  padding: 2em 2.5em;
   vertical-align: top;
   width: flex-grid(9) + flex-gutter();
 

lms/static/sass/course/courseware/_sidebar.scss

 section.course-index {
   @extend .sidebar;
   @extend .tran;
+  @include border-radius(3px 0 0 3px);
+  border-right: 1px solid #ddd;
+
+  #open_close_accordion {
+    display: none;
+  }
 
   header {
     max-height: 47px;
@@ -11,10 +17,11 @@ section.course-index {
   }
 
   div#accordion {
+    width: auto;
+    font-size: 14px;
+
     h3 {
       @include border-radius(0);
-      border-top: 1px solid lighten($border-color, 10%);
-      font-size: em(16, 18);
       margin: 0;
       overflow: hidden;
 
@@ -24,7 +31,6 @@ section.course-index {
 
       &:hover {
         color: #666;
-        background: #f6f6f6;
       }
 
       &.ui-state-hover {
@@ -40,6 +46,7 @@ section.course-index {
         a {
           @include border-radius(0);
           @include box-shadow(none);
+          padding-left: 19px;
         }
 
         &.ui-state-active {
@@ -52,28 +59,42 @@ section.course-index {
         }
 
         span.ui-icon {
+          left: 0;
           background-image: url("/static/images/ui-icons_222222_256x240.png");
           opacity: .3;
         }
       }
     }
 
+    .chapter {
+      padding: 11px 14px;
+      @include linear-gradient(top, #f9f9f9, #eee);
+      box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset;
+
+      &:first-child {
+        border-radius: 3px 0 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 0 3px;
+      }
+    }
+
     ul.ui-accordion-content {
       background: transparent;
       border: none;
       @include border-radius(0);
-      font-size: em(14, 18);
       margin: 0;
-      padding: 1em 1.5em;
+      padding: 9px 0 9px 9px;
 
       li {
         border-bottom: 0;
         @include border-radius(0);
         margin-bottom: lh(.5);
+        line-height: 1.4;
 
         a {
           background: transparent;
-          border: 1px solid transparent;
           @include border-radius(4px);
           display: block;
           padding: 5px 36px 5px 10px;
@@ -92,26 +113,7 @@ section.course-index {
             }
           }
 
-          &:after {
-            background: transparent;
-            border-right: 1px solid rgb(180,180,180);
-            border-top: 1px solid rgb(180,180,180);
-            content: "";
-            display: block;
-            height: 12px;
-            margin-top: -6px;
-            opacity: 0;
-            position: absolute;
-            right: 30px;
-            top: 50%;
-            @include transform(rotate(45deg));
-            width: 12px;
-          }
-
           &:hover {
-            @include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4)));
-            border-color: rgb(200,200,200);
-
             &:after {
               opacity: 1;
               right: 15px;
@@ -134,10 +136,12 @@ section.course-index {
         }
 
         &.active {
-          font-weight: bold;
+          font-weight: bold;          
 
           > a {
-            border-color: rgb(200,200,200);
+            border: none;
+            @include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset);
+            @include linear-gradient(top, #ddd, #bbb);
 
             &:after {
               opacity: 1;

lms/templates/accordion.html

 <%! from django.core.urlresolvers import reverse %>
 
 <%def name="make_chapter(chapter)">
-  <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
-  </h3>
+  <div class="chapter">
+    <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
+    </h3>
 
-  <ul>
-    % for section in chapter['sections']:
-        <li${' class="active"' if 'active' in section and section['active'] else ''}>
-          <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
-            <p>${section['display_name']}
-            <span class="subtitle">
-              ${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
-            </span>
-            </p>
-          </a>
-        </li>
-    % endfor
-  </ul>
+    <ul>
+      % for section in chapter['sections']:
+          <li${' class="active"' if 'active' in section and section['active'] else ''}>
+            <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
+              <p>${section['display_name']}
+              <span class="subtitle">
+                ${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
+              </span>
+              </p>
+            </a>
+          </li>
+      % endfor
+    </ul>
+  </div>
 </%def>
 
 % for chapter in toc: