[Frontend] Styling for Time Conductor v2

Fixes #933 New _animations scss include, moved scss around.
nasa · Jul 14, 2016 · 3798283 · 3798283
1 parent 8c5538e
commit 3798283
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 92 deletions.
diff --git a/platform/commonUI/general/res/sass/_animations.scss 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));
+    }
+}
diff --git 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
@@ -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);