diff --git a/src/pages/_docs/avatars.md b/src/pages/_docs/avatars.md
index a0e3ca6478..4274112c88 100644
--- a/src/pages/_docs/avatars.md
+++ b/src/pages/_docs/avatars.md
@@ -136,3 +136,12 @@ Make the list stack once a certain number of avatars is reached to make it look
{% endcapture %}
{% include example.html code=code centered=true %}
+
+{% capture code %}
+
+ {% for person in site.data.people limit: 8 offset: 10 %}
+ {% include ui/avatar.html person=person element="a" class="rounded-circle" size="sm" %}
+ {% endfor %}
+
+{% endcapture %}
+{% include example.html code=code centered=true %}
diff --git a/src/pages/_includes/ui/avatar.html b/src/pages/_includes/ui/avatar.html
index cde3aa0935..13185dc3ce 100644
--- a/src/pages/_includes/ui/avatar.html
+++ b/src/pages/_includes/ui/avatar.html
@@ -21,6 +21,6 @@
{% endif %}
{% assign el = 'span' %}
{% if link %}{% assign el = 'a' %}{% endif %}
-<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.rounded %} avatar-rounded{% endif %}"{% if src %} style="background-image: url({{ site.base }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>{% if include.status %}
+<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.rounded %} rounded{% endif %}"{% if src %} style="background-image: url({{ site.base }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>{% if include.status %}
{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}{{ el }}>
{% endremoveemptylines %}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 030f2bf51d..9f891b4e74 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -384,6 +384,7 @@ $aspect-ratios: (
// Shadows
$shadow: rgba(var(--#{$prefix}body-color-rgb), .04) 0 2px 4px 0 !default;
+$shadow-inset: inset rgba(var(--#{$prefix}body-color-rgb), .04) 0 0 0 1px !default;
$shadow-transparent: 0 0 0 0 transparent !default;
$shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), .04) !default;
$shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), .2) !default;
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index dfaddafd70..8b5813e203 100644
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -1,6 +1,7 @@
.avatar {
--#{$prefix}avatar-size: #{$avatar-size};
--#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
+ --#{$prefix}avatar-shadow: #{$shadow-inset};
position: relative;
width: var(--#{$prefix}avatar-size);
height: var(--#{$prefix}avatar-size);
@@ -16,6 +17,7 @@
user-select: none;
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: $avatar-border-radius;
+ box-shadow: var(--#{$prefix}avatar-shadow);
svg {
width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
@@ -50,7 +52,9 @@
}
}
-
+//
+// Avatar list
+//
.avatar-list {
@include elements-list;
@@ -62,12 +66,18 @@
}
.avatar-list-stacked {
+ display: block;
+ --#{$prefix}list-gap: 0;
+
.avatar {
- margin-right: -.5rem !important;
- box-shadow: 0 0 0 2px 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
+ margin-right: calc(-.5 * var(--#{$prefix}avatar-size)) !important;
+ box-shadow: var(--#{$prefix}avatar-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
}
+//
+// Avatar upload
+//
.avatar-upload {
width: 4rem;
height: 4rem;