ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 06:03:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for Time Conductor v2

Browse Source 
Fixes #933
"Sticky" clock anim for LAD mode
This commit is contained in:
Charles Hacskaylo 2016-07-14 14:58:18 -07:00
parent 8b694ef337
commit 8c5538ec4d
1 changed files with 80 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
platform/commonUI/general/res/sass/controls/_time-conductor.scss
View File

@ -6,9 +6,83 @@
} }
@include keyframes(clock-hands) { @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% { 0% {
@include transform(translate(-50%, -50%) rotate(0deg)); @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% { 100% {
@include transform(translate(-50%, -50%) rotate(360deg)); @include transform(translate(-50%, -50%) rotate(360deg));
} }
@ -258,12 +332,12 @@
} }
} }
/* .l-time-conductor-ticks .l-axis-holder { &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
svg { &.latest-mode .time-conductor-icon div[class*="hand"] {
line { color: $colorTimeCondKeyBg; }; @include animation-name(clock-hands-sticky);
text { fill: $colorTimeCondKeyBg; } &.hand-big { @include animation-duration(5s); }
} &.hand-little { @include animation-duration(60s); }
}*/ }
.l-data-visualization { .l-data-visualization {
background: $colorTimeCondDataVisRtBg !important background: $colorTimeCondDataVisRtBg !important