56 lines
1.0 KiB
Vue
56 lines
1.0 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h2>{{title}}</h2>
|
|
</div>
|
|
<div v-if="buttons" class="header">
|
|
<slot name="buttons"></slot>
|
|
</div>
|
|
<div class="content">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<div class="footer">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: [
|
|
'title',
|
|
'buttons'
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
color: var(--grey-dark);
|
|
background-color: var(--white-normal);
|
|
border: 1px solid var(--grey-light);
|
|
border-radius: 4px;
|
|
box-shadow: 8px 8px 20px #00000022;
|
|
}
|
|
|
|
.content {
|
|
padding: 12px;
|
|
}
|
|
|
|
.header, .footer {
|
|
padding: 0px 12px;
|
|
}
|
|
|
|
.header h2 {
|
|
padding: 8px 0;
|
|
color: var(--primary-blue-dark);
|
|
}
|
|
|
|
.header { border-bottom: 1px solid var(--grey-light); }
|
|
.footer { border-top: 1px solid var(--grey-light); }
|
|
|
|
|
|
|
|
|
|
|
|
</style> |