65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
|
<div class="activity-entry">
|
|
<div class="activity-entry__content">
|
|
<h3 class="activity-entry__title">{{title}}</h3>
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<div class="activity-entry__link" @click="$emit('link')">
|
|
<chevron-right class="activity-entry__icon"></chevron-right>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ChevronRight from '@/components/icons/ChevronRight';
|
|
|
|
export default {
|
|
props: ['title'],
|
|
|
|
components: {
|
|
ChevronRight
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.activity-entry {
|
|
padding: $small-spacing 0;
|
|
border-bottom: 1px solid $color-silver;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&__title {
|
|
@include small-text;
|
|
// todo: make style definition for small text and silver color
|
|
color: $color-silver-dark;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__content {
|
|
flex-grow: 1;
|
|
@include regular-text;
|
|
line-height: $default-line-height;
|
|
}
|
|
&__link {
|
|
display: flex;
|
|
flex-grow: 0;
|
|
align-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__icon {
|
|
fill: $color-brand;
|
|
width: 30px;
|
|
}
|
|
|
|
/deep/ p {
|
|
@include regular-text;
|
|
}
|
|
}
|
|
</style>
|