103 lines
No EOL
1.7 KiB
Vue
103 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<div class="notify" :class="notifyClasses">
|
|
<div><slot></slot></div>
|
|
<component
|
|
:is="iconComponent"
|
|
weight="regular"
|
|
size="24"
|
|
class="icon-notify"
|
|
:class="notifyIconClasses"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IconButton from "@/components/UI/IconButton.vue";
|
|
|
|
export default{
|
|
name: "NotificationBar",
|
|
components: {IconButton},
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
variant: {
|
|
type: String,
|
|
required: true,
|
|
validator: v => ['primary', 'secondary', 'exception'].includes(v),
|
|
}
|
|
},
|
|
computed: {
|
|
notifyClasses() {
|
|
return [
|
|
`notify--${this.variant}`
|
|
]
|
|
},
|
|
notifyIconClasses() {
|
|
return [
|
|
`icon-notify--${this.variant}`
|
|
]
|
|
},
|
|
iconComponent() {
|
|
const iconName = this.icon.charAt(0).toUpperCase() + this.icon.slice(1)
|
|
return `Ph${iconName}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.notify {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
background-color: #f5f5f5;
|
|
justify-content: space-between;
|
|
border-radius: 8px;
|
|
padding: 6px 12px;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
height: 36px;
|
|
}
|
|
|
|
.notify--primary {
|
|
background-color: #5AF0B4;
|
|
color: #002F54;
|
|
}
|
|
|
|
.notify--secondary {
|
|
background-color: #002F54;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.notify--exception{
|
|
background-color: #BC2B72;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.icon-notify {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in-out;
|
|
color: #002F54;
|
|
}
|
|
|
|
.icon-notify:hover, .icon-notify:active {
|
|
cursor: pointer;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.icon-notify--primary {
|
|
color: #002F54;
|
|
}
|
|
|
|
.icon-notify--secondary {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.icon-notify--exception{
|
|
color: #ffffff;
|
|
}
|
|
|
|
</style> |