cleanup and tweaks from feeback to PDF Textbooks FED and Sass

cms/static/sass/views/_textbooks.scss

@@ -14,14 +14,14 @@ body.course.textbooks {
 
     .no-textbook-content {
       @extend .ui-well;
-      padding: $baseline*2;
+      padding: ($baseline*2);
       background-color: $gray-l4;
       text-align: center;
       color: $gray;
 
-      .button {
-        margin-left: $baseline;
+      .new-button {
         @include font-size(14);
+        margin-left: $baseline;
 
         [class^="icon-"] {
           margin-right: ($baseline/2);
@@ -43,7 +43,7 @@ body.course.textbooks {
 
         .textbook-title {
           @extend .t-title4;
-          margin-right: 280px;
+          margin-right: ($baseline*14);
           font-weight: bold;
         }
 
@@ -51,7 +51,7 @@ body.course.textbooks {
           @include transition(rotate .15s ease-in-out .25s);
           @include font-size(21);
           display: inline-block;
-          width: ($baseline*.75);
+          width: ($baseline*0.75);
           vertical-align: text-bottom;
         }
 
@@ -71,18 +71,18 @@ body.course.textbooks {
           margin-left: $baseline;
 
           .chapter {
-            @include font-size(12);
+            @extend .t-copy-sub2;
             margin-bottom: ($baseline/4);
             border-bottom: 1px solid $gray-l4;
 
             .chapter-name {
               display: inline-block;
+              vertical-align: middle;
               width: 45%;
               margin-right: ($baseline/2);
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
-              vertical-align: middle;
             }
 
             .chapter-asset-path {
@@ -116,12 +116,6 @@ body.course.textbooks {
 
             .delete {
               @extend .btn-non;
-
-              span {
-                @extend .text-sr;
-              }
-
-
             }
           }
 
@@ -180,7 +174,7 @@ body.course.textbooks {
       }
 
       .copy {
-        @include font-size(12);
+        @extend .t-copy-sub2;
         margin: ($baseline) 0 ($baseline/2) 0;
         color: $gray;
 
@@ -194,7 +188,7 @@ body.course.textbooks {
 
       .chapters-fields,
       .textbook-fields {
-        list-style: none;
+        @extend .no-list;
 
         .field {
           margin: 0 0 ($baseline*0.75) 0;
@@ -234,6 +228,8 @@ body.course.textbooks {
             @extend .t-title5;
           }
 
+
+          //this section is borrowed from _account.scss - we should clean up and unify later
           input, textarea {
             @extend .t-copy-base;
             height: 100%;
@@ -314,7 +310,7 @@ body.course.textbooks {
             display: block;
             width: 46%;
             border-bottom: none;
-            margin: 0 ($baseline*.75) 0 0;
+            margin: 0 ($baseline*0.75) 0 0;
             padding: ($baseline/4) 0 0 0;
             float: left;
             position: relative;
@@ -398,7 +394,7 @@ body.course.textbooks {
     text-align: left;
 
     .title {
-      @include font-size(18);
+      @extend .t-title5;
       margin-bottom: ($baseline/2);
       font-weight: 600;
       color: $black;
@@ -423,7 +419,7 @@ body.course.textbooks {
       }
 
       input[type="file"] {
-        @include font-size(12);
+        @extend .t-copy-sub2;
       }
 
       .status-upload {
@@ -433,7 +429,7 @@ body.course.textbooks {
         .wrapper-progress {
           @include box-shadow(inset 0 0 3px $shadow-d1);
           display: block;
-          border-radius: ($baseline*.75);
+          border-radius: ($baseline*0.75);
           background-color: $gray-l5;
           padding: 1px 8px 2px 8px;
           height: 25px;
@@ -443,22 +439,22 @@ body.course.textbooks {
             vertical-align: middle;
             width: 100%;
             border: none;
-            border-radius: ($baseline*.75);
+            border-radius: ($baseline*0.75);
             background-color: $gray-l5;
 
             &::-webkit-progress-bar {
               background-color: transparent;
-              border-radius: ($baseline*.75);
+              border-radius: ($baseline*0.75);
             }
 
             &::-webkit-progress-value {
               background-color: $pink;
-              border-radius: ($baseline*.75);
+              border-radius: ($baseline*0.75);
             }
 
             &::-moz-progress-bar {
               background-color: $pink;
-              border-radius: ($baseline*.75);
+              border-radius: ($baseline*0.75);
             }
 
           }
@@ -481,14 +477,14 @@ body.course.textbooks {
           }
 
           &.error {
-            border-color: shade($red, 50%);
-            background: tint($red, 20%);
+            border-color: $red-d2;
+            background: $red-l1;
             color: $white;
           }
 
           &.confirm {
-            border-color: shade($green, 50%);
-            background: tint($green, 20%);
+            border-color: $green-d2;
+            background: $green-l1;
             color: $white;
           }
 
@@ -505,7 +501,6 @@ body.course.textbooks {
 
         .action-item {
           @extend .t-action4;
-          @include font-size(12);
           display: inline-block;
           margin-right: ($baseline*0.75);
 
@@ -513,33 +508,6 @@ body.course.textbooks {
             margin-right: 0;
           }
         }
-/*
-        .action-upload {
-          @extend .btn-primary-blue;
-          color: $white;
-          font-weight: 600;
-
-          &[disabled="disabled"] {
-            background-color: $gray-l4;
-            color: $gray;
-            border: 1px solid $gray;
-          }
-
-        }
-
-        .action-cancel {
-          @extend .t-action4;
-          border: 0;
-          background: none;
-          font-weight: 600;
-          color: $blue;
-
-          &:hover {
-            color: $blue-s3;
-          }
-
-        }
-*/
 
            .action-primary {
               @include blue-button();

cms/templates/js/upload-dialog.underscore

@@ -10,7 +10,7 @@
   <div class="form-content">
   <h2 class="title"><%= title %></h2>
   <% if(error) {%>
-  <div id="upload_error" class="message message-status message-status error is-shown" name="upload_error">
+    <div id="upload_error" class="message message-status message-status error is-shown" name="upload_error">
       <p><%= gettext(error.message) %></p>
     </div>
   <% } %>

cms/templates/textbooks.html

@@ -71,12 +71,12 @@ $(function() {
       </article>
       <aside class="content-supplementary" role="complimentary">
         <div class="bit">
-        <h3 class="title-3">${_("Why should I break my text into chapters?")}</h3>
-        <p>${_("It's best practice to break your course's textbook into multiple chapters to reduce loading times for students. Breaking up textbooks into chapters can also help students more easily find topic-based information.")}</p>
+          <h3 class="title-3">${_("Why should I break my text into chapters?")}</h3>
+          <p>${_("It's best practice to break your course's textbook into multiple chapters to reduce loading times for students. Breaking up textbooks into chapters can also help students more easily find topic-based information.")}</p>
         </div>
         <div class="bit">
-        <h3 class="title-3">${_("What if my book isn't divided into chapters?")}</h3>
-        <p>${_("If you haven't broken your textbook into chapters, you can upload the entire text as Chapter 1.")}</p>
+          <h3 class="title-3">${_("What if my book isn't divided into chapters?")}</h3>
+          <p>${_("If you haven't broken your textbook into chapters, you can upload the entire text as Chapter 1.")}</p>
         </div>
       </aside>
     </section>

common/static/sass/_mixins.scss

@@ -193,7 +193,6 @@
 .btn-flat-outline {
   @extend .t-action4;
   @include transition(all .15s);
-  @include font-size(12);
   font-weight: 600;
   text-align: center;
   border-radius: ($baseline/4);
@@ -217,6 +216,7 @@
   }
 }
 
+// button with no button shell until hover for understated actions
 .btn-non {
   @include transition(all .15s);
   border: none;
@@ -230,6 +230,10 @@
     background-color: $gray-l1;
     color: $white;
   }
+
+  span {
+    @extend .text-sr;
+  }
 }
 
 // UI archetypes - well
@@ -237,14 +241,3 @@
   @include box-shadow(inset 0 1px 2px 1px $shadow);
   padding: ($baseline*0.75);
 }
-
-// small/inline button
-.btn-flat {
-  @extend .btn;
-  @extend .btn-rounded;
-  border-width: 0;
-  border-radius: $baseline;
-  padding:($baseline/5) $baseline/2;
-  line-height: 1.3;
-  text-align: center;
-}