119 lines
2.6 KiB
Vue
119 lines
2.6 KiB
Vue
<template>
|
|
<div class="toast" :class="type">
|
|
<div class="icon"></div>
|
|
<p><slot></slot></p>
|
|
<div class="close" v-if="!auto_close" @click="close()"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: [
|
|
'type',
|
|
'auto_close'
|
|
],
|
|
data(){
|
|
return {}
|
|
},
|
|
methods: {
|
|
close(){
|
|
this.$destroy();
|
|
this.$el.parentNode.removeChild(this.$el);
|
|
}
|
|
},
|
|
mounted(){
|
|
if(this.auto_close){
|
|
setTimeout(this.close, this.auto_close);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
div.toast {
|
|
display: flex;
|
|
align-items: stretch;
|
|
align-content: space-between;
|
|
justify-items: stretch;
|
|
justify-content: space-between;
|
|
|
|
padding: 16px;
|
|
margin: 8px;
|
|
color: var(--info);
|
|
background-color: var(--info-light);
|
|
border-left: 8px solid var(--info);
|
|
|
|
}
|
|
|
|
div.toast p {
|
|
flex: 1;
|
|
margin: 0 24px;
|
|
vertical-align: middle;
|
|
line-height: 24px;
|
|
text-align: left;
|
|
justify-self: flex-start;
|
|
color: inherit;
|
|
}
|
|
|
|
div.icon {
|
|
flex: 0 0 24px;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask: url('../assets/icons/info-24px.svg');
|
|
width: 24px;
|
|
height: 24px;
|
|
transform: scale(1.2);
|
|
background: var(--info);
|
|
}
|
|
|
|
|
|
div.close {
|
|
background: black;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask: url('../assets/icons/close-24px.svg');
|
|
float: right;
|
|
width: 24px;
|
|
height: 24px;
|
|
transform: scale(0.6);
|
|
background: var(--grey);
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.close:hover{
|
|
background: var(--primary-blue-dark);
|
|
}
|
|
|
|
div.toast.warn {
|
|
color: var(--warn);
|
|
background-color: var(--warn-light);
|
|
border-color: var(--warn);
|
|
}
|
|
div.toast.warn .icon {
|
|
mask: url('../assets/icons/warning-24px.svg');
|
|
background: var(--warn);
|
|
}
|
|
|
|
div.toast.error {
|
|
color: var(--error);
|
|
background-color: var(--error-light);
|
|
border-color: var(--error);
|
|
}
|
|
div.toast.error .icon {
|
|
mask: url('../assets/icons/error_outline-24px.svg');
|
|
background: var(--error);
|
|
}
|
|
|
|
div.toast.success {
|
|
color: var(--success);
|
|
background-color: var(--success-light);
|
|
border-color: var(--success);
|
|
}
|
|
div.toast.success .icon {
|
|
mask: url('../assets/icons/check_circle_outline-24px.svg');
|
|
background: var(--success);
|
|
}
|
|
</style> |