Skip to content

Commit 3798283

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for Time Conductor v2
Fixes #933 New _animations scss include, moved scss around.
1 parent 8c5538e commit 3798283

File tree

3 files changed

+91
-92
lines changed

3 files changed

+91
-92
lines changed

‎platform/commonUI/general/res/sass/_animations.scss

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@include keyframes(rotation) {
2+
100% { @include transform(rotate(360deg)); }
3+
}
4+
5+
@include keyframes(rotation-centered) {
6+
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
7+
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
8+
}
9+
10+
@include keyframes(clock-hands) {
11+
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
12+
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
13+
}
14+
15+
@include keyframes(clock-hands-sticky) {
16+
0% {
17+
@include transform(translate(-50%, -50%) rotate(0deg));
18+
}
19+
7% {
20+
@include transform(translate(-50%, -50%) rotate(0deg));
21+
}
22+
8% {
23+
@include transform(translate(-50%, -50%) rotate(30deg));
24+
}
25+
15% {
26+
@include transform(translate(-50%, -50%) rotate(30deg));
27+
}
28+
16% {
29+
@include transform(translate(-50%, -50%) rotate(60deg));
30+
}
31+
24% {
32+
@include transform(translate(-50%, -50%) rotate(60deg));
33+
}
34+
25% {
35+
@include transform(translate(-50%, -50%) rotate(90deg));
36+
}
37+
32% {
38+
@include transform(translate(-50%, -50%) rotate(90deg));
39+
}
40+
33% {
41+
@include transform(translate(-50%, -50%) rotate(120deg));
42+
}
43+
40% {
44+
@include transform(translate(-50%, -50%) rotate(120deg));
45+
}
46+
41% {
47+
@include transform(translate(-50%, -50%) rotate(150deg));
48+
}
49+
49% {
50+
@include transform(translate(-50%, -50%) rotate(150deg));
51+
}
52+
50% {
53+
@include transform(translate(-50%, -50%) rotate(180deg));
54+
}
55+
57% {
56+
@include transform(translate(-50%, -50%) rotate(180deg));
57+
}
58+
58% {
59+
@include transform(translate(-50%, -50%) rotate(210deg));
60+
}
61+
65% {
62+
@include transform(translate(-50%, -50%) rotate(210deg));
63+
}
64+
66% {
65+
@include transform(translate(-50%, -50%) rotate(240deg));
66+
}
67+
74% {
68+
@include transform(translate(-50%, -50%) rotate(240deg));
69+
}
70+
75% {
71+
@include transform(translate(-50%, -50%) rotate(270deg));
72+
}
73+
82% {
74+
@include transform(translate(-50%, -50%) rotate(270deg));
75+
}
76+
83% {
77+
@include transform(translate(-50%, -50%) rotate(300deg));
78+
}
79+
90% {
80+
@include transform(translate(-50%, -50%) rotate(300deg));
81+
}
82+
91% {
83+
@include transform(translate(-50%, -50%) rotate(330deg));
84+
}
85+
99% {
86+
@include transform(translate(-50%, -50%) rotate(330deg));
87+
}
88+
100% {
89+
@include transform(translate(-50%, -50%) rotate(360deg));
90+
}
91+
}

‎platform/commonUI/general/res/sass/controls/_time-conductor.scss

-83
Original file line numberDiff line numberDiff line change
@@ -5,89 +5,6 @@
55
}
66
}
77

8-
@include keyframes(clock-hands) {
9-
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
10-
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
11-
}
12-
13-
@include keyframes(clock-hands-sticky) {
14-
0% {
15-
@include transform(translate(-50%, -50%) rotate(0deg));
16-
}
17-
7% {
18-
@include transform(translate(-50%, -50%) rotate(0deg));
19-
}
20-
8% {
21-
@include transform(translate(-50%, -50%) rotate(30deg));
22-
}
23-
15% {
24-
@include transform(translate(-50%, -50%) rotate(30deg));
25-
}
26-
16% {
27-
@include transform(translate(-50%, -50%) rotate(60deg));
28-
}
29-
24% {
30-
@include transform(translate(-50%, -50%) rotate(60deg));
31-
}
32-
25% {
33-
@include transform(translate(-50%, -50%) rotate(90deg));
34-
}
35-
32% {
36-
@include transform(translate(-50%, -50%) rotate(90deg));
37-
}
38-
33% {
39-
@include transform(translate(-50%, -50%) rotate(120deg));
40-
}
41-
40% {
42-
@include transform(translate(-50%, -50%) rotate(120deg));
43-
}
44-
41% {
45-
@include transform(translate(-50%, -50%) rotate(150deg));
46-
}
47-
49% {
48-
@include transform(translate(-50%, -50%) rotate(150deg));
49-
}
50-
50% {
51-
@include transform(translate(-50%, -50%) rotate(180deg));
52-
}
53-
57% {
54-
@include transform(translate(-50%, -50%) rotate(180deg));
55-
}
56-
58% {
57-
@include transform(translate(-50%, -50%) rotate(210deg));
58-
}
59-
65% {
60-
@include transform(translate(-50%, -50%) rotate(210deg));
61-
}
62-
66% {
63-
@include transform(translate(-50%, -50%) rotate(240deg));
64-
}
65-
74% {
66-
@include transform(translate(-50%, -50%) rotate(240deg));
67-
}
68-
75% {
69-
@include transform(translate(-50%, -50%) rotate(270deg));
70-
}
71-
82% {
72-
@include transform(translate(-50%, -50%) rotate(270deg));
73-
}
74-
83% {
75-
@include transform(translate(-50%, -50%) rotate(300deg));
76-
}
77-
90% {
78-
@include transform(translate(-50%, -50%) rotate(300deg));
79-
}
80-
91% {
81-
@include transform(translate(-50%, -50%) rotate(330deg));
82-
}
83-
99% {
84-
@include transform(translate(-50%, -50%) rotate(330deg));
85-
}
86-
100% {
87-
@include transform(translate(-50%, -50%) rotate(360deg));
88-
}
89-
}
90-
918
.l-time-conductor-holder {
929
$minW: 500px;
9310
border-top: 1px solid $colorInteriorBorder;

‎platform/commonUI/general/res/sass/helpers/_wait-spinner.scss

-9
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,6 @@
1919
* this source code distribution or the Licensing information page available
2020
* at runtime from the About dialog for additional information.
2121
*****************************************************************************/
22-
@include keyframes(rotation) {
23-
100% { @include transform(rotate(360deg)); }
24-
}
25-
26-
@include keyframes(rotation-centered) {
27-
0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
28-
100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
29-
}
30-
3122
@mixin spinner($b: 5px, $c: $colorKey) {
3223
@include transform-origin(center);
3324
@include animation-name(rotation-centered);

0 commit comments

Comments
 (0)