From 13ad385c0dcf445cf330c6673bdf94e9fe71a9ba Mon Sep 17 00:00:00 2001
From: Tim Connor <tim.connor@appfolio.com>
Date: Fri, 20 Jan 2017 08:50:58 -0800
Subject: [PATCH] scale spinner with font size

---
 src/components/Spinner.scss | 14 +++++---------
 stories/Spinner.js          | 13 ++++++++-----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/Spinner.scss b/src/components/Spinner.scss
index 0f480d3af..0c076c5c2 100644
--- a/src/components/Spinner.scss
+++ b/src/components/Spinner.scss
@@ -4,13 +4,10 @@ $base-color: #3179CD;
 // Time for one complete spin cycle
 $duration: 1.2s;
 
-// Every other size is in ems so will scale with the font size.
-$font-size: 12px;
-
-$container-size: 5em;
-$segment-width: .5em;
-$segment-length: 1.5em;
-$segment-border-radius: .5em;
+$container-size: 1em;
+$segment-width: .1em;
+$segment-length: .3em;
+$segment-border-radius: .1em;
 
 @keyframes spin {
   to { transform: rotate(1turn); }
@@ -19,9 +16,8 @@ $segment-border-radius: .5em;
 .spinner {
   animation: spin $duration infinite steps(12);
   display: inline-block;
-  font-size: $font-size;
   height: $container-size;
-  margin: 0 .5em;
+  margin: 0 .1em;
   overflow: hidden;
   position: relative;
   width: $container-size;
diff --git a/stories/Spinner.js b/stories/Spinner.js
index 2c00375a5..31d2e6dbc 100644
--- a/stories/Spinner.js
+++ b/stories/Spinner.js
@@ -4,13 +4,16 @@ import { storiesOf } from '@kadira/storybook';
 
 storiesOf('Spinner', module)
   .addWithInfo('Default', () => (
+    <div>The <Spinner /> will scale with the font size</div>
+  ))
+  .addWithInfo('Scaled', () => (
     <div>
-      <Spinner style={{ fontSize: 2 }} />
-      <Spinner style={{ fontSize: 4 }} />
-      <Spinner style={{ fontSize: 8 }} />
-      <Spinner />
-      <Spinner style={{ fontSize: 16 }} />
+      <Spinner style={{ fontSize: 10 }} />
       <Spinner style={{ fontSize: 20 }} />
+      <Spinner style={{ fontSize: 40 }} />
+      <Spinner style={{ fontSize: 60 }} />
+      <Spinner style={{ fontSize: 80 }} />
+      <Spinner style={{ fontSize: 100 }} />
     </div>
   ))
   .addWithInfo('This is what it used to look like', () => (