|
|
|
@ -1,5 +1,15 @@ |
|
|
|
<script> |
|
|
|
import "@spectrum-css/avatar/dist/index-vars.css" |
|
|
|
let sizes = new Map([ |
|
|
|
["XXS", "--spectrum-alias-avatar-size-50"], |
|
|
|
["XS", "--spectrum-alias-avatar-size-75"], |
|
|
|
["S", "--spectrum-alias-avatar-size-200"], |
|
|
|
["M", "--spectrum-alias-avatar-size-300"], |
|
|
|
["L", "--spectrum-alias-avatar-size-500"], |
|
|
|
["XL", "--spectrum-alias-avatar-size-600"], |
|
|
|
["XXL", "--spectrum-alias-avatar-size-700"], |
|
|
|
]) |
|
|
|
export let size = "M" |
|
|
|
export let url = "" |
|
|
|
export let disabled = false |
|
|
|
export let initials = "KA" |
|
|
|
@ -11,9 +21,12 @@ |
|
|
|
class="spectrum-Avatar" |
|
|
|
src={url} |
|
|
|
alt="Avatar" |
|
|
|
style="width: var({sizes.get(size)}); height: var({sizes.get(size)});" |
|
|
|
/> |
|
|
|
{:else} |
|
|
|
<div>{initials}</div> |
|
|
|
<div style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"> |
|
|
|
{initials} |
|
|
|
</div> |
|
|
|
{/if} |
|
|
|
|
|
|
|
<style> |
|
|
|
@ -29,7 +42,5 @@ |
|
|
|
rgba(53, 199, 86, 1) 47% |
|
|
|
); |
|
|
|
border-radius: 50%; |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|