Merge pull request #2214 from mozilla/issue_1093_button_spinners

Add spinners to the submit buttons whenever submit is disabled.

resources/static/common/css/style.css

@@ -260,7 +260,6 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
   border: 0
 }
 
-
 .submit button {
     padding: 6px 45px 7px 10px;
     background-color: #4eb5e5;
@@ -300,7 +299,11 @@ button::-moz-focus-inner, .button::-moz-focus-inner {
     background-image: url("/common/i/button-arrow-active.png"),          linear-gradient(top, #184a73, #276084);
 }
 
+/* Override all previously applied styles so that the button does not change
+ * styles even if the user hovers, focuses or clicks on the button.
+*/
 button[disabled], .submit_disabled button, .submit_disabled .button,
+.submit_disabled button:hover, .submit_disabled .button:hover,
 .submit_disabled button:focus, .submit_disabled .button:focus,
 .submit_disabled button:active, .submit_disabled .button:active {
   color: #d8dde0;
@@ -319,6 +322,21 @@ button[disabled], .submit_disabled button, .submit_disabled .button,
   border-bottom: 1px solid #777;
 }
 
+.submit_disabled .submit button, .submit_disabled .submit .button,
+.submit_disabled .submit button:hover, .submit_disabled .submit .button:hover,
+.submit_disabled .submit button:focus, .submit_disabled .submit .button:focus,
+.submit_disabled .submit button:active, .submit_disabled .submit .button:active {
+    background-color: #4eb5e5;
+    background-image: url("/common/i/button-loader.gif"), -webkit-gradient(linear, left top, left bottom, from(#4eb5e5), to(#3196cf));
+    background-image: url("/common/i/button-loader.gif"), -webkit-linear-gradient(top, #4eb5e5, #3196cf);
+    background-image: url("/common/i/button-loader.gif"),    -moz-linear-gradient(top, #4eb5e5, #3196cf);
+    background-image: url("/common/i/button-loader.gif"),      -ms-linear-gradient(top, #4eb5e5, #3196cf);
+    background-image: url("/common/i/button-loader.gif"),       -o-linear-gradient(top, #4eb5e5, #3196cf);
+    background-image: url("/common/i/button-loader.gif"),          linear-gradient(top, #4eb5e5, #3196cf);
+    background-position: 95% center;
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.2);
+}
+
 button.negative {
     background-color: #d94f30;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#d94f30), to(#ad1804));
@@ -356,16 +374,6 @@ button.negative:active,
     background-image:         linear-gradient(top, #83311e, #670d01);
 }
 
-button.loading, input[type="submit"].loading, .submit button.loading, .submit .button.loading{
-    background-color: #4eb5e5;
-    background-image: url("/common/i/button-loader.gif"), -webkit-gradient(linear, left top, left bottom, from(#4eb5e5), to(#3196cf));
-    background-image: url("/common/i/button-loader.gif"), -webkit-linear-gradient(top, #4eb5e5, #3196cf);
-    background-image: url("/common/i/button-loader.gif"),    -moz-linear-gradient(top, #4eb5e5, #3196cf);
-    background-image: url("/common/i/button-loader.gif"),      -ms-linear-gradient(top, #4eb5e5, #3196cf);
-    background-image: url("/common/i/button-loader.gif"),       -o-linear-gradient(top, #4eb5e5, #3196cf);
-    background-image: url("/common/i/button-loader.gif"),          linear-gradient(top, #4eb5e5, #3196cf);
-    background-position: 95% center;
-}
 
 .tospp {
   line-height: 14px;