skillbox/client/src/components/AddContentElement.vue

43 lines
801 B
Vue

<template>
<div
class="add-content-element"
@click="$emit('add-element', index)"
>
<add-icon class="add-content-element__icon" />
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const AddIcon = defineAsyncComponent(() => import('@/components/icons/AddIcon.vue'));
export default {
props: ['index'],
components: {
AddIcon,
},
};
</script>
<style scoped lang="scss">
@import '@/styles/_variables.scss';
.add-content-element {
display: flex;
justify-content: center;
border-bottom: 2px solid $color-silver-dark;
margin-bottom: 21px + 25px;
cursor: pointer;
&__icon {
width: 40px;
height: 40px;
fill: $color-silver-dark;
margin-bottom: -21px;
background-color: $color-white;
border-radius: 50px;
}
}
</style>