akkoma-fe/src/components/avatar_list/avatar_list.vue

39 lines
735 B
Vue
Raw Normal View History

2019-04-02 02:30:23 +00:00
<template>
2019-04-22 18:07:29 +00:00
<div class="avatars">
<div class="avatars-item" v-for="avatar in slicedAvatars">
<UserAvatar :src="avatar.profile_image_url" class="avatar-small" />
2019-04-22 18:07:29 +00:00
</div>
</div>
2019-04-02 02:30:23 +00:00
</template>
<script src="./avatar_list.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
2019-04-02 02:30:23 +00:00
.avatars {
display: flex;
2019-04-02 02:30:23 +00:00
margin: 0;
2019-04-05 03:12:37 +00:00
padding: 0;
2019-04-02 02:30:23 +00:00
// For hiding overflowing elements
flex-wrap: wrap;
height: 24px;
2019-04-22 18:07:29 +00:00
.avatars-item {
margin: 0 0 5px 5px;
2019-04-05 09:49:31 +00:00
&:first-child {
2019-04-22 18:07:29 +00:00
padding-left: 5px;
2019-04-05 09:49:31 +00:00
}
2019-04-02 08:25:08 +00:00
.avatar-small {
2019-04-02 20:00:09 +00:00
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
2019-04-06 18:25:26 +00:00
height: 24px;
width: 24px;
2019-04-02 02:30:23 +00:00
}
}
}
</style>