diff --git a/apps/showcase/doc/avatar/AvatarGroupDoc.vue b/apps/showcase/doc/avatar/AvatarGroupDoc.vue
index 4313c6166..ee145fd3b 100644
--- a/apps/showcase/doc/avatar/AvatarGroupDoc.vue
+++ b/apps/showcase/doc/avatar/AvatarGroupDoc.vue
@@ -4,12 +4,12 @@
@@ -22,24 +22,24 @@ export default {
code: {
basic: `
-
-
-
-
-
-
+
+
+
+
+
+
`,
options: `
@@ -52,12 +52,12 @@ export default {
diff --git a/packages/primevue/src/avatar/style/AvatarStyle.js b/packages/primevue/src/avatar/style/AvatarStyle.js
index ba951c525..f95a82d08 100644
--- a/packages/primevue/src/avatar/style/AvatarStyle.js
+++ b/packages/primevue/src/avatar/style/AvatarStyle.js
@@ -9,6 +9,7 @@ const theme = ({ dt }) => `
height: ${dt('avatar.height')};
font-size: ${dt('avatar.font.size')};
background: ${dt('avatar.background')};
+ color: ${dt('avatar.color')};
border-radius: ${dt('avatar.border.radius')};
}
@@ -25,7 +26,9 @@ const theme = ({ dt }) => `
}
.p-avatar-icon {
- font-size: ${dt('avatar.font.size')};
+ font-size: ${dt('avatar.icon.size')};
+ width: ${dt('avatar.icon.size')};
+ height: ${dt('avatar.icon.size')};
}
.p-avatar img {
@@ -40,7 +43,9 @@ const theme = ({ dt }) => `
}
.p-avatar-lg .p-avatar-icon {
- font-size: ${dt('avatar.lg.font.size')};
+ font-size: ${dt('avatar.lg.icon.size')};
+ width: ${dt('avatar.lg.icon.size')};
+ height: ${dt('avatar.lg.icon.size')};
}
.p-avatar-xl {
@@ -50,7 +55,9 @@ const theme = ({ dt }) => `
}
.p-avatar-xl .p-avatar-icon {
- font-size: ${dt('avatar.xl.font.size')};
+ font-size: ${dt('avatar.xl.icon.size')};
+ width: ${dt('avatar.xl.icon.size')};
+ height: ${dt('avatar.xl.icon.size')};
}
.p-avatar-group {
@@ -65,6 +72,14 @@ const theme = ({ dt }) => `
.p-avatar-group .p-avatar {
border: 2px solid ${dt('avatar.group.border.color')};
}
+
+.p-avatar-group .p-avatar-lg + .p-avatar-lg {
+ margin-left: ${dt('avatar.lg.group.offset')};
+}
+
+.p-avatar-group .p-avatar-xl + .p-avatar-xl {
+ margin-left: ${dt('avatar.xl.group.offset')};
+}
`;
const classes = {
diff --git a/packages/themes/src/presets/aura/avatar/index.js b/packages/themes/src/presets/aura/avatar/index.js
index 7907a7bed..506303896 100644
--- a/packages/themes/src/presets/aura/avatar/index.js
+++ b/packages/themes/src/presets/aura/avatar/index.js
@@ -4,20 +4,36 @@ export default {
height: '2rem',
fontSize: '1rem',
background: '{content.border.color}',
+ color: '{content.color}',
borderRadius: '{content.border.radius}'
},
+ icon: {
+ size: '1rem'
+ },
group: {
borderColor: '{content.background}',
- offset: '-1rem'
+ offset: '-0.75rem'
},
lg: {
width: '3rem',
height: '3rem',
- fontSize: '1.5rem'
+ fontSize: '1.5rem',
+ icon: {
+ size: '1.5rem'
+ },
+ group: {
+ offset: '-1rem'
+ }
},
xl: {
width: '4rem',
height: '4rem',
- fontSize: '2rem'
+ fontSize: '2rem',
+ icon: {
+ size: '2rem'
+ },
+ group: {
+ offset: '-1.5rem'
+ }
}
};
diff --git a/packages/themes/src/presets/lara/avatar/index.js b/packages/themes/src/presets/lara/avatar/index.js
index 7907a7bed..a40937bbf 100644
--- a/packages/themes/src/presets/lara/avatar/index.js
+++ b/packages/themes/src/presets/lara/avatar/index.js
@@ -4,20 +4,33 @@ export default {
height: '2rem',
fontSize: '1rem',
background: '{content.border.color}',
+ color: '{content.color}',
borderRadius: '{content.border.radius}'
},
+ icon: {
+ size: '1rem'
+ },
group: {
borderColor: '{content.background}',
- offset: '-1rem'
+ offset: '-0.75rem'
},
lg: {
width: '3rem',
height: '3rem',
- fontSize: '1.5rem'
+ fontSize: '1.5rem',
+ icon: {
+ size: '1.5rem'
+ },
+ group: {
+ offset: '-1rem'
+ }
},
xl: {
width: '4rem',
height: '4rem',
- fontSize: '2rem'
+ fontSize: '2rem',
+ icon: {
+ size: '2rem'
+ }
}
};
diff --git a/packages/themes/src/presets/material/avatar/index.js b/packages/themes/src/presets/material/avatar/index.js
index 7907a7bed..506303896 100644
--- a/packages/themes/src/presets/material/avatar/index.js
+++ b/packages/themes/src/presets/material/avatar/index.js
@@ -4,20 +4,36 @@ export default {
height: '2rem',
fontSize: '1rem',
background: '{content.border.color}',
+ color: '{content.color}',
borderRadius: '{content.border.radius}'
},
+ icon: {
+ size: '1rem'
+ },
group: {
borderColor: '{content.background}',
- offset: '-1rem'
+ offset: '-0.75rem'
},
lg: {
width: '3rem',
height: '3rem',
- fontSize: '1.5rem'
+ fontSize: '1.5rem',
+ icon: {
+ size: '1.5rem'
+ },
+ group: {
+ offset: '-1rem'
+ }
},
xl: {
width: '4rem',
height: '4rem',
- fontSize: '2rem'
+ fontSize: '2rem',
+ icon: {
+ size: '2rem'
+ },
+ group: {
+ offset: '-1.5rem'
+ }
}
};
diff --git a/packages/themes/src/presets/nora/avatar/index.js b/packages/themes/src/presets/nora/avatar/index.js
index 47cf87391..7b58044c1 100644
--- a/packages/themes/src/presets/nora/avatar/index.js
+++ b/packages/themes/src/presets/nora/avatar/index.js
@@ -4,20 +4,36 @@ export default {
height: '2rem',
fontSize: '1rem',
background: '{content.hover.background}',
+ color: '{content.color}',
borderRadius: '{content.border.radius}'
},
+ icon: {
+ size: '1rem'
+ },
group: {
borderColor: '{content.background}',
- offset: '-1rem'
+ offset: '-0.75rem'
},
lg: {
width: '3rem',
height: '3rem',
- fontSize: '1.5rem'
+ fontSize: '1.5rem',
+ icon: {
+ size: '1.5rem'
+ },
+ group: {
+ offset: '-1rem'
+ }
},
xl: {
width: '4rem',
height: '4rem',
- fontSize: '2rem'
+ fontSize: '2rem',
+ icon: {
+ size: '2rem'
+ },
+ group: {
+ offset: '-1.5rem'
+ }
}
};