generated from cms/tibi-docs
80 lines
2.2 KiB
Svelte
80 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { apiBaseURL } from "../../../config"
|
|
export let col: Column
|
|
export let pageId: string
|
|
|
|
let active = -1
|
|
setInterval(() => {
|
|
active += 1
|
|
if (active == col.iconCycleSquare.boxes.length) active = 0
|
|
}, 1000)
|
|
</script>
|
|
|
|
<div class="iconCycleSquares">
|
|
{#each col?.iconCycleSquare?.boxes as box, i}
|
|
<div class="box" id="box{i}" class:active="{i == active}">
|
|
<div class="content">
|
|
<div class="icon">
|
|
<svg
|
|
stroke="{i == active ? 'black' : 'white'}"
|
|
fill="{i == active ? 'black' : 'white'}"
|
|
data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
|
|
</div>
|
|
<div class="text">
|
|
{box.text}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../assets/css/main.less";
|
|
.iconCycleSquares {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
font-size: 0.8rem;
|
|
transition: all 600ms;
|
|
|
|
@media @tablet {
|
|
gap: 20px;
|
|
font-size: 1rem;
|
|
}
|
|
.box {
|
|
border: 4px solid @bg-color-secondary;
|
|
background-color: @bg-color-secondary;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: @font-color-secondary;
|
|
|
|
&.active {
|
|
background-color: @bg-color;
|
|
color: @font-color;
|
|
}
|
|
width: 140px;
|
|
height: 150px;
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-family: "Libre Caslon Text", serif;
|
|
}
|
|
}
|
|
@media @tablet {
|
|
width: 270px;
|
|
height: 270px;
|
|
gap: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|