From 44cbb803f336797a6b5c6396853dc7ad49121697 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Tue, 22 Apr 2014 20:08:28 +0200
Subject: [PATCH] [WO-332] Move spinner scss to component

---
 src/sass/all.scss                 |  1 +
 src/sass/components/_spinner.scss | 22 ++++++++++++++++++++++
 src/sass/views/_mail-list.scss    | 28 +++++-----------------------
 src/sass/views/_read.scss         | 19 +------------------
 4 files changed, 29 insertions(+), 41 deletions(-)
 create mode 100644 src/sass/components/_spinner.scss

diff --git a/src/sass/all.scss b/src/sass/all.scss
index c05a6e2..15e19fc 100755
--- a/src/sass/all.scss
+++ b/src/sass/all.scss
@@ -22,6 +22,7 @@
 @import "components/popover";
 @import "components/input";
 @import "components/mail-addresses";
+@import "components/spinner";
 
 // Views
 @import "views/shared";
diff --git a/src/sass/components/_spinner.scss b/src/sass/components/_spinner.scss
new file mode 100644
index 0000000..595f6da
--- /dev/null
+++ b/src/sass/components/_spinner.scss
@@ -0,0 +1,22 @@
+.spinner {
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 0.2em;
+    height: 1em;
+    width: 1em;
+    animation: spinner-rotation .6s linear infinite;
+    border-left: 0.17em solid $color-grey-light;
+    border-right: 0.17em solid $color-grey-light;
+    border-bottom: 0.17em solid $color-grey-light;
+    border-top: 0.17em solid $color-grey;
+    border-radius: 100%;
+}
+
+@keyframes spinner-rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(359deg);
+    }
+}
\ No newline at end of file
diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss
index 107f966..77b1ad4 100755
--- a/src/sass/views/_mail-list.scss
+++ b/src/sass/views/_mail-list.scss
@@ -63,32 +63,14 @@
             }
         }
 
+        .spinner {
+            display:none;
+        }
+
         &.syncing {
             .spinner {
-                top: 6.5px;
-                left: $padding-horizontal;
-                height: 13px;
-                width: 13px;
-                position: absolute;
-                animation: rotation .6s linear infinite;
-                border-left: 2px solid $color-grey-light;
-                border-right: 2px solid $color-grey-light;
-                border-bottom: 2px solid $color-grey-light;
-                border-top: 2px solid $color-grey;
-                border-radius: 100%;
-            }
-            .text {
-                padding-left: 1.5em;
+                display: inline-block;
             }
         }
     }
-}
-
-@keyframes rotation {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(359deg);
-    }
 }
\ No newline at end of file
diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index ed90a3d..7f41c1e 100644
--- a/src/sass/views/_read.scss
+++ b/src/sass/views/_read.scss
@@ -101,27 +101,10 @@
             transform: translateY(-50%);
             vertical-align: middle;
             text-align: center;
-
-            .spinner {
-                font-size: 2em;
-                margin-right: 0.2em;
-                vertical-align: middle;
-
-                // todo: outsource component
-                display: inline-block;
-                height: 1em;
-                width: 1em;
-                animation: rotation .6s linear infinite;
-                border-left: 0.17em solid $color-grey-light;
-                border-right: 0.17em solid $color-grey-light;
-                border-bottom: 0.17em solid $color-grey-light;
-                border-top: 0.17em solid $color-grey;
-                border-radius: 100%;
-            }
+            font-size: 2em;
 
             strong {
                 color: $color-grey-input;
-                font-size: 2em;
                 vertical-align: middle;
             }
         }