Skip to content

Commit f356523

Browse files
mrholekmrholek
committed
refactor(Avatar): add CSS Variables support
1 parent b8690e4 commit f356523

File tree

4 files changed

+98
-31
lines changed

4 files changed

+98
-31
lines changed

‎docs/content/components/avatar.md‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: docs
33
title: Avatar
4-
description: Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
4+
description: The Avatar component is used to display circular user profile pictures. Avatars can portray people or objects and support images, icons, or letters.
55
group: components
66
toc: true
77
bootstrap: true
@@ -10,6 +10,8 @@ other_frameworks: avatar
1010

1111
## Image avatars
1212

13+
Showcase avatars using images. These avatars are typically circular and can display user profile pictures.
14+
1315
{{< example >}}
1416
<div class="avatar">
1517
<img class="avatar-img" src="/assets/img/avatars/1.jpg" alt="[email protected]">
@@ -24,6 +26,8 @@ other_frameworks: avatar
2426

2527
## Letter avatars
2628

29+
Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
30+
2731
{{< example >}}
2832
<div class="avatar bg-primary text-white">CUI</div>
2933
<div class="avatar bg-secondary">CUI</div>
@@ -32,6 +36,8 @@ other_frameworks: avatar
3236

3337
## Icons avatars
3438

39+
Incorporate icons within avatars, allowing for a visual representation using scalable vector graphics (SVG).
40+
3541
{{< example >}}
3642
<div class="avatar bg-info text-white">
3743
<svg id="cib-coreui-c" class="icon" viewBox="0 0 32 32">
@@ -52,7 +58,7 @@ other_frameworks: avatar
5258

5359
## Rounded avatars
5460

55-
Use the `.rounded` class to make avatars squared with rounded corners.
61+
Create avatars with rounded corners by adding the `.rounded` class. This gives a softer, less angular appearance.
5662

5763
{{< example >}}
5864
<div class="avatar rounded bg-primary text-white">CUI</div>
@@ -62,7 +68,7 @@ Use the `.rounded` class to make avatars squared with rounded corners.
6268

6369
## Square avatars
6470

65-
Use the `.rounded-0` class to make avatars squared.
71+
Make avatars square by using the `.rounded-0` class, removing any rounded edges for a sharper look.
6672

6773
{{< example >}}
6874
<div class="avatar rounded-0 bg-primary text-white">CUI</div>
@@ -72,16 +78,19 @@ Use the `.rounded-0` class to make avatars squared.
7278

7379
## Sizes
7480

75-
Fancy larger or smaller avatar? Add .avatar-lg or .avatar-sm for additional sizes.
76-
81+
Adjust the size of avatars using the `.avatar-sm`, `.avatar-md`, `.avatar-lg`, and `.avatar-xl` classes for larger or smaller versions.
7782
{{< example >}}
83+
<div class="avatar avatar-xl bg-secondary">CUI</div>
7884
<div class="avatar avatar-lg bg-secondary">CUI</div>
85+
<div class="avatar avatar-md bg-secondary">CUI</div>
7986
<div class="avatar bg-secondary">CUI</div>
8087
<div class="avatar avatar-sm bg-secondary">CUI</div>
8188
{{< /example >}}
8289

8390
## Stacked avatars
8491

92+
Display multiple avatars in a stack to represent a group of users or items, with additional count if there are more avatars than can be displayed.
93+
8594
{{< example >}}
8695
<div class="avatars-stack">
8796
<div class="avatar">
@@ -101,6 +110,8 @@ Fancy larger or smaller avatar? Add .avatar-lg or .avatar-sm for additional size
101110

102111
## Avatars with status
103112

113+
Add a status indicator to avatars using the .avatar-status class to show online or offline status.
114+
104115
{{< example >}}
105116
<div class="avatar">
106117
<img class="avatar-img" src="/assets/img/avatars/1.jpg" alt="[email protected]">
@@ -115,6 +126,12 @@ Fancy larger or smaller avatar? Add .avatar-lg or .avatar-sm for additional size
115126

116127
## Customizing
117128

