92 lines
1.5 KiB
Vue
92 lines
1.5 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import type {PropType} from "vue";
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
"title": {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
"type": {
|
||
|
|
type: String as PropType<'warn' | 'info' | 'success'>,
|
||
|
|
default: 'info'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<aside :class="'toaster ' + type">
|
||
|
|
<div class="toaster-content">
|
||
|
|
<div class="toaster-content-title">{{ title }}</div>
|
||
|
|
<div class="toaster-content-body">
|
||
|
|
<slot/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
.toaster {
|
||
|
|
display: flex;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 50%;
|
||
|
|
translate: -50% 0;
|
||
|
|
padding: $medium $medium $xx_small;
|
||
|
|
gap: $xxx_small;
|
||
|
|
|
||
|
|
border-radius: 0 0 16px 16px;
|
||
|
|
|
||
|
|
animation-name: fadeInRight;
|
||
|
|
animation-duration: 300ms;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
|
||
|
|
@include border-shadow();
|
||
|
|
|
||
|
|
&.info {
|
||
|
|
color: $info_text;
|
||
|
|
background: $info_background;
|
||
|
|
}
|
||
|
|
&.warn {
|
||
|
|
color: $warn_text;
|
||
|
|
background: $warn_background;
|
||
|
|
}
|
||
|
|
&.success {
|
||
|
|
color: $success_text;
|
||
|
|
background: $success_background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInRight {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate3d(0, -100%, 0);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.toaster-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: $xxx_small;
|
||
|
|
|
||
|
|
font-size: $small-font-size;
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toaster-content-title {
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 120%;
|
||
|
|
font-size: $tertiary-font-size;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toaster-content-body {
|
||
|
|
line-height: 150%;
|
||
|
|
}
|
||
|
|
</style>
|