134 lines
2.5 KiB
Vue
Executable File
134 lines
2.5 KiB
Vue
Executable File
<script lang="ts" setup>
|
|
import type {PropType} from "vue";
|
|
|
|
const props = defineProps({
|
|
label: String,
|
|
cardType: String as PropType<'Error' | 'Informative' | 'Success' | 'Warning'>,
|
|
time: Number,
|
|
text: String,
|
|
})
|
|
|
|
const notificationBoxClass = computed(() => ({
|
|
'Notification-Box': true,
|
|
'Notification-Box-Error': props.cardType === 'Error',
|
|
'Notification-Box-Informative': props.cardType === 'Informative',
|
|
'Notification-Box-Success': props.cardType === 'Success',
|
|
'Notification-Box-Warning': props.cardType === 'Warning'
|
|
}));
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="notificationBoxClass">
|
|
<div class="Icon">
|
|
<NuxtImg v-if="cardType==='Success'" src="/Success.svg" width="24"></NuxtImg>
|
|
<NuxtImg v-if="cardType==='Informative'" src="/Informative.svg" width="24"></NuxtImg>
|
|
<NuxtImg v-if="cardType==='Warning'" src="/Warning.svg" width="24"></NuxtImg>
|
|
<NuxtImg v-if="cardType==='Error'" src="/Error.svg" width="24"></NuxtImg>
|
|
</div>
|
|
<div class="Text">
|
|
<h3>{{ label }}</h3>
|
|
<p>{{ text }}</p>
|
|
</div>
|
|
<Icon :stroke-width="1.2" name="X"></Icon>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "base";
|
|
|
|
.Notification-Box {
|
|
padding: $padding;
|
|
display: grid;
|
|
grid-template-columns: 24px 1fr 18px;
|
|
gap: $gap*2;
|
|
grid-template-rows: 1fr;
|
|
border-radius: 12px;
|
|
|
|
> svg {
|
|
stroke: #979FA9;
|
|
|
|
.dark-mode & {
|
|
stroke: #FFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Icon {
|
|
.dark-mode & {
|
|
filter: grayscale(30%) brightness(100%);
|
|
}
|
|
}
|
|
|
|
.Text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap*.5;
|
|
|
|
.dark-mode & {
|
|
> h3, p {
|
|
color: #FFF;
|
|
}
|
|
|
|
}
|
|
|
|
> h3 {
|
|
color: #27303A;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 140%; /* 19.6px */
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
> p {
|
|
color: #2F3F53;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 160%; /* 19.2px */
|
|
}
|
|
}
|
|
|
|
|
|
.Notification-Box-Success {
|
|
border: 1.3px solid #48C1B5;
|
|
background: #F6FFF9;
|
|
|
|
.dark-mode & {
|
|
border: 1.3px solid #43D590;
|
|
background: unset;
|
|
}
|
|
|
|
}
|
|
|
|
.Notification-Box-Informative {
|
|
|
|
border: 1.3px solid #9DC0EE;
|
|
background: #F5F9FF;
|
|
|
|
.dark-mode & {
|
|
border: 1.3px solid #7BCFED;
|
|
background: unset;
|
|
}
|
|
}
|
|
|
|
.Notification-Box-Warning {
|
|
border: 1.3px solid #F7D9A4;
|
|
background: #FFF8EC;
|
|
|
|
.dark-mode & {
|
|
border: 1.3px solid #FFDF8D;
|
|
background: unset;
|
|
}
|
|
}
|
|
|
|
.Notification-Box-Error {
|
|
border: 1.3px solid #F4B0A1;
|
|
background: #FFF5F3;
|
|
|
|
.dark-mode & {
|
|
border: 1.3px solid #F0863A;
|
|
background: unset;
|
|
}
|
|
}
|
|
</style> |