73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<template>
|
|
<div class="flex row items-center no-wrap logo-component">
|
|
<LogoIcon
|
|
v-bind="$attrs"
|
|
class="logo-svg"
|
|
:class="{
|
|
'is-animated': animated,
|
|
'hide-bg': !withBackground
|
|
}"
|
|
:style="{ color: iconColor }"
|
|
/>
|
|
|
|
<div :class="'text-' + textColor" class="logo-text q-ml-xs">
|
|
<span>tg</span>
|
|
<span class="text-bold">Crew</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import LogoIcon from 'components/BaseLogoSvg.vue'
|
|
interface Props {
|
|
textColor?: string
|
|
iconColor?: string
|
|
withBackground?: boolean
|
|
animated?: boolean
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
textColor: 'brand',
|
|
iconColor: 'white',
|
|
withBackground: true,
|
|
animated: true
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.logo-svg {
|
|
height: 24px;
|
|
width: 24px;
|
|
|
|
:deep(.logo-bg) {
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
&.hide-bg :deep(.logo-bg) {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.x), :deep(.c) {
|
|
transform-box: fill-box;
|
|
}
|
|
|
|
&.is-animated {
|
|
:deep(.x) { animation: expand-r 6s ease-in-out infinite; }
|
|
:deep(.c) { animation: o 6s ease-in-out infinite; }
|
|
:deep(.l) {
|
|
stroke-dasharray: 1;
|
|
stroke-dashoffset: 1;
|
|
stroke-width: 1.5;
|
|
animation: draw 6s ease-in-out infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes expand-r { 50% { r: 8px; } }
|
|
@keyframes o { 50% { transform: var(--t); } }
|
|
@keyframes draw {
|
|
0%, 100% { stroke-dashoffset: 0; }
|
|
50% { stroke-dashoffset: 1; }
|
|
}
|
|
</style>
|