git.iko.soy/bridge
on df0c310 help sign in
bridge/src/style/master-key.scss
37 lines 631 B history raw
1@keyframes opacity-fill {
2 0% {
3 fill-opacity: 0.2;
4 }
5 100% {
6 fill-opacity: 1.0;
7 }
8}
10@mixin generate-progress-fill($numSegments, $duration: 150ms, $delayDelta: 50ms) {
11 @for $i from 1 through $numSegments {
12 .segment-#{$i} {
13 animation: opacity-fill $duration linear forwards;
14 animation-delay: $delayDelta * $i;
15 }
16 }
19svg.master-key {
20 height: 44px;
21 margin: 107px 0;
22 // Initial state
23 path {
24 fill-opacity: 0.2;
25 }
27 // Animations
28 @include generate-progress-fill(18);
30 &.paused g {
31 animation-play-state: paused;
32 }
34 &.paused path {
35 animation-play-state: paused;
36 }