generated from cms/tibi-docs
82 lines
2.3 KiB
Svelte
82 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
export let col: Column
|
|
export let opened = -1
|
|
</script>
|
|
|
|
<div class="boxes">
|
|
{#each col.extendableBoxes as box, i}
|
|
<div class="box" class:opened="{i == opened}">
|
|
<div
|
|
class="upper"
|
|
on:keydown
|
|
on:click="{() => {
|
|
if (opened == i) opened = -1
|
|
else opened = i
|
|
}}"
|
|
>
|
|
<h4>
|
|
{box.title}
|
|
</h4>
|
|
<div>
|
|
{#if i !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
|
|
src="/media/up.svg"
|
|
alt="arrow"
|
|
/>{/if}
|
|
</div>
|
|
</div>
|
|
<div class="content" class:closed="{i !== opened}">
|
|
{@html box.text}
|
|
{#if box.emailButton}
|
|
<a href="mailto:info@fontis.de?subject={box.emailSubject || 'Bewerbung'}" class="button">
|
|
<button> bewerben </button>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
button {
|
|
margin-top: 20px;
|
|
background-color: @bg-color-secondary;
|
|
color: @font-color-secondary;
|
|
border: 2px solid @bg-color-secondary;
|
|
padding: 2px 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.boxes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.box {
|
|
border-bottom: 2px dotted @bg-color-secondary;
|
|
display: flex;
|
|
transition: padding-bottom 1s;
|
|
padding-bottom: 0px;
|
|
flex-direction: column;
|
|
padding-top: 20px;
|
|
gap: 20px;
|
|
&.opened {
|
|
padding-bottom: 20px;
|
|
}
|
|
.upper {
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.content {
|
|
max-height: 1000px;
|
|
overflow: hidden;
|
|
transition: max-height 1s ease-in-out;
|
|
&.closed {
|
|
max-height: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|