94 lines
1.6 KiB
Vue
94 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps(['data']);
|
|
</script>
|
|
|
|
<template>
|
|
<div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
|
|
<p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
|
|
<p>{{data.errorMessage}}</p>
|
|
<div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.error-modal{
|
|
margin-bottom: 1em;
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
animation: disappear 5s linear forwards;
|
|
}
|
|
|
|
.red{
|
|
background-color: #ee6055;
|
|
color: white;
|
|
}
|
|
.red-loader {
|
|
background-color: #fa8383;
|
|
}
|
|
|
|
.yellow{
|
|
background-color: #FF9D23;
|
|
color: white;
|
|
}
|
|
.yellow-loader{
|
|
background-color: #ffbf81;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #809bce;
|
|
color: white;
|
|
}
|
|
.blue-loader{
|
|
background-color: #95b8d1;
|
|
}
|
|
|
|
.green {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
.green-loader {
|
|
background-color: darkgreen;
|
|
}
|
|
|
|
.loading {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
padding: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 1em;
|
|
width: 0;
|
|
animation: loading 4s linear forwards;
|
|
}
|
|
|
|
/* Animation for the loading bar */
|
|
@keyframes loading {
|
|
0% {
|
|
width: 100%;
|
|
}
|
|
100% {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes disappear {
|
|
0% {
|
|
height: 100px;
|
|
padding: 1em;
|
|
margin: 1em;
|
|
}
|
|
80% {
|
|
height: 100px;
|
|
padding: 1em;
|
|
margin: 1em;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style> |