Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paweł Kuna
2022-11-15 00:28:38 +01:00
committed by GitHub
parent 89166bd900
commit ce293a14ef
4 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/_docs/avatars.md
View File

@@ -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 %}

2
src/pages/_includes/ui/avatar.html
View File

@@ -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 %}

1
src/scss/_variables.scss
View File

@@ -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;

16
src/scss/ui/_avatars.scss
View File

@@ -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;