46 lines
860 B
Vue
46 lines
860 B
Vue
<script lang="ts" setup>
|
|
import { CancelButton } from 'components/button';
|
|
|
|
defineProps<{
|
|
title: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dialog-header-container">
|
|
<slot name="before" />
|
|
<div class="dialog-header-main">
|
|
<slot name="title-before" />
|
|
{{ title }}
|
|
<slot name="title-after" />
|
|
</div>
|
|
<slot name="after">
|
|
<CancelButton id="btn-form-close" icon-only v-close-popup />
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dialog-header-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dialog-header-main {
|
|
flex: 1;
|
|
font-weight: bolder;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dialog-header-close {
|
|
color: hsl(var(--negative-bg));
|
|
margin-left: auto;
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
}
|
|
}
|
|
</style>
|