From b1d29476c52f3fc5395dd453aa63062ead0032f6 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Tue, 8 May 2018 08:33:13 +1000
Subject: [PATCH] Made loader animation, missing animation mixins.

---
 public/styles/objects/_loader.scss  | 29 +++++++++++++++++++++++------
 public/styles/settings/colors.scss  |  2 +-
 public/styles/tools/_animation.scss | 25 +++++++++++++++++--------
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/public/styles/objects/_loader.scss b/public/styles/objects/_loader.scss
index 32ac142..2baf879 100644
--- a/public/styles/objects/_loader.scss
+++ b/public/styles/objects/_loader.scss
@@ -3,15 +3,30 @@
  *    Styles for the animated loader.
  *
  *  Dependencies:
+ *    styles/settings/animation.scss
+ *    styles/tools/_animation.scss
  *    styles/tools/_transform.scss
  *
  *  Version:
  *    1.0.0 - 2018/05/08
  */
+
+@include t-keyframes(o-loader--spin) {
+  0% {
+    @include t-rotate(0deg);
+  }
+
+  100% {
+    @include t-rotate(360deg);
+  }
+}
+
 .o-loader {
   display: block;
-  width: 32px;
-  height: 32px;
+  width: 64px;
+  height: 64px;
+  max-width: 100%;
+  max-height: 100%;
 
   position: absolute;
   left: 50%;
@@ -19,12 +34,14 @@
   @include t-translate(-50%, -50%);
 
   &__image {
-    animation-name: k-loader;
-    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-    animation-iteration-count: infinite;
-    animation-duration: 1s;
+    @include t-animation-name(o-loader--spin);
+    @include t-animation-iteration-count(infinite);
+    @include t-animation-timing-function($s-animation--ease-in-out);
+    @include t-animation-duration(0.75s);
+
     width: 100%;
     height: 100%;
+
     > * {
       stroke: $s-color--loader;
     }
diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss
index c2d41a2..2411055 100644
--- a/public/styles/settings/colors.scss
+++ b/public/styles/settings/colors.scss
@@ -32,4 +32,4 @@ $s-color--navbar__bar-hover: $s-color--pastel-blue;
 $s-color--navbar__bar-active: $s-color--pastel-green;
 
 //loader
-$s-color--loader: #CCC;
+$s-color--loader: $s-color--swatch-blue;
diff --git a/public/styles/tools/_animation.scss b/public/styles/tools/_animation.scss
index 5706bc5..4b99b90 100644
--- a/public/styles/tools/_animation.scss
+++ b/public/styles/tools/_animation.scss
@@ -23,17 +23,26 @@
   }
 }
 
-@mixin t-animation-name($animation_name) {
-  @include t-prefix-property("animation-name", $animation_name, webkit moz spec);
+@mixin t-animation-name($name) {
+  @include t-prefix-property("animation-name", $name, webkit moz spec);
 }
 
-@mixin t-animation-delay($animation_name) {
-  @include t-prefix-property("animation-delay", $animation_name, webkit moz spec);
+@mixin t-animation-delay($delay) {
+  @include t-prefix-property("animation-delay", $delay, webkit moz spec);
 }
 
-@mixin t-animation-duration($animation_name) {
-  @include t-prefix-property("animation-duration", $animation_name, webkit moz spec);
+@mixin t-animation-duration($duration) {
+  @include t-prefix-property("animation-duration", $duration, webkit moz spec);
 }
-@mixin t-animation-fill-mode($animation_name) {
-  @include t-prefix-property("animation-fill-mode", $animation_name, webkit moz spec);
+
+@mixin t-animation-fill-mode($fills) {
+  @include t-prefix-property("animation-fill-mode", $fills, webkit moz spec);
+}
+
+@mixin t-animation-iteration-count($iterations) {
+  @include t-prefix-property("animation-iteration-count", $iterations, webkit moz spec);
+}
+
+@mixin t-animation-timing-function($bezier) {
+  @include t-prefix-property("animation-timing-function", $bezier, webkit moz spec);
 }