diff --git a/.changeset/soft-mangos-tie.md b/.changeset/soft-mangos-tie.md new file mode 100644 index 000000000..2d8cb13d4 --- /dev/null +++ b/.changeset/soft-mangos-tie.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Add variable to configure `avatar-list` spacing diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 783baf40e..68a6cf72f 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -339,6 +339,7 @@ $avatar-sizes: ( $avatar-border-radius: var(--#{$prefix}border-radius) !default; $avatar-font-size: $h4-font-size !default; $avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default; +$avatar-list-spacing: -.5; $link-decoration: none !default; $link-hover-decoration: underline !default; diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss index 5714395c8..e654b7c05 100644 --- a/src/scss/ui/_avatars.scss +++ b/src/scss/ui/_avatars.scss @@ -70,7 +70,7 @@ --#{$prefix}list-gap: 0; .avatar { - margin-right: calc(-.5 * var(--#{$prefix}avatar-size)) !important; + margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface))); } }