relayers-network-ui/containers/Notify/Notify.vue

74 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<notifications animation-name="v-fade-top" :class="[{ [$style.poolNotify]: !isModalExist }]">
<template slot="body" slot-scope="{ item, close }">
<toast :item="item" :close="close" :is-modal-exist="isModalExist" :check-is-modal-exist="getIsModalExist" />
</template>
</notifications>
</template>
<script>
import Toast from './Toast.vue'
export default {
components: {
Toast,
},
data: function () {
return {
isModalExist: false,
}
},
methods: {
getIsModalExist() {
const modalContainer = document.getElementById('modals-container')
this.isModalExist = Boolean(modalContainer?.childElementCount)
},
},
}
</script>
<style lang="scss">
// Style for Notify lib
.vue-notification-group {
top: 0 !important;
right: 1rem !important;
width: calc(100% - 2rem) !important;
max-width: 30rem !important;
z-index: $zIndex-7 !important;
@include media('md') {
top: 1rem !important;
right: 1.5rem !important;
}
@include media('lg') {
top: 1rem !important;
right: 1.5rem !important;
}
@include media('xl') {
right: 2rem !important;
}
}
.v-fade-top-enter-active,
.v-fade-top-leave-active,
.v-fade-top-move {
transition: all $duration-animation-05s;
}
.v-fade-top-enter,
.v-fade-top-leave-to {
opacity: $opacity-invisible;
transform: translateY(0) scale(0.2);
}
</style>
<style lang="scss" module>
.poolNotify {
position: absolute !important;
@include media('sm') {
top: 0 !important;
}
@include media('md') {
top: 6rem !important;
}
}
</style>