<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>