woodpecker/web/src/components/repo/pipeline/PipelineRunningIcon.vue
Epsilon_02 b417edf8c1
Fix cut of woodpecker animation (#1402)
the woodpecker svg was cut on top and bottom when moving during an active pipeline.
2022-11-06 21:00:28 +01:00

33 lines
617 B
Vue

<template>
<WoodpeckerIcon class="woodpecker h-20" />
</template>
<script lang="ts" setup>
import WoodpeckerIcon from '../../../assets/woodpecker.svg?component';
</script>
<style scoped>
@keyframes peck {
0% {
transform: rotate(5deg) translateX(5%);
}
10% {
transform: rotate(-5deg) translateX(-15%);
}
20% {
transform: rotate(5deg) translateX(5%);
}
30% {
transform: rotate(-5deg) translateX(-15%);
}
100% {
transform: rotate(5deg) translateX(5%);
}
}
.woodpecker ::v-deep(path) {
animation: peck 1s ease infinite;
@apply fill-gray-600 dark:fill-gray-500;
}
</style>