129+
### CSS variables
130+
131+
Avatars use local CSS variables on `.avatar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
132+
133+
{{< scss-docs name="avatar-css-vars" file="scss/_avatar.scss" >}}
134+
118135
### SASS variables
119136

120137
{{< scss-docs name="avatar-variables" file="scss/_variables.scss" >}}

‎scss/_avatar.scss‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,61 @@
11
.avatar {
2+
// scss-docs-start avatar-css-vars
3+
--#{$prefix}avatar-width: #{$avatar-width};
4+
--#{$prefix}avatar-height: #{$avatar-height};
5+
--#{$prefix}avatar-font-size: #{$avatar-font-size};
6+
--#{$prefix}avatar-border-radius: #{$avatar-border-radius};
7+
--#{$prefix}avatar-status-width: #{$avatar-status-width};
8+
--#{$prefix}avatar-status-height: #{$avatar-status-height};
9+
--#{$prefix}avatar-status-border-radius: #{$avatar-status-border-radius};
10+
// scss-docs-end avatar-css-vars
11+
212
position: relative;
313
display: inline-flex;
414
align-items: center;
515
justify-content: center;
16+
width: var(--#{$prefix}avatar-width);
17+
height: var(--#{$prefix}avatar-height);
18+
font-size: var(--#{$prefix}avatar-font-size);
619
vertical-align: middle;
7-
@include border-radius(50em);
20+
@include border-radius(var(--#{$prefix}avatar-border-radius));
821
@include transition($avatar-transition);
9-
@include avatar($avatar-width);
1022
}
1123

1224
.avatar-img {
1325
width: 100%;
1426
height: auto;
15-
@include border-radius(50em);
27+
@include border-radius(var(--#{$prefix}avatar-border-radius));
1628
}
1729

1830
.avatar-status {
1931
position: absolute;
2032
@include ltr-rtl("right", 0);
2133
bottom: 0;
2234
display: block;
35+
width: var(--#{$prefix}avatar-status-width);
36+
height: var(--#{$prefix}avatar-status-height);
2337
border: 1px solid $white;
24-
@include border-radius(50em);
38+
@include border-radius(var(--#{$prefix}avatar-status-border-radius));
2539
}
2640

27-
@each $width, $value in $avatar-widths {
28-
.avatar-#{$width} {
29-
@include avatar($value);
41+
@each $size, $map in $avatar-sizes {
42+
.avatar-#{$size} {
43+
--#{$prefix}avatar-width: #{map-get($map, "width")};
44+
--#{$prefix}avatar-height: #{map-get($map, "height")};
45+
--#{$prefix}avatar-font-size: #{map-get($map, "font-size")};
46+
--#{$prefix}avatar-status-width: #{map-get($map, "status-width")};
47+
--#{$prefix}avatar-status-height: #{map-get($map, "status-height")};
3048
}
3149
}
3250

3351
.avatars-stack {
3452
display: flex;
3553

3654
.avatar {
37-
@include ltr-rtl("margin-right", - ($avatar-width * .4));
55+
@include ltr-rtl("margin-right", calc(-.4 * var(--#{$prefix}avatar-width)));
3856

3957
&:hover {
4058
@include ltr-rtl("margin-right", 0);
4159
}
4260
}
43-
44-
@each $width, $value in $avatar-widths {
45-
.avatar-#{$width} {
46-
@include ltr-rtl("margin-right", - ($value * .4));
47-
}
48-
}
4961
}

‎scss/_variables.scss‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1620,17 +1620,56 @@ $modal-scale-transform: scale(1.02) !default;
16201620

16211621
// Avatars
16221622
// scss-docs-start avatar-variables
1623-
$avatar-width: 2rem !default;
1623+
$avatar-width: 2rem !default;
1624+
$avatar-height: 2rem !default;
1625+
$avatar-font-size: .8rem !default;
1626+
$avatar-border-radius: 50em !default;
1627+
$avatar-status-width: .5rem !default;
1628+
$avatar-status-height: .5rem !default;
1629+
$avatar-status-border-radius: 50em !default;
1630+
$avatar-transition: margin .15s !default;
1631+
1632+
$avatar-sizes: (
1633+
sm: (
1634+
width: 1.5rem,
1635+
height: 1.5rem,
1636+
font-size: .6rem,
1637+
status-width: .4rem,
1638+
status-height: .4rem
1639+
),
1640+
md: (
1641+
width: 2.5rem,
1642+
height: 2.5rem,
1643+
font-size: 1rem,
1644+
status-width: .7rem,
1645+
status-height: .7rem
1646+
),
1647+
lg: (
1648+
width: 3rem,
1649+
height: 3rem,
1650+
font-size: 1.2rem,
1651+
status-width: .8rem,
1652+
status-height: .8rem
1653+
),
1654+
xl: (
1655+
width: 4rem,
1656+
height: 4rem,
1657+
font-size: 1.6rem,
1658+
status-width: 1rem,
1659+
status-height: 1rem
1660+
),
1661+
) !default;
1662+
// scss-docs-end avatar-variables
16241663

1664+
// fusv-disable
1665+
// Deprecated in 5.0.3 for CSS variables
16251666
$avatar-widths: (
16261667
sm: 1.5rem,
16271668
md: 2.5rem,
16281669
lg: 3rem,
16291670
xl: 4rem
16301671
) !default;
1631-
1632-
$avatar-transition: margin .15s !default;
1633-
// scss-docs-end avatar-variables
1672+
// fusv-enable
16341673

16351674
// Alerts
16361675
//

‎scss/mixins/_avatar.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
@mixin avatar($width) {
2-
width: $width;
3-
height: $width;
4-
font-size: $width * .4;
1+
@include deprecate("`avatar()`", "v5.0.3", "v6.0.0");
52

6-
.avatar-status {
7-
width: divide($width, 3.75);
8-
height: divide($width, 3.75);
9-
}
3+
@mixin avatar($width) {
4+
--#{$prefix}avatar-width: #{$width};
5+
--#{$prefix}avatar-height: #{$width};
6+
--#{$prefix}avatar-font-size: #{$width * .4};
7+
--#{$prefix}avatar-status-width: #{divide($width, 3.75)};
8+
--#{$prefix}avatar-status-height: #{divide($width, 3.75)};
109
}

0 commit comments

Comments
 (0)