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

Added styles to grade out the top and bottom of the sidebar border and f...

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

@@ -4,7 +4,7 @@ nav.sequence-nav {
   @extend .topbar;
   border-bottom: 1px solid $border-color;
   @include border-top-right-radius(4px);
-  margin: (-(lh())) (-(lh())) lh() (-(lh()));
+  margin: 0 0 lh() (-(lh()));
   position: relative;
 
   ol {

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

@@ -4,7 +4,7 @@ div.video {
   border-bottom: 1px solid #e1e1e1;
   border-top: 1px solid #e1e1e1;
   display: block;
-  margin: 0 (-(lh()));
+  margin: 0 0 0 (-(lh()));
   padding: 6px lh();
 
   article.video-wrapper {

lms/static/sass/course/_info.scss

@@ -69,10 +69,15 @@ div.info-wrapper {
   section.handouts {
     @extend .sidebar;
     border-left: 1px solid $border-color;
-    @include border-radius(0 4px 4px 0);
     border-right: 0;
+    @include border-radius(0 4px 4px 0);
     @include box-shadow(none);
 
+    &:after {
+      left: -1px;
+      right: auto;
+    }
+
     h1 {
       @extend .bottom-border;
       margin-bottom: 0;

lms/static/sass/course/_profile.scss

@@ -8,6 +8,11 @@ div.profile-wrapper {
     @include border-radius(0px 4px 4px 0);
     border-right: 0;
 
+    &:after {
+      left: -1px;
+      right: auto;
+    }
+
     header {
       @extend .bottom-border;
       margin: 0;

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

@@ -31,6 +31,10 @@ img {
   max-width: 100%;
 }
 
+.container {
+  padding: em(40) 0;
+}
+
 ::selection, ::-moz-selection, ::-webkit-selection {
   background:#444;
   color:#fff;

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

@@ -49,6 +49,18 @@ h1.top-header {
   vertical-align: top;
   width: flex-grid(3);
 
+  &:after {
+    width: 1px;
+    height: 100%;
+    @include position(absolute,  0px -1px 0px 0);
+    content: "";
+    @include background-image(linear-gradient(top, #fff, rgba(#fff, 0)), linear-gradient(top, rgba(#fff, 0), #fff));
+    background-position: top, bottom;
+    @include background-size(1px 20px);
+    background-repeat: no-repeat;
+    display: block;
+  }
+
   h1, h2 {
    font-size: em(20);
    font-weight: 100;
@@ -137,7 +149,7 @@ h1.top-header {
       position: absolute;
       right: -1px;
       text-indent: -9999px;
-      top: 6px;
+      top: 12px;
       width: 16px;
       z-index: 99;
 

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

@@ -6,6 +6,11 @@ div.discussion-wrapper aside {
   border-right: 0;
   width: flex-grid(3);
 
+  &:after {
+    left: -1px;
+    right: auto;
+  }
+
   &.main-sidebar {
     min-width:200px;
   }