more defined header, new icons, cleaner static tabs page

cms/static/sass/_base.scss

@@ -6,7 +6,7 @@
 
 body {
     min-width: 980px;
-    background: #eaebed;
+    background: #eaecf3;
     font-size: 16px;
     line-height: 1.6;
     color: #3c3c3c;
@@ -28,7 +28,6 @@ a {
 }
 
 h1 {
-    display: none;
     float: left;
     font-size: 28px;
     font-weight: 300;
@@ -40,7 +39,7 @@ h1 {
 }
 
 .page-actions {
-    margin-bottom: 25px;
+    margin-bottom: 30px;
 }
 
 .main-wrapper {
@@ -177,6 +176,12 @@ code {
     padding: 10px 0;
 }
 
+.details {
+    display: none;
+    margin-bottom: 30px;
+    font-size: 14px;
+}
+
 .window {
     margin-bottom: 20px;
 
@@ -184,11 +189,6 @@ code {
         padding: 20px;
     }
 
-    .details {
-      margin-bottom: 30px;
-      font-size: 14px;
-    }
-
     h4 {
         padding: 6px 14px;
         border-bottom: 1px solid #cbd1db;

cms/static/sass/_courseware.scss

-
 input.courseware-unit-search-input {
 	float: left;
 	width: 260px;
@@ -9,9 +8,9 @@ input.courseware-unit-search-input {
 	position: relative;
 	background: #fff;
 	border-radius: 3px;
-	margin-top: 15px;
+	margin: 15px 0;
 	padding-bottom: 12px;
-	@include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
+	@include box-shadow(0 1px 1px rgba(0, 0, 0, .2));
 
 	&:first-child {
 		margin-top: 0;
@@ -192,17 +191,6 @@ input.courseware-unit-search-input {
 	}
 }
 
-.collapse-all-button {
-	float: right;
-	margin-top: 10px;
-	font-size: 13px;
-	color: $darkGrey;
-
-	.collapse-all-icon {
-		margin-right: 6px;
-	}
-}
-
 .new-section-name,
 .new-subsection-name-input {
 	width: 515px;
@@ -219,7 +207,7 @@ input.courseware-unit-search-input {
 .new-section-name-cancel,
 .new-subsection-name-cancel {
 	@include white-button;
-	padding: 2px 20px 5px;
+	padding: 4px 20px 7px;
 	color: #8891a1 !important;
 }
 

cms/static/sass/_header.scss

@@ -5,16 +5,16 @@ body.no-header {
 }
 
 @mixin active {
-	color: #3c3c3c;
-	border-bottom: 3px solid $mediumGrey;
+	color: $blue;
+	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+	background-color: rgba(255, 255, 255, .3);
+	@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 .primary-header {
 	width: 100%;
-	margin-bottom: 25px;
-	border-top: 6px solid $blue;
-	border-bottom: 1px solid $mediumGrey;
-	background: #fff;
+	margin-bottom: 30px;
 
 	&.active-tab-courseware #courseware-tab {
 		@include active;
@@ -48,17 +48,25 @@ body.no-header {
 
 	.class-nav-bar {
 		clear: both;
+		@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+		background-color: rgb(197, 207, 223);
+		@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 1px rgba(0, 0, 0, 0.1));
 	}
 
 	.class-nav {
-		@include clearfix;
-		border-top: 1px solid $mediumGrey;
+		@include clearfix;		
 
 		a {
 			float: left;
 			display: inline-block;
-			padding: 20px 25px 22px;
+			padding: 15px 25px 17px;
 			font-size: 15px;
+			color: #3c3c3c;
+			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+
+			&:hover {
+				@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
+			}
 		}
 
 		li {
@@ -69,13 +77,16 @@ body.no-header {
 	.class {
 		@include clearfix;
 		font-size: 12px;
-		color: $darkGrey;
+		color: rgb(163, 171, 184);
+		@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
+		background-color: rgb(47, 53, 63);
+		@include box-shadow(0 -1px 3px rgba(0, 0, 0, 0.6) inset);
 
 		a {
 			display: inline-block;
 			height: 20px;
 			padding: 5px 10px 6px;
-			color: $darkGrey;
+			color: rgb(163, 171, 184);			
 		}
 
 		.home {

cms/static/sass/_static-pages.scss

@@ -6,12 +6,8 @@
     padding: 12px 0;
   }
 
-  .new-tab {
-    margin-bottom: 15px;
-  }
-
   .unit-body {
-    padding: 30px 40px;
+    padding: 0;
   }
 
   .components > li {
@@ -40,7 +36,7 @@
       }
 
       .drag-handle {
-        background: url(../img/drag-handles.png) center no-repeat $lightGrey;
+        background: url(../img/drag-handles.png) center no-repeat #fff;
       }
     }
 
@@ -50,7 +46,7 @@
       z-index: 11;
       width: 35px;
       border: none;
-      background: url(../img/drag-handles.png) center no-repeat $lightGrey;
+      background: url(../img/drag-handles.png) center no-repeat #fff;
 
       &:hover {
         background: url(../img/drag-handles.png) center no-repeat $lightGrey;
@@ -73,7 +69,7 @@
     padding: 20px 20px 22px;
     font-size: 24px;
     font-weight: 300;
-    background: $lightGrey;
+    background: #fff;
   }
 
   .static-page-item {

cms/templates/edit-tabs.html

@@ -17,18 +17,15 @@
 <%block name="content">
 <div class="main-wrapper">
   <div class="inner-wrapper">
-    <div>
-      <h1>Static Tabs</h1>
-    </div>
-    <article class="unit-body window">
-      <div class="details">
-        <p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
-      </div>
-      <div class="list-header">
+    <div class="page-actions">
         <a href="#" class="new-button new-tab">
           <span class="plus-icon white"></span>New Tab
         </a>
       </div>
+    <article class="unit-body">
+      <div class="details">
+        <p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
+      </div>
       <div class="tab-list">
         <ol class='components'>
           % for id in components:

cms/templates/overview.html

@@ -98,7 +98,6 @@
 
   <div class="main-wrapper">
     <div class="inner-wrapper">
-      <h1>Courseware</h1>
       <div class="page-actions">
         <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
         <a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>

cms/templates/widgets/header.html

 <%! from django.core.urlresolvers import reverse %>
 
 <% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
-<header class="primary-header ${active_tab_class}">
-  <div class="inner-wrapper">
-    <div class="class">
+<header class="primary-header ${active_tab_class}">  
+  <div class="class">
+    <div class="inner-wrapper">
       <div class="left">        
         % if context_course:
           <% ctx_loc = context_course.location %>
@@ -21,19 +21,17 @@
         % endif
       </div>
     </div>
-    <nav class="class-nav-bar">
-      % if context_course:
-      <% ctx_loc = context_course.location %>
-      <ul class="class-nav">
-        <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
-        <li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
-        <li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
-        <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
-        <li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</a></li>
-        <li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
-        <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
-      </ul>
-      % endif
-    </nav>
   </div>
+  <nav class="class-nav-bar">
+    % if context_course:
+    <% ctx_loc = context_course.location %>
+    <ul class="class-nav inner-wrapper">
+      <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
+      <li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
+      <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
+      <li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
+      <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
+    </ul>
+    % endif
+  </nav>
 </header>