From: Mark Otto Date: Tue, 2 Jun 2026 06:19:49 +0000 (-0700) Subject: Update avatars (#42456) X-Git-Url: http://git.ipfire.org/gitweb/index.cgi?a=commitdiff_plain;h=ea71b3b29aed7df802d5d649d9a02b1caad01e07;p=thirdparty%2Fbootstrap.git Update avatars (#42456) * Use image dimensions, update for labels on avatar status * More bulletproof * update --- diff --git a/scss/_avatar.scss b/scss/_avatar.scss index b097e9ce82..14326aced1 100644 --- a/scss/_avatar.scss +++ b/scss/_avatar.scss @@ -44,10 +44,12 @@ $avatar-sizes: defaults( "lg": ( size: 3rem, status-size: 1rem, + border-width: 3px, ), "xl": ( size: 4rem, status-size: 1.25rem, + border-width: 4px, ), ), $avatar-sizes @@ -72,6 +74,12 @@ $avatar-sizes: defaults( vertical-align: middle; background-color: var(--theme-bg, var(--avatar-bg)); @include border-radius(var(--avatar-border-radius)); + + > .avatar-img { + width: 100%; + height: 100%; + object-fit: cover; + } } .avatar-subtle { @@ -80,10 +88,7 @@ $avatar-sizes: defaults( } .avatar-img { - width: 100%; - height: 100%; - object-fit: cover; - @include border-radius(inherit); + @include border-radius(var(--avatar-border-radius, 50%)); } .avatar-status { @@ -139,12 +144,16 @@ $avatar-sizes: defaults( @each $size, $tokens in $avatar-sizes { .avatar-#{$size}, - .avatar-stack-#{$size} { + .avatar-stack-#{$size} > .avatar { --avatar-size: #{map.get($tokens, size)}; @if map.has-key($tokens, status-size) { --avatar-status-size: #{map.get($tokens, status-size)}; } + + @if map.has-key($tokens, border-width) { + --avatar-border-width: #{map.get($tokens, border-width)}; + } } } } diff --git a/site/src/content/docs/components/avatar.mdx b/site/src/content/docs/components/avatar.mdx index 1ac53f977e..40df23f82b 100644 --- a/site/src/content/docs/components/avatar.mdx +++ b/site/src/content/docs/components/avatar.mdx @@ -17,6 +17,10 @@ Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar mdo `} /> +When used inside the `.avatar` wrapper, the image fills the wrapper and its size is set with `--avatar-size`. Used on its own, `.avatar-img` honors its own `width` and `height` instead, so set them to your desired size. + +`} /> + ### Initials Use text content inside `.avatar` for initials-based avatars. @@ -63,6 +67,12 @@ Avatars come in multiple sizes: extra small, small, default, large, and extra la mdo `} /> +Use a custom size by modifying the `--bs-avatar-size` variable. + + + mdo + `} /> + ## Status indicator Add a `.avatar-status` element inside the avatar to show a status indicator. Each status has a distinct shape and color: @@ -72,21 +82,23 @@ Add a `.avatar-status` element inside the avatar to show a status indicator. Eac - `.status-busy` — red rounded square - `.status-away` — yellow circle +Because the status is conveyed purely through color and shape, give each `.avatar-status` a `role="img"` and an `aria-label` (e.g. `Online`) so assistive technologies can announce it. + mdo - + mdo - + mdo - + mdo - + `} /> ### Status with sizes @@ -95,23 +107,23 @@ The status indicator scales with the avatar size. mdo - + mdo - + mdo - + mdo - + mdo - + `} /> ## Avatar stack @@ -212,7 +224,20 @@ Combine with initials to show a count of additional users. mdo - User avatar + mdo + + +5 + `} /> + + + + mdo + + + mdo + + + mdo +5 `} />