You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.9 KiB
74 lines
1.9 KiB
<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>
|