<template lang="pug">
    .add-card(@click='onClick')
        i.fa.fa-plus(aria-hidden='true')
</template>

<script>
    export default {
        methods: {
            onClick(e) {
                this.$emit('onClickAdd')
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'

    .add-card
        width: 130px
        height: 160px
        margin: 5px
        border: 1px solid $app-border-color
        display: inline-block
        position: relative
        &:hover
            cursor: pointer
        i
            font-size: 36pt
            margin: 0
            border: none
            position: absolute;
            top: 50%
            left: 50%
            margin-right: -50%
            transform: translate(-50%, -50%)
            color: $app-main-color
</style>