studio - page headers: completed basic styling and simple page set-ups

cms/static/sass/_base.scss

@@ -70,9 +70,12 @@ h1 {
 
     .title-sub {
       @include font-size(14);
+      position: relative;
+      top: ($baseline/4);
       display: block;
       margin: 0;
       color: $gray-l2;
+      font-weight: 400;
     }
 
     .title, .title-1 {
@@ -82,6 +85,50 @@ h1 {
       font-weight: 600;
       color: $gray-d3;
     }
+
+    // layout with actions
+    .title {
+      width: flex-grid(12);
+    }
+
+    // layout with actions
+    &.has-actions {
+      @include clearfix();
+
+      .title {
+        float: left;
+        width: flex-grid(5,12);
+        margin-right: flex-gutter();
+      }
+
+      .nav-actions {
+        position: relative;
+        bottom: -($baseline*1.5);
+        float: right;
+        width: flex-grid(4,12);
+        text-align: right;
+
+        .nav-item {
+          display: inline-block;
+          vertical-align: top;
+          margin-right: ($baseline/2);
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        // buttons
+        .button {
+          padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
+        }
+
+        .upload-button .icon-create {
+          @include font-size(18);
+          margin-top: ($baseline/4);
+        }
+      }
+    }
   }
 }
 
@@ -531,22 +578,30 @@ hr.divide {
 
 .new-button {
   @include green-button;
-  font-size: 13px;
+  @include font-size(13);
   padding: 8px 20px 10px;
   text-align: center;
 
   &.big {
     display: block;
   }
+
+  .icon-create {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: ($baseline/4);
+    margin-top: ($baseline/10);
+    line-height: 0;
+  }
 }
 
 .edit-button.standard,
 .delete-button.standard {
-  float: left;
+  @include font-size(12);
   @include white-button;
+  float: left;
   padding: 3px 10px 4px;
   margin-left: 7px;
-  font-size: 12px;
   font-weight: 400;
 
   .edit-icon,

cms/static/sass/_course-info.scss

@@ -37,6 +37,11 @@
 		padding: 34px 0 42px;
 		border-top: 1px solid #cbd1db;
 
+		&:first-child {
+			padding-top: 0;
+			border: none;
+		}
+
 		&.editing {
 			position: relative;
 			z-index: 1001;

cms/templates/asset_index.html

@@ -44,7 +44,7 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="upload-button new-button"><span class="upload-icon"></span>Upload New File</a>
+            <a href="#" class="button upload-button new-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#xEB40;</i> Upload New File</a>
           </li>
         </ul>
       </nav>
@@ -54,9 +54,6 @@
   <div class="main-wrapper">
     <div class="inner-wrapper">
       <div class="page-actions">
-        <a href="#" class="upload-button new-button">
-          <span class="upload-icon"></span>Upload New Asset
-        </a>
         <input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/>
       </div>
       <article class="asset-library">

cms/templates/course_info.html

@@ -53,7 +53,7 @@
         <h3 class="sr">Page Actions</h3>
         <ul>
           <li class="nav-item">
-            <a href="#" class="new-update-button">New Update</a>
+            <a href="#" class=" button new-button new-update-button"><i class="ss-icon ss-symbolicons-standard icon-create">&#x002B;</i> New Update</a>
           </li>
         </ul>
       </nav>

cms/templates/edit-tabs.html

@@ -26,24 +26,25 @@
       <h3 class="sr">Page Actions</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
+          <a href="#" class="button new-button new-tab"><i class="ss-icon ss-symbolicons-standard icon-create">&#x002B;</i> New Page</a>
         </li>
       </ul>
     </nav>
   </header>
 </div>
 
+<div class="wrapper-content wrapper">
+  <section class="content">
+    <div class="introduction">
+      <p>On this page, 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>
+  </section>
+</div>
+
 <div class="main-wrapper">
   <div class="inner-wrapper">
     <article class="unit-body">
-      <div class="details">
-        <h2>Here you can add and manage additional pages for your course</h2> 
-        <p>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/manage_users.html

@@ -7,8 +7,8 @@
 <div class="wrapper-mast wrapper">
   <header class="mast has-actions">
     <div class="title">
-      <span class="title-sub">Tools</span>
-      <h1 class="title-1">Course Export</h1>
+      <span class="title-sub">Course Settings</span>
+      <h1 class="title-1">Course Team</h1>
     </div>
 
     <nav class="nav-actions">
@@ -16,7 +16,7 @@
       <ul>
         %if allow_actions:
         <li class="nav-item">
-          <a href="#" class="new-button new-user-button"><span class="plus-icon white"></span>New User</a>
+          <a href="#" class="button new-button new-user-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New User</a>
         </li>
         %endif
       </ul>

cms/templates/overview.html

@@ -134,7 +134,7 @@
             <a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
           </li>
           <li class="nav-item">
-            <a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
+            <a href="#" class="button new-button new-courseware-section-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Section</a>
           </li>
         </ul>
       </nav>