updated unit styling, added polyfill js library, updated javascript handling for modes swap

cms/static/coffee/src/views/module_edit.coffee

@@ -7,7 +7,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
     "click .component-editor .save-button": 'clickSaveButton'
     "click .component-actions .edit-button": 'clickEditButton'
     "click .component-actions .delete-button": 'onDelete'
-    "click .mode .not-set": 'clickModeButton'
+    "click .not-set ": 'clickModeButton'
 
   initialize: ->
     @onDelete = @options.onDelete
@@ -86,5 +86,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
   clickModeButton: (event) ->
     event.preventDefault()
-    @$el.find("a").removeClass('not-set')
-    @$el.find("a").addClass('is-set')
+    @$el.find("a").removeClass('not-set').addClass('is-set')
+
+    previouslySetMode = @$el.siblings('li.active-mode').find('.is-set')
+    previouslySetMode.find("a").removeClass('is-set').addClass('not-set')
+
+    activeTab = $component_editor.find('.xmodule_edit').find(".is-set")
+    activeTab.removeClass('is-set')
+    activeTab.siblings('.not-set').addClass('is-set')

cms/static/sass/views/_unit.scss

@@ -508,19 +508,18 @@ body.course.unit {
     .mode {
       display: inline-block;
 
-      .inactive-mode {
+      &.inactive-mode{
         display: none;
       }
 
-      .active-mode {
+      &.active-mode a {
+
         @include blue-button;
-      }
 
-      .is-set {
+        &.is-set {
           @include linear-gradient($blue, $blue);
           box-shadow: inset 0 0 3px $shadow;
           background-color: $blue;
-
           cursor: default;
 
           &:hover {
@@ -530,6 +529,7 @@ body.course.unit {
         }
       }
     }
+  }
 }
 
 // Editor Wrapper
@@ -654,7 +654,7 @@ body.course.unit {
       }
 
       select {
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+        @include box-shadow(0 1px 2px $shadow-l1 inset);
         background: none repeat scroll #F2F2F2;
 
         &:focus {

cms/templates/base.html

@@ -49,6 +49,7 @@
     <script src="${static.url('js/vendor/jquery.smooth-scroll.min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
+    <script src="${static.url('js/vendor/html5-input-polyfills/number-polyfill.js')}"></script>
 
     <!--TODO: not the right place-->
     <script type="text/javascript" src="${static.url('js/models/metadata_model.js')}"></script>

cms/templates/component.html

 <div class="wrapper wrapper-component-editor">
 	<div class="component-editor">
 		<div class="component-edit-header">
-  			<span class="component-name"><em>Editing:</em> Name of Component</span>
+  			<span class="component-name"><em>Editing:</em> Component</span>
   	  		<ul class="nav-edit-modes">
-  	  			<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
-  	  				<a href="#" class="active-mode not-set">Editor</a>
+  	  			<li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
+  	  				<a href="#" class="not-set">Editor</a>
 	  			</li>
-	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
-	  				<a href="#" class="inactive-mode">Compiler </a>
+	  			<li id="settings-mode" class="mode inactive-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="not-set">Compiler </a>
 	  			</li>
-	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
-	  				<a href="#" class="active-mode is-set">Settings </a>
+	  			<li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="is-set">Settings</a>
 	  			</li>
 	  		</ul>
 		</div> <!-- Editor Header -->