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,86 +263,73 @@ nav.sequence-nav {
   }
 }
 
+div.seq_contents {
+  display: none;
+}
 
-section.course-content {
-  position: relative;
+nav.sequence-bottom {
+  margin: lh(2) 0 0;
+  text-align: center;
 
-  ol.vert-mod {
-    nav.sequence-nav {
-      margin-top: -15px;
-      @include border-radius(0);
-    }
-  }
+  ul {
+    @extend .clearfix;
+    background-color: darken(#F6EFD4, 5%);
+    background-color: darken($cream, 5%);
+    border: 1px solid darken(#f6efd4, 20%);
+    @include border-radius(3px);
+    @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
+    @include inline-block();
 
-  div.seq_contents {
-    display: none;
-  }
+    li {
+      float: left;
 
-  nav.sequence-bottom {
-    margin: lh(2) 0 0;
-    text-align: center;
-
-    ul {
-      @extend .clearfix;
-      background-color: darken(#F6EFD4, 5%);
-      background-color: darken($cream, 5%);
-      border: 1px solid darken(#f6efd4, 20%);
-      @include border-radius(3px);
-      @include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
-      @include inline-block();
-
-      li {
-        float: left;
-
-        &.prev, &.next {
-          margin-bottom: 0;
-
-          a {
-            background-position: center center;
-            background-repeat: no-repeat;
-            border-bottom: none;
-            display: block;
-            padding: lh(.5) 4px;
-            text-indent: -9999px;
-            @include transition(all, .2s, $ease-in-out-quad);
-            width: 45px;
-
-            &:hover {
-              background-color: $cream;
-              color: darken($cream, 60%);
-              opacity: .5;
-              text-decoration: none;
-            }
+      &.prev, &.next {
+        margin-bottom: 0;
 
-            &.disabled {
-              background-color: lighten($cream, 10%);
-              opacity: .4;
-            }
+        a {
+          background-position: center center;
+          background-repeat: no-repeat;
+          border-bottom: none;
+          display: block;
+          padding: lh(.5) 4px;
+          text-indent: -9999px;
+          @include transition(all, .2s, $ease-in-out-quad);
+          width: 45px;
+
+          &:hover {
+            background-color: $cream;
+            color: darken($cream, 60%);
+            opacity: .5;
+            text-decoration: none;
+          }
+
+          &.disabled {
+            background-color: lighten($cream, 10%);
+            opacity: .4;
           }
         }
+      }
 
-        &.prev {
-          a {
-            background-image: url('../images/sequence-nav/previous-icon.png');
-            border-right: 1px solid darken(#f6efd4, 20%);
+      &.prev {
+        a {
+          background-image: url('../images/sequence-nav/previous-icon.png');
+          border-right: 1px solid darken(#f6efd4, 20%);
 
-            &:hover {
-              background-color: none;
-            }
+          &:hover {
+            background-color: none;
           }
         }
+      }
 
-        &.next {
-          a {
-            background-image: url('../images/sequence-nav/next-icon.png');
+      &.next {
+        a {
+          background-image: url('../images/sequence-nav/next-icon.png');
 
-            &:hover {
-              background-color: none;
-            }
+          &:hover {
+            background-color: none;
           }
         }
       }
     }
   }
 }
-

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';