From 379828315f2f71f3f277c0b710b730d3b0f3bc39 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 14 Jul 2016 16:39:27 -0700
Subject: [PATCH] [Frontend] Styling for Time Conductor v2

Fixes #933
New _animations scss include, moved
scss around.
---
 .../general/res/sass/_animations.scss         | 91 +++++++++++++++++++
 .../res/sass/controls/_time-conductor.scss    | 83 -----------------
 .../res/sass/helpers/_wait-spinner.scss       |  9 --
 3 files changed, 91 insertions(+), 92 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/_animations.scss

diff --git a/platform/commonUI/general/res/sass/_animations.scss b/platform/commonUI/general/res/sass/_animations.scss
new file mode 100644
index 0000000000..fb1c0f1bfb
--- /dev/null
+++ b/platform/commonUI/general/res/sass/_animations.scss
@@ -0,0 +1,91 @@
+@include keyframes(rotation) {
+    100% { @include transform(rotate(360deg)); }
+}
+
+@include keyframes(rotation-centered) {
+    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
+}
+
+@include keyframes(clock-hands) {
+    0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg));  }
+}
+
+@include keyframes(clock-hands-sticky) {
+    0% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    7% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    8% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    15% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    16% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    24% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    25% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    32% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    33% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    40% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    41% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    49% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    50% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    57% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    58% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    65% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    66% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    74% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    75% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    82% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    83% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    90% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    91% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    99% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    100% {
+        @include transform(translate(-50%, -50%) rotate(360deg));
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
index a017262935..138a97043f 100644
--- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@@ -5,89 +5,6 @@
     }
 }
 
-@include keyframes(clock-hands) {
-    0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
-    100% { @include transform(translate(-50%, -50%) rotate(360deg));  }
-}
-
-@include keyframes(clock-hands-sticky) {
-    0% {
-        @include transform(translate(-50%, -50%) rotate(0deg));
-    }
-    7% {
-        @include transform(translate(-50%, -50%) rotate(0deg));
-    }
-    8% {
-        @include transform(translate(-50%, -50%) rotate(30deg));
-    }
-    15% {
-        @include transform(translate(-50%, -50%) rotate(30deg));
-    }
-    16% {
-        @include transform(translate(-50%, -50%) rotate(60deg));
-    }
-    24% {
-        @include transform(translate(-50%, -50%) rotate(60deg));
-    }
-    25% {
-        @include transform(translate(-50%, -50%) rotate(90deg));
-    }
-    32% {
-        @include transform(translate(-50%, -50%) rotate(90deg));
-    }
-    33% {
-        @include transform(translate(-50%, -50%) rotate(120deg));
-    }
-    40% {
-        @include transform(translate(-50%, -50%) rotate(120deg));
-    }
-    41% {
-        @include transform(translate(-50%, -50%) rotate(150deg));
-    }
-    49% {
-        @include transform(translate(-50%, -50%) rotate(150deg));
-    }
-    50% {
-        @include transform(translate(-50%, -50%) rotate(180deg));
-    }
-    57% {
-        @include transform(translate(-50%, -50%) rotate(180deg));
-    }
-    58% {
-        @include transform(translate(-50%, -50%) rotate(210deg));
-    }
-    65% {
-        @include transform(translate(-50%, -50%) rotate(210deg));
-    }
-    66% {
-        @include transform(translate(-50%, -50%) rotate(240deg));
-    }
-    74% {
-        @include transform(translate(-50%, -50%) rotate(240deg));
-    }
-    75% {
-        @include transform(translate(-50%, -50%) rotate(270deg));
-    }
-    82% {
-        @include transform(translate(-50%, -50%) rotate(270deg));
-    }
-    83% {
-        @include transform(translate(-50%, -50%) rotate(300deg));
-    }
-    90% {
-        @include transform(translate(-50%, -50%) rotate(300deg));
-    }
-    91% {
-        @include transform(translate(-50%, -50%) rotate(330deg));
-    }
-    99% {
-        @include transform(translate(-50%, -50%) rotate(330deg));
-    }
-    100% {
-        @include transform(translate(-50%, -50%) rotate(360deg));
-    }
-}
-
 .l-time-conductor-holder {
     $minW: 500px;
     border-top: 1px solid $colorInteriorBorder;
diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
index 46f94ebc53..d50b2615cc 100644
--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -19,15 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@include keyframes(rotation) {
-    100% { @include transform(rotate(360deg)); }
-}
-
-@include keyframes(rotation-centered) {
-    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
-    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
-}
-
 @mixin  spinner($b: 5px, $c: $colorKey) {
     @include transform-origin(center);
     @include animation-name(rotation-centered);