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

A bunch of minor changes and bug fixes for the courseware

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

@@ -3,9 +3,9 @@ nav.sequence-nav {
   // import from external sources.
   @extend .topbar;
   border-bottom: 1px solid $border-color;
+  @include border-top-right-radius(4px);
   margin: (-(lh())) (-(lh())) lh() (-(lh()));
   position: relative;
-  @include border-top-right-radius(4px);
 
   ol {
     @include box-sizing(border-box);
@@ -242,9 +242,11 @@ nav.sequence-bottom {
     border: 1px solid $border-color;
     @include border-radius(3px);
     @include inline-block();
+    width: 100px;
 
     li {
       float: left;
+      width: 50%;
 
       &.prev, &.next {
         margin-bottom: 0;
@@ -252,12 +254,11 @@ nav.sequence-bottom {
         a {
           background-position: center center;
           background-repeat: no-repeat;
-          border-bottom: none;
+          border: none;
           display: block;
           padding: lh(.5) 4px;
           text-indent: -9999px;
           @include transition(all, .2s, $ease-in-out-quad);
-          width: 45px;
 
           &:hover {
             background-color: #ddd;
@@ -275,7 +276,7 @@ nav.sequence-bottom {
       &.prev {
         a {
           background-image: url('../images/sequence-nav/previous-icon.png');
-          border-right: 1px solid lighten($border-color, 10%);
+          border-right: 1px solid lighten(#c6c6c6, 10%);
 
           &:hover {
             background-color: none;

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

@@ -16,7 +16,6 @@ div.video {
       height: 0;
       overflow: hidden;
       padding-bottom: 56.25%;
-      padding-top: 30px;
       position: relative;
 
       object, iframe {
@@ -463,7 +462,8 @@ div.video {
     }
 
     ol.subtitles {
-      width: 0px;
+      width: 0;
+      height: 0;
     }
   }
 

lms/static/sass/course/_info.scss

@@ -80,38 +80,54 @@ div.info-wrapper {
     }
 
     ol {
-      background: none;
-      list-style: none;
-      padding-left: 0;
-      margin: 0;
-
       li {
-        @extend .clearfix;
-        background: none;
-        border-bottom: 1px solid $border-color;
-        @include box-sizing(border-box);
-        padding: em(7) lh(.75);
-        position: relative;
-        font-size: 1em;
+        a {
+          display: block;
+          padding-left: lh(.5);
+          padding-right: 0;
+        }
 
         &.expandable,
         &.collapsable {
           h4 {
             font-weight: normal;
             font-size: 1em;
-            padding-left: 18px;
+            padding: lh(.25) 0 lh(.25) lh(1.5);
+          }
+        }
+
+        &.multiple {
+          padding: lh(.5) 0 lh(.5) lh(.5);
+
+          a {
+            @include inline-block;
+            padding: 0;
+
+            &:hover {
+              background: transparent;
+            }
           }
         }
 
         ul {
           background: none;
-          margin: em(7) (-(lh(.75))) 0;
+          margin: 0;
 
           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);
+
+            a {
+              @include inline-block;
+              padding: 0;
+
+              &:hover {
+                background: transparent;
+              }
+            }
           }
         }
 
@@ -119,23 +135,26 @@ div.info-wrapper {
           background-image: url('../images/treeview-default.gif');
           display: block;
           height: 100%;
-          left: lh(.75);
           margin-left: 0;
-          max-height: 20px;
+          max-height: 30px;
           position: absolute;
           width: 100%;
 
           &:hover {
             opacity: 0.6;
             filter: alpha(opacity=60);
+
+            + h4 {
+              background-color: #e3e3e3;
+            }
           }
 
           &.expandable-hitarea {
-            background-position: -80px 1px;
+            background-position: -72px 7px;
           }
 
           &.collapsable-hitarea {
-            background-position: -64px -21px;
+            background-position: -55px -15px;
           }
         }
 
@@ -170,11 +189,6 @@ div.info-wrapper {
             }
           }
         }
-
-        a {
-          @include inline-block();
-          line-height: lh();
-        }
       }
     }
   }

lms/static/sass/course/_textbook.scss

@@ -7,19 +7,20 @@ div.book-wrapper {
     @include box-sizing(border-box);
 
     ul#booknav {
-      font-size: $body-font-size;
-
-      a {
-        color: #000;
-
-        &:hover {
-          color: #666;
-        }
-      }
+      font-size: em(14);
 
       li {
         background: none;
-        padding-left: 30px;
+        border-bottom: 0;
+        padding-left: lh();
+
+        a {
+          padding: 0;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
 
         div.hitarea {
           background-image: url('../images/treeview-default.gif');
@@ -35,6 +36,13 @@ div.book-wrapper {
 
         ul {
           background: none;
+          margin-top: lh(.25);
+          border-top: 1px solid $border-color;
+          padding-top: lh(.25);
+
+          li {
+            padding-bottom: lh(.25);
+          }
         }
       }
 
@@ -47,8 +55,8 @@ div.book-wrapper {
 
   section.book {
     @extend .content;
-    padding-right: 0;
     padding-bottom: 0;
+    padding-right: 0;
     padding-top: 0;
 
     nav {
@@ -68,28 +76,22 @@ div.book-wrapper {
           width: flex-grid(2, 8);
 
           a {
-            display: table;
-            @include box-sizing(border-box);
-            height: 100%;
-            width: 100%;
-            vertical-align: middle;
-            @include transition;
             background-color: rgba(#000, .7);
-            background-repeat: no-repeat;
             background-position: center;
+            background-repeat: no-repeat;
+            @include box-sizing(border-box);
+            display: table;
+            height: 100%;
             opacity: 0;
             filter: alpha(opacity=0);
             text-indent: -9999px;
+            @include transition;
+            vertical-align: middle;
+            width: 100%;
 
             &:hover {
               opacity: 1;
               filter: alpha(opacity=100);
-
-              &.last {
-              }
-
-              &.next {
-              }
             }
           }
 
@@ -120,9 +122,9 @@ div.book-wrapper {
     }
 
     section.page {
-      text-align: center;
-      position: relative;
       border: 1px solid $border-color;
+      position: relative;
+      text-align: center;
 
       img {
         max-width: 100%;

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

@@ -21,3 +21,8 @@ form {
     display: block;
   }
 }
+
+::selection, ::-moz-selection, ::-webkit-selection {
+  background:#444;
+  color:#fff;
+}

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

@@ -59,7 +59,7 @@ h1.top-header {
   width: flex-grid(3);
 
   h1, h2 {
-   font-size: em(18);
+   font-size: em(20);
    font-weight: 100;
    letter-spacing: 0;
    text-transform: none;
@@ -88,22 +88,16 @@ h1.top-header {
     font-weight: normal;
     margin: 0;
     overflow: hidden;
+    font-size: 1em;
 
     a {
-      color: lighten($text-color, 10%);
       display: block;
-      font-size: $body-font-size;
-      padding: 7px 7px 7px 30px;
       text-decoration: none;
       @include transition();
     }
 
-    // span.ui-icon {
-    //   background-image: url(../images/ui-icons_454545_256x240.png);
-    // }
-
     &.active {
-      border-bottom: 1px solid #d3d3d3;
+      @extend .bottom-border;
       color: #000;
       font-weight: bold;
 
@@ -113,6 +107,33 @@ h1.top-header {
     }
   }
 
+  ul, ol {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+
+    li {
+      @extend .bottom-border;
+      @extend .clearfix;
+      background: none;
+      position: relative;
+      padding: 0;
+
+      a {
+        display: block;
+        line-height: lh();
+        font-size: 1em;
+        @include box-sizing(border-box);
+        padding: lh(.25) lh(.5) lh(.25) 0;
+
+        &:hover {
+          color: #666;
+          background: #f6f6f6;
+        }
+      }
+    }
+  }
+
   header#open_close_accordion {
     position: relative;
 

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

@@ -105,12 +105,14 @@ div.course-wrapper {
       ul {
         margin: 0;
         @include clearfix();
+        padding: 0;
 
         li {
           width: flex-grid(3, 9);
           float: left;
           margin-right: flex-gutter(9);
           margin-bottom: lh();
+          line-height: lh();
 
           &:nth-child(3n) {
             margin-right: 0;

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

@@ -11,10 +11,10 @@ section.course-index {
   }
 
   div#accordion {
-
     h3 {
       @include border-radius(0);
       border-top: 1px solid #e3e3e3;
+      font-size: em(16, 18);
       margin: 0;
       overflow: hidden;
 
@@ -23,8 +23,14 @@ section.course-index {
       }
 
       &:hover {
+        color: #666;
         background: #f6f6f6;
-        text-decoration: none;
+      }
+
+      &.ui-state-hover {
+        a {
+          color: #666;
+        }
       }
 
       &.ui-accordion-header {
@@ -33,8 +39,6 @@ section.course-index {
         a {
           @include border-radius(0);
           @include box-shadow(none);
-          color: lighten($text-color, 10%);
-          font-size: $body-font-size;
         }
 
         &.ui-state-active {
@@ -45,30 +49,35 @@ section.course-index {
             background: none;
           }
         }
+
+        span.ui-icon {
+          background-image: url("/static/images/ui-icons_222222_256x240.png");
+          opacity: .3;
+        }
       }
     }
 
     ul.ui-accordion-content {
-      @include border-radius(0);
       background: transparent;
       border: none;
-      font-size: 12px;
+      @include border-radius(0);
+      font-size: em(14, 18);
       margin: 0;
       padding: 1em 1.5em;
 
       li {
+        border-bottom: 0;
         @include border-radius(0);
         margin-bottom: lh(.5);
 
         a {
-          border: 1px solid transparent;
           background: transparent;
+          border: 1px solid transparent;
           @include border-radius(4px);
-          position: relative;
-          padding: 5px 36px 5px 10px;
-          text-decoration: none;
           display: block;
-          color: #666;
+          padding: 5px 36px 5px 10px;
+          position: relative;
+          text-decoration: none;
 
           p {
             font-weight: bold;
@@ -84,16 +93,16 @@ section.course-index {
 
           &:after {
             background: transparent;
-            border-top: 1px solid rgb(180,180,180);
             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;
-            top: 50%;
             right: 30px;
+            top: 50%;
             @include transform(rotate(45deg));
             width: 12px;
           }
@@ -142,7 +151,6 @@ section.course-index {
           span.subtitle {
             font-weight: normal;
           }
-
         }
       }
     }

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

@@ -2,20 +2,8 @@ div#wiki_panel {
   @extend .sidebar;
   overflow: auto;
 
-  h2 {
-    @extend .bottom-border;
-    margin: 0 ;
-    padding: lh(.5) lh() lh(.5) 0;
-    color: #000;
-  }
-
   ul {
-    padding-left: 0;
-    margin: 0;
-
     li {
-      @extend .bottom-border;
-
       &.search {
         padding: 10px lh() 10px 0;
 
@@ -23,25 +11,14 @@ div#wiki_panel {
           display: none;
         }
       }
-
-      a {
-        color: #666;
-        font-size: 14px;
-        padding: 7px lh() 7px 0;
-
-        &:hover {
-          background: #efefef;
-        }
-
-      }
     }
+  }
 
-    form {
-      input[type="submit"]{
-        @extend .light-button;
-        text-transform: none;
-        text-shadow: none;
-      }
+  form {
+    input[type="submit"]{
+      @extend .light-button;
+      text-transform: none;
+      text-shadow: none;
     }
   }