Modularize sequence css

cms/static/sass/_base.scss

@@ -10,6 +10,7 @@ $dark-blue: #50545c;
 $bright-blue: #3c8ebf;
 $orange: #f96e5b;
 $yellow: #fff8af;
+$cream: #F6EFD4;
 
 // Base html styles
 html {

lms/static/sass/course/old/courseware/_sequence-nav.scss → common/lib/xmodule/xmodule/css/sequence/display.scss

 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 darken($cream, 20%);
   margin-bottom: $body-line-height;
   position: relative;
@@ -260,22 +263,11 @@ nav.sequence-nav {
   }
 }
 
-
-section.course-content {
-  position: relative;
-
-  ol.vert-mod {
-    nav.sequence-nav {
-      margin-top: -15px;
-      @include border-radius(0);
-    }
-  }
-
-  div.seq_contents {
+div.seq_contents {
   display: none;
-  }
+}
 
-  nav.sequence-bottom {
+nav.sequence-bottom {
   margin: lh(2) 0 0;
   text-align: center;
 
@@ -340,6 +332,4 @@ section.course-content {
       }
     }
   }
-  }
 }
-

common/lib/xmodule/xmodule/seq_module.py

@@ -21,6 +21,7 @@ class SequenceModule(XModule):
     ''' Layout module which lays out content in a temporal sequence
     '''
     js = {'coffee': [resource_string(__name__, 'js/src/sequence/display.coffee')]}
+    css = {'scss': [resource_string(__name__, 'css/sequence/display.scss')]}
     js_module_name = "Sequence"
 
     def __init__(self, system, location, definition, instance_state=None, shared_state=None, **kwargs):

lms/static/sass/course.scss

@@ -16,7 +16,6 @@
 @import 'course/old/base/extends';
 @import 'course/old/base/functions';
 @import 'course/old/courseware/courseware';
-@import 'course/old/courseware/sequence-nav';
 @import 'course/old/courseware/sidebar';
 @import 'course/old/courseware/video';
 @import 'course/old/courseware/amplifier';