<template lang="pug">
    .app
        .odoo
            img(src="/vue_module/static/img/odoo.png")
            p Odoo
        span +
        .vue
            img(src="/vue_module/static/img/vue.png")
            p Vue.js
        span +
        .webpack
            img(src="/vue_module/static/img/webpack.png")
            p Webpack
        span +
        .babel
            img(src="/vue_module/static/img/babel.png")
            p Babel
        span +
        .yarn
            img(src="/vue_module/static/img/yarn.png")
            p Yarn
        span =
            i(class="fa fa-heart")
</template>

<script>
    export default {
        methods: {
            hola() {
                console.log('Hola')
            }
        }
    }

</script>

<style lang="sass">
    =animations()
        animation: 2s heart infinite
        @keyframes heart
            0%
                transform: scale(1)
            25%
                transform: scale(1.15)
            50%
                transform: scale(1)
            75%
                transform: scale(1.15)
        @-webkit-keyframes heart
            0%
                transform: scale(1)
            25%
                transform: scale(1.15)
            50%
                transform: scale(1)
            75%
                transform: scale(1.15)
        @-moz-keyframes heart
            0%
                transform: scale(1)
            25%
                transform: scale(1.15)
            50%
                transform: scale(1)
            75%
                transform: scale(1.15)

    =hand-pointer()
        cursor: pointer
        -webkit-cursor: pointer
        -moz-cursor: pointer

    .app
        width: 100%
        height: 100%
        padding: 15px
        display: flex
        align-items: center
        justify-content: center
        div
            margin: 0 20px
            transition-duration: 0.5s
            +hand-pointer()
            img
                height: 80px
            p
                text-align: center
                font-size: 18pt
                font-weight: bold
            &:hover
                transform: scale(1.15)
        span
            font-size: 48pt
            i
                font-size: 65pt
                color: #f44336
                +animations()
</style>
