Merge pull request #389 from MITx/feature/tomg/fall-design

Feature/tomg/fall design

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -89,6 +89,19 @@ div {
     }
   }
 
+  &.processing {
+    p.status {
+      @include inline-block();
+      background: url('../images/spinner.gif') center center no-repeat;
+      height: 20px;
+      width: 20px;
+    }
+
+    input {
+      border-color: #aaa;
+    }
+  }
+
   &.incorrect, &.ui-icon-close {
     p.status {
       @include inline-block();
@@ -146,7 +159,7 @@ div {
       width: 14px;
     }
 
-    &.processing, &.ui-icon-check {
+    &.processing, &.ui-icon-processing {
       @include inline-block();
       background: url('../images/spinner.gif') center center no-repeat;
       height: 20px;

lms/static/sass/multicourse/_dashboard.scss

@@ -203,28 +203,23 @@
           display: block;
           left: 0px;
           position: absolute;
+          z-index: 50;
           top: 0px;
           @include transition(all, 0.15s, linear);
           right: 0px;
         }
 
         .arrow {
-          border-top: 8px solid;
-          border-left: 8px solid;
-          border-color: rgba(0,0,0, 0.7);
-          @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.8), -1px 0 1px 0 rgba(255,255,255, 0.8));
-          content: "";
-          display: block;
-          height: 55px;
-          left: 50%;
-          margin-left: -10px;
-          margin-top: -30px;
-          opacity: 0;
           position: absolute;
-          top: 50%;
-          @include transform(rotate(-45deg));
+          z-index: 100;
+          width: 100%;
+          font-size: 70px;
+          line-height: 110px;
+          text-align: center;
+          text-decoration: none;
+          color: rgba(0, 0, 0, .7);
+          opacity: 0;
           @include transition(all, 0.15s, linear);
-          width: 55px;
         }
 
         &:hover {

lms/templates/dashboard.html

@@ -73,7 +73,7 @@
           %>
           <a href="${course_target}" class="cover" style="background-image: url('${course_image_url(course)}')">
             <div class="shade"></div>
-            <div class="arrow"></div>
+            <div class="arrow">&#10095;</div>
           </a>
           <section class="info">
             <hgroup>