From 7d1af3c5dcd38c76b36b7ad0f1ed189763113ba0 Mon Sep 17 00:00:00 2001
From: Stuart Colville <scolville@mozilla.com>
Date: Thu, 16 Jul 2015 20:12:00 +0100
Subject: [PATCH] Fix spinner button regression (#195)

---
 public/scss/_spinner.scss                 | 14 ++++++++++----
 public/scss/_utils.scss                   |  9 +--------
 styleguide/pages/buttons.md               |  9 +++++++++
 styleguide/templates/buttons-spinner.html |  8 ++++++++
 styleguide/templates/buttons.html         |  4 ++--
 5 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 styleguide/templates/buttons-spinner.html

diff --git a/public/scss/_spinner.scss b/public/scss/_spinner.scss
index fd365d0..1f30579 100644
--- a/public/scss/_spinner.scss
+++ b/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;
   }
 }
diff --git a/public/scss/_utils.scss b/public/scss/_utils.scss
index b104db3..be3939b 100644
--- a/public/scss/_utils.scss
+++ b/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();
 }
diff --git a/styleguide/pages/buttons.md b/styleguide/pages/buttons.md
index 59752d8..faacf9b 100644
--- a/styleguide/pages/buttons.md
+++ b/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
+```
diff --git a/styleguide/templates/buttons-spinner.html b/styleguide/templates/buttons-spinner.html
new file mode 100644
index 0000000..27c29cc
--- /dev/null
+++ b/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 %}
diff --git a/styleguide/templates/buttons.html b/styleguide/templates/buttons.html
index 5139789..c0194e0 100644
--- a/styleguide/templates/buttons.html
+++ b/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>