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 9cbcbee071..077d002d90 100644
	--- a/src/components/avatar_list/avatar_list.vue
	+++ b/src/components/avatar_list/avatar_list.vue
	@@ -1,63 +1,63 @@
	<template>
	<ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }">
	<li class="avatars-item" v-for="(avatar, index) in slicedAvatars" :key="`avatar-${index}`">
	<UserAvatar :src="avatar.profile_image_url" 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: 0;

	- &-item {
	+ li.avatars-item {
	height: 24px;
	width: 24px;
	margin: 0 5px 0 0;

	&:first-child {
	padding-left: 12px;
	}

	&:last-child {
	margin-right: 0;
	}

	.avatars-img {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	- height: 24px !important;
	- width: 24px !important;
	+ height: 24px;
	+ width: 24px;
	background-color: $fallback--lightText;
	background-color: var(--lightText, $fallback--lightText);
	}
	}
	}

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

	.avatars-img {
	&::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: $fallback--faint;
	background-color: var(--faint, $fallback--faint);
	left: 0;
	top: 0;
	}
	}
	}
	}
	}
	</style>