From de6b8ee9b3a8c3ed4f8d78ec972c459eecf7bb76 Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Mon, 30 Sep 2013 15:02:51 +0100
Subject: [PATCH] Refactored loading bar SCSS

---
 .../assets/sass/modules/animations.scss       |  18 +++
 core/client/assets/sass/modules/global.scss   | 137 +-----------------
 2 files changed, 21 insertions(+), 134 deletions(-)

diff --git a/core/client/assets/sass/modules/animations.scss b/core/client/assets/sass/modules/animations.scss
index b9fb4e8a79..dc82171fe6 100644
--- a/core/client/assets/sass/modules/animations.scss
+++ b/core/client/assets/sass/modules/animations.scss
@@ -37,3 +37,21 @@
     }
 }
 
+@include keyframes(shift-rightwards) {
+    0% {
+        @include transform(translateX(-100%));
+    }
+
+    40% {
+        @include transform(translateX(0%));
+    }
+
+    60% {
+        @include transform(translateX(0%));
+    }
+
+    100% {
+        @include transform(translateX(100%));
+    }
+}
+
diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss
index 6200b99358..18038e3426 100644
--- a/core/client/assets/sass/modules/global.scss
+++ b/core/client/assets/sass/modules/global.scss
@@ -988,15 +988,8 @@ nav {
 
 .js-loading .loading-bar {
     display: block;
-    -webkit-animation:  shift-rightwards 1.5s ease-in-out infinite;
-    -moz-animation:     shift-rightwards 1.5s ease-in-out infinite;
-    -ms-animation:      shift-rightwards 1.5s ease-in-out infinite;
-    -o-animation:       shift-rightwards 1.5s ease-in-out infinite;
-    animation:          shift-rightwards 1.5s ease-in-out infinite;
-    -webkit-animation-delay:    0.4s;
-    -moz-animation-delay:       0.4s;
-    -o-animation-delay:         0.4s;
-    animation-delay:            0.4s;
+    @include animation(shift-rightwards 1.5s ease-in-out infinite);
+    @include animation-delay(0.4s);
 }
 
 .loading-bar {
@@ -1008,133 +1001,9 @@ nav {
     height: 2px;
     z-index: 900;
     background: $blue;
-    -webkit-transform:  translateX(100%);
-    -moz-transform:     translateX(100%);
-    -o-transform:       translateX(100%);
-    transform:          translateX(100%);
+    @include transform(translateX(100%));
 }
 
-@-webkit-keyframes shift-rightwards {
-    0% {
-        -webkit-transform:  translateX(-100%);
-        -moz-transform:     translateX(-100%);
-        -o-transform:       translateX(-100%);
-        transform:          translateX(-100%);
-    }
-
-    40% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    60% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    100% {
-        -webkit-transform:  translateX(100%);
-        -moz-transform:     translateX(100%);
-        -o-transform:       translateX(100%);
-        transform:          translateX(100%);
-    }
-
-}
-@-moz-keyframes shift-rightwards {
-    0% {
-        -webkit-transform:  translateX(-100%);
-        -moz-transform:     translateX(-100%);
-        -o-transform:       translateX(-100%);
-        transform:          translateX(-100%);
-    }
-
-    40% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    60% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    100% {
-        -webkit-transform:  translateX(100%);
-        -moz-transform:     translateX(100%);
-        -o-transform:       translateX(100%);
-        transform:          translateX(100%);
-    }
-
-}
-@-o-keyframes shift-rightwards {
-    0% {
-        -webkit-transform:  translateX(-100%);
-        -moz-transform:     translateX(-100%);
-        -o-transform:       translateX(-100%);
-        transform:          translateX(-100%);
-    }
-
-    40% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    60% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    100% {
-        -webkit-transform:  translateX(100%);
-        -moz-transform:     translateX(100%);
-        -o-transform:       translateX(100%);
-        transform:          translateX(100%);
-    }
-
-}
-@keyframes shift-rightwards {
-    0% {
-        -webkit-transform:  translateX(-100%);
-        -moz-transform:     translateX(-100%);
-        -o-transform:       translateX(-100%);
-        transform:          translateX(-100%);
-    }
-
-    40% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    60% {
-        -webkit-transform:  translateX(0%);
-        -moz-transform:     translateX(0%);
-        -o-transform:       translateX(0%);
-        transform:          translateX(0%);
-    }
-
-    100% {
-        -webkit-transform:  translateX(100%);
-        -moz-transform:     translateX(100%);
-        -o-transform:       translateX(100%);
-        transform:          translateX(100%);
-    }
-}
-
-
 /* ==========================================================================
    Modals
    ========================================================================== */