Added some styles for the top navigation and for the sidebar navigation

lms/envs/common.py

@@ -304,7 +304,7 @@ PIPELINE_CSS = {
         'output_filename': 'css/lms-application.css',
     },
     'course': {
-      'source_filenames': ['sass/course.scss', 'js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', 'css/vendor/jquery.qtip.min.css'],
+      'source_filenames': ['js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', 'css/vendor/jquery.qtip.min.css', 'sass/course.scss'],
       'output_filename': 'css/lms-course.css',
       },
     'ie-fixes': {

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

@@ -5,3 +5,11 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-family: $sans-serif;
 }
+
+table {
+  table-layout: fixed;
+}
+
+.container {
+  padding: lh(2);
+}

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

@@ -84,7 +84,8 @@ h1.top-header {
 }
 
 .sidebar {
-  border-right: 1px solid #d3d3d3;
+  border-right: 1px solid #C8C8C8;
+  @include box-shadow(inset -1px 0 0 #e6e6e6);
   @include box-sizing(border-box);
   display: table-cell;
   font-family: $sans-serif;
@@ -181,7 +182,6 @@ h1.top-header {
 
 .topbar {
   @extend .clearfix;
-  background: $cream;
   border-bottom: 1px solid darken($cream, 10%);
   border-top: 1px solid #fff;
   font-size: 12px;

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

@@ -3,22 +3,6 @@ html {
   max-height: 100%;
 }
 
-body.courseware {
-  height: 100%;
-  max-height: 100%;
-
-  .container {
-    padding-bottom: 40px;
-    margin-top: 20px;
-  }
-
-  footer {
-    &.fixed-bottom {
-      Position: static;
-    }
-  }
-}
-
 div.course-wrapper {
   @extend .table-wrapper;
 

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

@@ -13,44 +13,50 @@ section.course-index {
   div#accordion {
 
     h3 {
-      @include box-shadow(inset 0 1px 0 0 #eee);
-      border-top: 1px solid #d3d3d3;
-      overflow: hidden;
+      @include border-radius(0);
+      border-top: 1px solid #e3e3e3;
       margin: 0;
+      overflow: hidden;
 
       &:first-child {
         border: none;
       }
 
       &:hover {
-        @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
+        background: #eee;
       }
 
       &.ui-accordion-header {
         color: #000;
 
         a {
-          font-size: $body-font-size;
+          @include border-radius(0);
+          @include box-shadow(none);
           color: lighten($text-color, 10%);
+          font-size: $body-font-size;
         }
 
         &.ui-state-active {
-          @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
           @extend .active;
-          border-bottom: 1px solid #d3d3d3;
+          border-bottom: none;
+
+          &:hover {
+            background: none;
+          }
         }
       }
     }
 
     ul.ui-accordion-content {
       @include border-radius(0);
-      @include box-shadow(inset -1px 0 0 #e6e6e6);
+      background: #FFF;
       border: none;
       font-size: 12px;
       margin: 0;
       padding: 1em 1.5em;
 
       li {
+        @include border-radius(0);
         margin-bottom: lh(.5);
 
         a {
@@ -120,8 +126,6 @@ section.course-index {
           font-weight: bold;
 
           > a {
-            background: rgb(240,240,240);
-            @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
             border-color: rgb(200,200,200);
 
             &:after {

lms/static/sass/course/layout/_courseware_subnav.scss

 nav.course-material {
-  background: rgb(210,210,210);
   @include clearfix;
   @include box-sizing(border-box);
-  @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.05));
-  border-bottom: 1px solid rgb(190,190,190);
+  background: #f6f6f6;
+  border-bottom: 1px solid rgb(200,200,200);
   margin: 0px auto 0px;
   padding: 0px;
   width: 100%;
@@ -24,12 +23,14 @@ nav.course-material {
       list-style: none;
 
       a {
-        color: $lighter-base-font-color;
+        color: darken($lighter-base-font-color, 20%);
         display: block;
         text-align: center;
-        padding: 5px 13px;
+        padding: 8px 13px 12px;
+        font-size: 14px;
+        font-weight: 400;
         text-decoration: none;
-        text-shadow: 0 1px rgba(255,255,255, 0.4);
+        text-shadow: 0 1px rgb(255,255,255);
 
         &:hover {
           color: $base-font-color;
@@ -41,7 +42,7 @@ nav.course-material {
           border-bottom: 0px;
           @include border-top-radius(4px);
           @include box-shadow(0 2px 0 0 rgba(255,255,255, 1));
-          color: $base-font-color;
+          color: $blue;
         }
       }
     }

lms/templates/courseware.html

@@ -35,7 +35,6 @@
   <div class="course-wrapper">
     <section aria-label="Course Navigation" class="course-index">
       <header id="open_close_accordion">
-        <h2>Courseware Index</h2>
         <a href="#">close</a>
       </header>