willaengine/resources/js/Global/components/Tiles/Back-Tile.vue

<template>
    <a v-if="href" :href="'/' + href" :class="`back-button fade-in fast ${theme} `" style="animation-delay: 0.1s;">
        <div class="tile" :style="'background-image: linear-gradient(to right, #'+gradientBegin+' , #'+gradientEnd+'); '">
            <v-icon> WMi-right-open</v-icon>
        </div>
    </a>
    <router-link v-else :to="{ name: URL }"  :class="`back-button fade-in fast ${theme} `" style="animation-delay: 0.1s;">
        <div class="tile" :style="'background-image: linear-gradient(to right, #'+gradientBegin+' , #'+gradientEnd+'); '">
            <v-icon> WMi-right-open</v-icon>
        </div>
    </router-link>
</template>
s
<script>
export default {
    props: {
        URL: { default: "Home" },
        href: { default: null },
        gradientBegin: { default: "eeeeee" },
        gradientEnd: { default: "dadada" },
        theme: { default: "light" },
    },

};
</script>

<style scoped lang="scss">
    .back-button {
        display: block;
        width: 110px;
        height: 100%;
        position: absolute;
        padding: 5px;
        right: 0px;
        top: 0px;
        border: 1px solid transparent;
        transition: 0.2s;
    }
    .back-button:hover {
        border: 1px solid #6d6d6d;
        border-radius: 5px;
        -webkit-filter: grayscale(100%);
    }
    .back-button .tile {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
    }
    .back-button .tile .v-icon {
        font-size: 40px;
    }
    .back-button.theme-dark .tile .v-icon {
        color: #fff;
    }
    .back-button.theme-dark .tile .v-icon {
        color: #fff;
    }


    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .back-button.theme-#{$color} .tile .v-icon {
            color: $value;
        }
    }


</style>