Merge pull request #333 from MITx/feature/kfiedler/courseware-style

Strip down sequence nav, start to use ems for font size instead of pixels and started to strip down the info page

cms/static/sass/_base.scss

@@ -2,6 +2,7 @@ $fg-column: 70px;
 $fg-gutter: 26px;
 $fg-max-columns: 12;
 $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+$sans-serif: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 $body-font-size: 14px;
 $body-line-height: 20px;
 
@@ -12,6 +13,7 @@ $orange: #f96e5b;
 $yellow: #fff8af;
 $cream: #F6EFD4;
 $mit-red: #933;
+$border-color: #ddd;
 
 @mixin hide-text {
   background-color: transparent;

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -2,10 +2,8 @@ nav.sequence-nav {
   // TODO (cpennington): This doesn't work anymore. XModules aren't able to
   // import from external sources.
   @extend .topbar;
-
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid $border-color;
   margin: (-(lh())) (-(lh())) lh() (-(lh()));
-  background: #eee;
   position: relative;
   @include border-top-right-radius(4px);
 
@@ -14,7 +12,7 @@ nav.sequence-nav {
     display: table;
     height: 100%;
     margin: 0;
-    padding-left: 0;
+    padding-left: 3px;
     padding-right: flex-grid(1, 9);
     width: 100%;
 
@@ -23,133 +21,104 @@ nav.sequence-nav {
     }
 
     li {
-      border-left: 1px solid #eee;
       display: table-cell;
       min-width: 20px;
 
-      &:first-child {
-        border-left: none;
-      }
-
-      .inactive {
+      a {
+        background-position: center;
         background-repeat: no-repeat;
+        border: 1px solid transparent;
+        border-bottom: none;
+        @include border-radius(3px 3px 0 0);
+        cursor: pointer;
+        display: block;
+        height: 10px;
+        padding: 15px 0 14px;
+        position: relative;
+        @include transition();
+        width: 100%;
 
         &:hover {
-          background-color: #eee;
+          background-repeat: no-repeat;
+          background-position: center;
+          background-color: #F6F6F6;
         }
-      }
 
-      .visited {
-        background-color: #ddd;
-        background-repeat: no-repeat;
+        &.visited {
+          background-color: #F6F6F6;
 
-        &:hover {
-          background-position: center center;
+          &:hover {
+            background-position: center center;
+          }
         }
-      }
 
-      .active {
-        background-color: #fff;
-        background-repeat: no-repeat;
-        @include box-shadow(0 1px 0 #fff);
-
-        &:hover {
+        &.active {
+          border-color: $border-color;
+          @include box-shadow(0 2px 0 #fff);
           background-color: #fff;
-          background-position: center;
-        }
-      }
+          z-index: 9;
 
-      a {
-        background-position: center center;
-        border: none;
-        cursor: pointer;
-        display: block;
-        height: 17px;
-        padding: 15px 0 14px;
-        position: relative;
-        @include transition(all, .4s, $ease-in-out-quad);
-        width: 100%;
-
-        &.progress {
-          border-bottom-style: solid;
-          border-bottom-width: 4px;
+          &:hover {
+            background-position: center;
+            background-color: #fff;
+          }
         }
 
         &.progress-none {
-          @extend .progress;
-          border-bottom-color: red;
+          background-color: lighten(red, 50%);
         }
 
         &.progress-some {
-          @extend .progress;
-          border-bottom-color: yellow;
+          background-color: yellow;
         }
 
         &.progress-done {
-          @extend .progress;
-          border-bottom-color: green;
+          background-color: green;
         }
 
         //video
         &.seq_video {
           &.inactive {
-            @extend .inactive;
             background-image: url('../images/sequence-nav/video-icon-normal.png');
-            background-position: center;
           }
 
           &.visited {
-            @extend .visited;
             background-image: url('../images/sequence-nav/video-icon-visited.png');
-            background-position: center;
           }
 
           &.active {
             @extend .active;
             background-image: url('../images/sequence-nav/video-icon-current.png');
-            background-position: center;
           }
         }
 
         //other
         &.seq_other {
           &.inactive {
-            @extend .inactive;
             background-image: url('../images/sequence-nav/document-icon-normal.png');
-            background-position: center;
           }
 
           &.visited {
-            @extend .visited;
             background-image: url('../images/sequence-nav/document-icon-visited.png');
-            background-position: center;
           }
 
           &.active {
-            @extend .active;
             background-image: url('../images/sequence-nav/document-icon-current.png');
-            background-position: center;
           }
         }
 
         //vertical & problems
         &.seq_vertical, &.seq_problem {
           &.inactive {
-            @extend .inactive;
             background-image: url('../images/sequence-nav/list-icon-normal.png');
-            background-position: center;
           }
 
           &.visited {
-            @extend .visited;
             background-image: url('../images/sequence-nav/list-icon-visited.png');
-            background-position: center;
           }
 
           &.active {
-            @extend .active;
             background-image: url('../images/sequence-nav/list-icon-current.png');
-            background-position: center;
           }
         }
 
@@ -157,6 +126,7 @@ nav.sequence-nav {
           background: #333;
           color: #fff;
           display: none;
+          font-family: $sans-serif;
           line-height: lh();
           left: 0px;
           opacity: 0;
@@ -207,27 +177,29 @@ nav.sequence-nav {
     right: 0;
     top: 0;
     width: flex-grid(1, 9);
+    border: 1px solid $border-color;
+    border-bottom: 0;
+    @include border-radius(3px 3px 0 0);
 
     li {
       float: left;
+      margin-bottom: 0;
       width: 50%;
 
       &.prev, &.next {
 
         a {
-          // background-color: darken($cream, 5%);
-          background-position: center center;
+          background-position: center;
           background-repeat: no-repeat;
-          border-left: 1px solid darken(#f6efd4, 20%);
-          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-          @include box-sizing(border-box);
-          cursor: pointer;
           display: block;
+          height: 10px;
+          padding: 15px 0 14px;
           text-indent: -9999px;
           @include transition(all, .2s, $ease-in-out-quad);
 
           &:hover {
             opacity: .5;
+            background-color: #f4f4f4;
           }
 
           &.disabled {
@@ -240,20 +212,13 @@ nav.sequence-nav {
       &.prev {
         a {
           background-image: url('../images/sequence-nav/previous-icon.png');
-
-          &:hover {
-            // background-color: $cream;
-          }
         }
       }
 
       &.next {
         a {
+          border-left: 1px solid lighten($border-color, 10%);
           background-image: url('../images/sequence-nav/next-icon.png');
-
-          &:hover {
-            // background-color: $cream;
-          }
         }
       }
     }
@@ -274,10 +239,8 @@ nav.sequence-bottom {
 
   ul {
     @extend .clearfix;
-    background-color: #eee;
-    border: 1px solid #ddd;
+    border: 1px solid $border-color;
     @include border-radius(3px);
-    @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
     @include inline-block();
 
     li {
@@ -312,7 +275,7 @@ nav.sequence-bottom {
       &.prev {
         a {
           background-image: url('../images/sequence-nav/previous-icon.png');
-          border-right: 1px solid darken(#f6efd4, 20%);
+          border-right: 1px solid lighten($border-color, 10%);
 
           &:hover {
             background-color: none;

lms/static/sass/application.scss

@@ -2,9 +2,9 @@
 
 @import 'base/reset';
 @import 'base/font_face';
+@import 'base/mixins';
 @import 'base/variables';
 @import 'base/base';
-@import 'base/mixins';
 @import 'base/extends';
 @import 'base/animations';
 

lms/static/sass/base/_mixins.scss

+@function em($pxval, $base: 16) {
+  @return #{$pxval / $base}em;
+}
+
 // Line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;

lms/static/sass/base/_variables.scss

@@ -4,10 +4,15 @@ $gw-gutter: 20px;
 $fg-column: $gw-column;
 $fg-gutter: $gw-gutter;
 $fg-max-columns: 12;
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
 
 $sans-serif: 'Open Sans', $verdana;
+$body-font-family: $sans-serif;
 $serif: $georgia;
 
+$body-font-size: em(14);
+$body-line-height: golden-ratio(.875em, 1);
 $base-font-color: rgb(60,60,60);
 $lighter-base-font-color: rgb(160,160,160);
 
@@ -15,18 +20,11 @@ $blue: rgb(29,157,217);
 $pink: rgb(182,37,104);
 $yellow: rgb(255, 252, 221);
 $error-red: rgb(253, 87, 87);
+$border-color: #C8C8C8;
 
 // 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

@@ -2,9 +2,9 @@
 
 @import 'base/reset';
 @import 'base/font_face';
+@import 'base/mixins';
 @import 'base/variables';
 @import 'base/base';
-@import 'base/mixins';
 @import 'base/extends';
 @import 'base/animations';
 

lms/static/sass/course/_info.scss

@@ -3,6 +3,7 @@ div.info-wrapper {
 
   section.updates {
     @extend .content;
+    line-height: lh();
 
     > h1 {
       @extend .top-header;
@@ -15,30 +16,35 @@ div.info-wrapper {
     > ol {
       list-style: none;
       padding-left: 0;
+      margin-bottom: lh();
 
       > li {
         @extend .clearfix;
         border-bottom: 1px solid #e3e3e3;
-        margin-bottom: lh(.5);
+        margin-bottom: lh();
         padding-bottom: lh(.5);
         list-style-type: disk;
 
         &:first-child {
-          background: $cream;
-          border-bottom: 1px solid darken($cream, 10%);
           margin: 0 (-(lh(.5))) lh();
           padding: lh(.5);
         }
 
         ol, ul {
-          margin: lh() 0 0 lh();
-          list-style-type: circle;
+          margin: 0;
+          list-style-type: disk;
+
+          ol,ul {
+            list-style-type: circle;
+          }
         }
 
         h2 {
           float: left;
           margin: 0 flex-gutter() 0 0;
           width: flex-grid(2, 9);
+          font-size: $body-font-size;
+          font-weight: bold;
         }
 
         section.update-description {
@@ -64,16 +70,20 @@ div.info-wrapper {
     @extend .sidebar;
     border-left: 1px solid #d3d3d3;
     @include border-radius(0 4px 4px 0);
+    @include box-shadow(none);
     border-right: 0;
 
-    header {
+    h1 {
       @extend .bottom-border;
-      padding: lh(.5) lh(.75);
+      padding: lh(.5) lh(.5);
+    }
 
-      h1 {
-        font-size: 18px;
-        margin: 0 ;
-      }
+    header {
+
+      // h1 {
+      //   font-weight: 100;
+      //   font-style: italic;
+      // }
 
       p {
          color: #666;
@@ -94,7 +104,7 @@ div.info-wrapper {
         border-bottom: 1px solid #d3d3d3;
         @include box-shadow(0 1px 0 #eee);
         @include box-sizing(border-box);
-        padding: 7px lh(.75);
+        padding: em(7) lh(.75);
         position: relative;
 
         &.expandable,
@@ -108,13 +118,13 @@ div.info-wrapper {
 
         ul {
           background: none;
-          margin: 7px (-(lh(.75))) 0;
+          margin: em(7) (-(lh(.75))) 0;
 
           li {
             border-bottom: 0;
             border-top: 1px solid #d3d3d3;
             @include box-shadow(inset 0 1px 0 #eee);
-            padding-left: 18px + lh(.75);
+            padding-left: lh(1.5);
           }
         }
 
@@ -150,7 +160,7 @@ div.info-wrapper {
           border-bottom: 0;
           @include box-shadow(none);
           color: #999;
-          font-size: 12px;
+          font-size: $body-font-size;
           font-weight: bold;
           text-transform: uppercase;
         }

lms/static/sass/course/_textbook.scss

@@ -62,7 +62,6 @@ div.book-wrapper {
         @extend .clearfix;
 
         li {
-          background-color: darken($cream, 4%);
 
           &.last {
             display: block;

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

@@ -12,4 +12,10 @@ table {
 
 .container {
   padding: lh(2);
+
+  > div {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
 }

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

-.wrapper {
-  margin: 0 auto;
-  max-width: $fg-max-width;
-  min-width: $fg-min-width;
-  text-align: left;
-  width: flex-grid(12);
-
-  div.table-wrapper {
-    display: table;
-    width: flex-grid(12);
-    overflow: hidden;
-  }
-}
-
 h1.top-header {
-  background: #f3f3f3;
   border-bottom: 1px solid #e3e3e3;
-  margin: (-(lh())) (-(lh())) lh();
-  padding: lh();
   text-align: left;
-}
-
-.button {
-  border: 1px solid darken(#888, 10%);
-  @include border-radius(3px);
-  @include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
-  color: #fff;
-  cursor: pointer;
-  font: bold $body-font-size $body-font-family;
-  @include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
-  padding: 4px 8px;
-  text-decoration: none;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-
-  &:hover, &:focus {
-    border: 1px solid darken(#888, 20%);
-    @include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
-    @include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
-  }
+  font-size: 24px;
+  font-weight: 100;
+  padding-bottom: lh();
 }
 
 .light-button, a.light-button {
@@ -94,11 +60,13 @@ h1.top-header {
   width: flex-grid(3);
 
   h1, h2 {
-   font-size: 18px;
-   font-weight: bold;
+   font-size: em(18);
+   font-weight: 100;
    letter-spacing: 0;
    text-transform: none;
    font-family: $sans-serif;
+   text-align: left;
+   font-style: italic;
   }
 
   a {
@@ -147,27 +115,20 @@ h1.top-header {
   }
 
   header#open_close_accordion {
-    border-bottom: 1px solid #d3d3d3;
-    @include box-shadow(0 1px 0 #eee);
-    padding: lh(.5) lh();
     position: relative;
 
-    h2 {
-      margin: 0;
-      padding-right: 20px;
-    }
-
     a {
-      background: #eee url('../images/slide-left-icon.png') center center no-repeat;
+      background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat;
       border: 1px solid #D3D3D3;
       @include border-radius(3px 0 0 3px);
       height: 16px;
-      padding: 8px;
+      padding: 6px;
       position: absolute;
       right: -1px;
       text-indent: -9999px;
       top: 6px;
       width: 16px;
+      z-index: 99;
 
       &:hover {
         background-color: white;
@@ -182,32 +143,17 @@ h1.top-header {
 
 .topbar {
   @extend .clearfix;
-  border-bottom: 1px solid darken($cream, 10%);
-  border-top: 1px solid #fff;
-  font-size: 12px;
-  line-height: 46px;
-  text-shadow: 0 1px 0 #fff;
+  border-bottom: 1px solid $border-color;
+  font-size: 14px;
 
   @media print {
     display: none;
   }
 
   a {
-    line-height: 46px;
-    border-bottom: 0;
-    color: darken($cream, 80%);
-
-    &:hover {
-      color: darken($cream, 60%);
-      text-decoration: none;
-    }
-
     &.block-link {
-      // background: darken($cream, 5%);
-      border-left: 1px solid darken($cream, 20%);
-      @include box-shadow(inset 1px 0 0 lighten($cream, 5%));
+      border-left: 1px solid lighten($border-color, 10%);
       display: block;
-      text-transform: uppercase;
 
       &:hover {
         background: none;
@@ -219,12 +165,3 @@ h1.top-header {
 .tran {
   @include transition( all, .2s, $ease-in-out-quad);
 }
-
-p.ie-warning {
-  background: yellow;
-  display: block !important;
-  line-height: 1.3em;
-  margin-bottom: 0;
-  padding: lh();
-  text-align: left;
-}

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

@@ -181,17 +181,9 @@ div.course-wrapper {
       overflow: hidden;
 
       header#open_close_accordion {
-        padding: 0;
-        min-height: 47px;
-
         a {
           background-image: url('../images/slide-right-icon.png');
         }
-
-        h2 {
-          visibility: hidden;
-          width: 10px;
-        }
       }
 
       div#accordion {

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

@@ -23,7 +23,8 @@ section.course-index {
       }
 
       &:hover {
-        background: #eee;
+        background: #f6f6f6;
+        text-decoration: none;
       }
 
       &.ui-accordion-header {
@@ -49,7 +50,7 @@ section.course-index {
 
     ul.ui-accordion-content {
       @include border-radius(0);
-      background: #FFF;
+      background: transparent;
       border: none;
       font-size: 12px;
       margin: 0;
@@ -104,7 +105,7 @@ section.course-index {
             &:after {
               opacity: 1;
               right: 15px;
-              @include transition(all, 0.2s, linear);
+              @include transition();
             }
 
             > a p {

lms/static/sass/course/discussion/_profile.scss

@@ -72,7 +72,6 @@ body.user-profile-page {
         margin-bottom: 30px;
 
         li {
-          background-color: lighten($cream, 3%);
           background-position: 10px center;
           background-repeat: no-repeat;
           @include border-radius(4px);

lms/static/sass/course/discussion/_question-view.scss

@@ -32,8 +32,6 @@ div.question-header {
 
         &.post-vote {
           @include border-radius(4px);
-          background-color: lighten($cream, 5%);
-          border: 1px solid darken( $cream, 10% );
           @include box-shadow(inset 0 1px 0px #fff);
         }
 
@@ -149,7 +147,7 @@ div.question-header {
 
           &.revision {
             text-align: center;
-            background:lighten($cream, 7%);
+            // background:lighten($cream, 7%);
 
             a {
               color: black;
@@ -313,7 +311,6 @@ div.question-header {
               }
 
               a.edit {
-                @extend .button;
                 font-size: 12px;
                 padding: 2px 10px;
               }

lms/static/sass/course/old/.gitignore

-*.css

lms/static/sass/course/wiki/_wiki.scss

@@ -24,7 +24,6 @@ div.wiki-wrapper {
       }
 
       p {
-        color: darken($cream, 55%);
         float: left;
         line-height: 46px;
         margin-bottom: 0;
@@ -40,14 +39,12 @@ div.wiki-wrapper {
 
           input[type="button"] {
             @extend .block-link;
-            background-color: darken($cream, 5%);
             background-position: 12px center;
             background-repeat: no-repeat;
             border: 0;
             border-left: 1px solid darken(#f6efd4, 20%);
             @include border-radius(0);
             @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-            color: darken($cream, 80%);
             display: block;
             font-size: 12px;
             font-weight: normal;

lms/templates/info.html

@@ -20,23 +20,25 @@ $(document).ready(function(){
 </%block>
 
 <section class="container">
-  <section class="courseware">
-    <div class="info-wrapper">
-      % if user.is_authenticated():
-      <section class="updates">
-        ${get_course_info_section(course, 'updates')}
-      </section>
-      <section aria-label="Handout Navigation" class="handouts">
-        ${get_course_info_section(course, 'handouts')}
-      </section>
-      % else:
-      <section class="updates">
-        ${get_course_info_section(course, 'guest_updates')}
-      </section>
-      <section aria-label="Handout Navigation" class="handouts">
-        ${get_course_info_section(course, 'guest_handouts')}
-      </section>
-      % endif
-    </div>
-  </section>
+  <div class="info-wrapper">
+    % if user.is_authenticated():
+    <section class="updates">
+      <h1>Course Updates &amp; News</h1>
+      ${get_course_info_section(course, 'updates')}
+    </section>
+    <section aria-label="Handout Navigation" class="handouts">
+      <h1>Course Handouts</h1>
+      ${get_course_info_section(course, 'handouts')}
+    </section>
+    % else:
+    <section class="updates">
+      <h1>Course Updates &amp; News</h1>
+      ${get_course_info_section(course, 'guest_updates')}
+    </section>
+    <section aria-label="Handout Navigation" class="handouts">
+      <h1>Course Handouts</h1>
+      ${get_course_info_section(course, 'guest_handouts')}
+    </section>
+    % endif
+  </div>
 </section>

lms/templates/staticbook.html

@@ -67,7 +67,6 @@ $("#open_close_accordion a").click(function(){
 
     <section aria-label="Textbook Navigation" class="book-sidebar">
       <header id="open_close_accordion">
-        <h2>Table of Contents</h2>
         <a href="#">close</a>
       </header>