Start to refactor courseware scss

lms/static/sass/base/_mixins.scss

@@ -1,3 +1,14 @@
+// Line-height
+@function lh($amount: 1) {
+  @return $body-line-height * $amount;
+}
+
+@mixin hide-text(){
+  text-indent: -9999px;
+  overflow: hidden;
+  display: block;
+}
+
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;

lms/static/sass/base/_variables.scss

@@ -16,3 +16,17 @@ $pink: rgb(182,37,104);
 $yellow: rgb(255, 252, 221);
 $error-red: rgb(253, 87, 87);
 
+// old variables
+$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$body-font-size: 14px;
+$body-line-height: golden-ratio($body-font-size, 1);
+
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
+
+$light-gray: #ddd;
+$dark-gray: #333;
+$mit-red: #993333;
+$cream: #F6EFD4;
+$text-color: $dark-gray;
+$border-color: $light-gray;

lms/static/sass/course.scss

@@ -12,16 +12,13 @@
 @import 'course/courseware_subnav';
 
 // Courseware styles
-@import 'course/old/base/variables';
 @import 'course/old/base/extends';
-@import 'course/old/base/functions';
 
 @import 'module/module-styles.scss';
 
 @import 'course/old/courseware/courseware';
 @import 'course/old/courseware/sidebar';
 @import 'course/old/courseware/amplifier';
-// @import 'course/old/courseware/problems';
 
 @import "course/old/info";
 

lms/static/sass/course/old/application.scss

@@ -1,7 +1,6 @@
 @import "bourbon/bourbon";
 
 // Base layout
-@import "base/reset", "base/font-face";
 @import "base/variables", "base/functions", "base/extends", "base/base";
 @import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
 @import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";

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

@@ -1,11 +1,3 @@
-.clearfix:after {
-  clear: both;
-  content: ".";
-  display: block;
-  height: 0;
-  visibility: hidden;
-}
-
 .wrapper {
   margin: 0 auto;
   max-width: $fg-max-width;
@@ -17,10 +9,6 @@
     display: table;
     width: flex-grid(12);
     overflow: hidden;
-
-    @media screen and (min-width: 1400px) {
-      @include border-radius(4px);
-    }
   }
 }
 
@@ -29,6 +17,7 @@ h1.top-header {
   border-bottom: 1px solid #e3e3e3;
   margin: (-(lh())) (-(lh())) lh();
   padding: lh();
+  text-align: left;
 }
 
 .button {
@@ -82,7 +71,6 @@ h1.top-header {
 }
 
 .content {
-  @include box-shadow(inset 0 0 2px 3px #f3f3f3);
   @include box-sizing(border-box);
   display: table-cell;
   padding: lh();
@@ -96,15 +84,11 @@ h1.top-header {
 }
 
 .sidebar {
-  background: #e3e3e3;
-  @include border-radius(4px 0 0 4px);
   border-right: 1px solid #d3d3d3;
-  @include box-shadow( inset 0 0 0 1px #f6f6f6);
   @include box-sizing(border-box);
   display: table-cell;
-  font-family: $body-font-family;
+  font-family: $sans-serif;
   position: relative;
-  text-shadow: 0 1px 0 #f1f1f1;
   vertical-align: top;
   width: flex-grid(3);
 
@@ -113,6 +97,7 @@ h1.top-header {
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
+   font-family: $sans-serif;
   }
 
   a {
@@ -122,7 +107,6 @@ h1.top-header {
 
   .bottom-border {
     border-bottom: 1px solid #d3d3d3;
-    @include box-shadow(0 1px 0 #eee);
   }
 
   @media print {
@@ -151,10 +135,7 @@ h1.top-header {
     }
 
     &.active {
-      background: none;
-      @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
       border-bottom: 1px solid #d3d3d3;
-      @include box-shadow(inset 0 1px 0 0 #eee);
       color: #000;
       font-weight: bold;
 
@@ -203,9 +184,7 @@ h1.top-header {
   background: $cream;
   border-bottom: 1px solid darken($cream, 10%);
   border-top: 1px solid #fff;
-  // @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
   font-size: 12px;
-  // height:46px;
   line-height: 46px;
   text-shadow: 0 1px 0 #fff;
 

lms/static/sass/course/old/base/_functions.scss

@@ -1,10 +0,0 @@
-// Line-height
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
-}
-
-@mixin hide-text(){
-  text-indent: -9999px;
-  overflow: hidden;
-  display: block;
-}

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

@@ -8,7 +8,7 @@ body.courseware {
   max-height: 100%;
 
   .container {
-    margin-bottom: 40px;
+    padding-bottom: 40px;
     margin-top: 20px;
   }
 

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

@@ -45,7 +45,6 @@ section.course-index {
     ul.ui-accordion-content {
       @include border-radius(0);
       @include box-shadow(inset -1px 0 0 #e6e6e6);
-      background: #dadada;
       border: none;
       font-size: 12px;
       margin: 0;
@@ -66,6 +65,7 @@ section.course-index {
 
           p {
             font-weight: bold;
+            font-family: $sans-serif;
             margin-bottom: 0;
 
             span.subtitle {