mirror of
https://github.com/dtomlinson91/anno-production-chain-renderer.git
synced 2025-12-22 06:15:45 +00:00
54 lines
860 B
Vue
54 lines
860 B
Vue
<template>
|
|
<q-card
|
|
flat
|
|
bordered
|
|
square
|
|
:class="[
|
|
'card-background',
|
|
'q-ma-sm',
|
|
'border',
|
|
'text-center',
|
|
calculateColBreak()
|
|
]"
|
|
>
|
|
<div v-if="!colBreak">
|
|
<q-card-section>
|
|
<div
|
|
class="text-subtitle1 text-uppercase text-center title-font q-pa-md"
|
|
>
|
|
{{ title }}
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator inset class="q-mb-lg" />
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string;
|
|
colBreak: boolean;
|
|
}>();
|
|
|
|
const calculateColBreak = () => (props.colBreak ? 'hide-item' : '');
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.border {
|
|
border: 0.1rem solid $burnt-dark;
|
|
}
|
|
|
|
.title-font {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.hide-item {
|
|
height: 0px;
|
|
border: none;
|
|
margin-bottom: -9.2px;
|
|
}
|
|
</style>
|