fix #1370: avatar stacked list is not stacked anymore (#1371)

tabler · Nov 14, 2022 · ce293a1 · ce293a1
1 parent 89166bd
commit ce293a1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git 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
 </div>
 {% endcapture %}
 {% include example.html code=code centered=true %}
+
+{% capture code %}
+<div class="avatar-list avatar-list-stacked">
+  {% for person in site.data.people limit: 8 offset: 10 %}
+  {% include ui/avatar.html person=person element="a" class="rounded-circle" size="sm" %}
+  {% endfor %}
+</div>
+{% endcapture %}
+{% include example.html code=code centered=true %}
diff --git 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 %}
 	<span class="badge bg-{{ 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 %}</span>{% 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
@@ -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
@@ -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;