No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
	index 204ccb9ad9..3241609c01 100644
	--- a/src/components/avatar_list/avatar_list.vue
	+++ b/src/components/avatar_list/avatar_list.vue
	@@ -1,54 +1,55 @@
	<template>
	<ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 10 }">
	<li class="avatars__item" v-for="(avatar, index) in slicedAvatars" :key="index">
	<UserAvatar :src="avatar.src" class="avatars__img" />
	</li>
	</ul>
	</template>

	<script src="./avatar_list.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';
	.avatars {
	display: inline-flex; /* Causes LI items to display in row. */
	list-style-type: none;
	margin: 0;
	padding: 0px 16px 0px 0px;
	flex-direction: row-reverse;

	&__item {
	height: 40px;
	margin: 0;
	padding: 0;
	width: 25px;

	.avatars__img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
	line-height: 40px;
	+ background-color: $main-background;
	}
	}
	}

	.transparent-avatar {
	.avatars__item {
	&:first-child {
	position: relative;

	.avatars__img {
	&::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	left: 0;
	top: 0;
	}
	}
	}
	}
	}
	</style>