57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<template>
|
|
|
|
<div class="contact-decoration" aria-hidden="true">
|
|
<div class="contact-decoration__icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M 3.2 3.2 L 20.8 3.2 C 22.01 3.2 23 4.19 23 5.4 L 23 18.6 C 23 19.81 22.01 20.8 20.8 20.8 L 3.2 20.8 C 1.99 20.8 1 19.81 1 18.6 L 1 5.4 C 1 4.19 1.99 3.2 3.2 3.2 Z"/>
|
|
<polyline points="23 5.4 12 13.1 1 5.4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="contact-decoration__separator"></div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// LAYOUT & STYLE
|
|
// --------------------------------------------------
|
|
|
|
.contact-decoration {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin: 0 -1rem;
|
|
|
|
&__icon {
|
|
width: calc(var(--regular-icon-size) + 1rem);
|
|
height: calc(var(--regular-icon-size) + 1rem);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--primary-color);
|
|
border: 1px solid var(--accent-color);
|
|
border-radius: 50%;
|
|
|
|
svg {
|
|
stroke: var(--secondary-color);
|
|
width: var(--regular-icon-size);
|
|
height: var(--regular-icon-size);
|
|
}
|
|
}
|
|
|
|
&__separator {
|
|
width: 1px;
|
|
height: 0;
|
|
background-color: var(--accent-color);
|
|
animation: expand-height 600ms ease-in-out 600ms forwards;
|
|
}
|
|
}
|
|
|
|
</style>
|