marc-leopold/components/ThumbNav.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: .6;
  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>