js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

add custom properties to avatar

Browse Source
This commit is contained in:
lindsaym-fa
2024-05-13 17:17:39 -04:00
parent 870df3f030
commit cfa4e964a0
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/avatar/avatar.styles.ts
View File

@@ -2,9 +2,11 @@ import { css } from 'lit';
export default css`
:host {
display: inline-block;
--background: var(--wa-color-neutral-fill-highlight);
--content-color: var(--wa-color-neutral-text-on-fill);
--size: 3rem;
display: inline-block;
}
.avatar {
@@ -14,10 +16,10 @@ export default css`
position: relative;
width: var(--size);
height: var(--size);
background-color: var(--wa-color-neutral-spot);
background: var(--background);
font: inherit;
font-size: calc(var(--size) * 0.5);
color: var(--wa-color-neutral-text-on-spot);
font-size: calc(var(--size) * 0.4);
color: var(--content-color);
user-select: none;
-webkit-user-select: none;
vertical-align: middle;

2
src/components/avatar/avatar.ts
View File

@@ -23,6 +23,8 @@ import type { CSSResultGroup } from 'lit';
* @csspart initials - The container that wraps the avatar's initials.
* @csspart image - The avatar image. Only shown when the `image` attribute is set.
*
* @cssproperty --background - The avatar's background styles.
* @cssproperty --content-color - The color of the avatar's content.
* @cssproperty --size - The size of the avatar.
*/
@customElement('wa-avatar')