121 lines
2.4 KiB
Vue
121 lines
2.4 KiB
Vue
<template>
|
|
<div class="alert-banner w-full fixed left-0">
|
|
<input
|
|
type="checkbox"
|
|
class="hidden"
|
|
id="banneralert"
|
|
v-model="bannerChecked"
|
|
@click="linkCopied"
|
|
/>
|
|
|
|
<label
|
|
class="
|
|
close
|
|
cursor-pointer
|
|
flex
|
|
items-center
|
|
justify-between
|
|
w-full
|
|
p-2
|
|
bg-gray-500
|
|
shadow
|
|
text-white
|
|
"
|
|
title="close"
|
|
for="banneralert"
|
|
>
|
|
Link Copied!
|
|
|
|
<svg
|
|
class="fill-current text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
|
|
></path>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bannerChecked: false,
|
|
};
|
|
},
|
|
methods: {
|
|
linkCopied() {
|
|
this.$emit("clicked", this.bannerChecked);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/*Banner open/load animation*/
|
|
.alert-banner {
|
|
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
top: 75px;
|
|
}
|
|
|
|
/*Banner close animation*/
|
|
.alert-banner input:checked ~ * {
|
|
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
|
|
both;
|
|
animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
|
|
}
|
|
|
|
@-webkit-keyframes slide-in-top {
|
|
0% {
|
|
-webkit-transform: translateY(-1000px);
|
|
transform: translateY(-1000px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes slide-in-top {
|
|
0% {
|
|
-webkit-transform: translateY(-1000px);
|
|
transform: translateY(-1000px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes slide-out-top {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-1000px);
|
|
transform: translateY(-1000px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes slide-out-top {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-1000px);
|
|
transform: translateY(-1000px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |