Fix spinner button regression (#195)

public/scss/_spinner.scss

@@ -13,7 +13,6 @@
   margin: 0 auto;
   max-width: 100%;
   width: 300px;
-
   .text {
     display: block;
     margin: 0 auto;
@@ -37,12 +36,19 @@
 }
 
 button.spinner {
-  text-indent: 0;
-  font-size: 0;
+  position: relative;
+  text-indent: -999em;
   &:after {
     @include hidpi-background-image('spinnerwhite', 30px 30px);
-    margin: 0 auto;
+    content: '';
+    display: block;
     height: 30px;
+    left: 0;
+    margin: -15px auto 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
     width: 30px;
+    z-index: 10;
   }
 }

public/scss/_utils.scss

@@ -5,12 +5,5 @@
 
 .vh,
 .visuallyhidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+    @include visuallyhidden();
 }

styleguide/pages/buttons.md

@@ -3,6 +3,15 @@
 Here's some examples of the buttons styles used in the payments-ui.
 
 ```iframe
+title: Standard Buttons
 renderer: nunjucks
 template: buttons.html
 ```
+
+These are the spinner buttons.
+
+```iframe
+title: buttons with spinner
+renderer: nunjucks
+template: buttons-spinner.html
+```

styleguide/templates/buttons-spinner.html

@@ -0,0 +1,8 @@
+{% extends 'base-styleguide.html' %}
+
+{% block page %}
+<h2>Buttons With Spinners</h2>
+<button>Standard Button</button>
+<button class="spinner" >Button with Spinner</button>
+<button disabled class="spinner">Button (disabled)</button>
+{% endblock %}

styleguide/templates/buttons.html

@@ -2,8 +2,8 @@
 
 {% block page %}
 <h2>Buttons</h2>
-<button type="submit" id="submit">Button</button>
-<button disabled type="submit" id="submit">Button (disabled)</button>
+<button type="submit">Button</button>
+<button disabled type="submit">Button (disabled)</button>
 
 <h2>Link Buttons</h2>
 <a class="button" href="#">Button Link</a>