74 lines
1.0 KiB
Vue
74 lines
1.0 KiB
Vue
<template>
|
|
<div class="wrapper"
|
|
@click.stop="$emit('navClick')"
|
|
>
|
|
<div class="svg-container"
|
|
:class="{ 'is-reversed': direction === 'right' }"
|
|
>
|
|
<SVGIcon class="svg-icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SVGIcon from '@/assets/svg/chevron-left.svg'
|
|
|
|
export default {
|
|
components: {
|
|
SVGIcon,
|
|
},
|
|
|
|
props: {
|
|
direction: {
|
|
type: String,
|
|
default: function () {
|
|
return 'right'
|
|
}
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.wrapper {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.svg-container {
|
|
transition: opacity .3s, transform .5s;
|
|
opacity: .4;
|
|
transform: none;
|
|
|
|
@at-root .wrapper:hover & {
|
|
opacity: .6;
|
|
transform: translate3d(-3px, 0, 0);
|
|
}
|
|
|
|
@at-root .wrapper:hover &.is-reversed {
|
|
transform: translate3d(3px, 0, 0);
|
|
}
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 100%;
|
|
min-width: 4rem;
|
|
height: 100%;
|
|
min-height: 4rem;
|
|
overflow: visible;
|
|
}
|
|
|
|
.is-reversed .svg-icon {
|
|
transform: scaleX(-1);
|
|
}
|
|
</style>
|