@threadlabs/looma 0.21.3 → 0.21.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ui-avatar/ui-avatar.html +6 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-avatar.css +5 -1
- package/vue/UiAvatar.vue +5 -1
- package/vue/chunks/UiAvatar.js +1 -1
- package/vue/components.css +16 -12
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
circle clips anything wider.</prop>
|
|
16
16
|
<prop name="size" type="keyword" values="xs, sm, md" default="md"
|
|
17
17
|
>md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header; xs is
|
|
18
|
-
1.25rem with
|
|
18
|
+
1.25rem with small initials, for a person named inline in a line of small text.</prop>
|
|
19
19
|
<prop name="shape" type="keyword" values="circle, square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
|
|
20
20
|
<prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
|
|
21
21
|
<prop name="active" type="boolean" default="false"
|
|
@@ -71,6 +71,8 @@
|
|
|
71
71
|
font: inherit;
|
|
72
72
|
font-size: var(--ui-font-size-sm);
|
|
73
73
|
font-weight: 600;
|
|
74
|
+
/* The initials centre in the circle wherever it sits, whatever line height surrounds it. */
|
|
75
|
+
line-height: 1;
|
|
74
76
|
text-transform: uppercase;
|
|
75
77
|
}
|
|
76
78
|
|
|
@@ -85,7 +87,9 @@
|
|
|
85
87
|
--_ui-default-icon-size: 0.75rem;
|
|
86
88
|
inline-size: 1.25rem;
|
|
87
89
|
block-size: 1.25rem;
|
|
88
|
-
|
|
90
|
+
/* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
|
|
91
|
+
font-size: calc(var(--ui-font-size) * 0.5625);
|
|
92
|
+
letter-spacing: 0.02em;
|
|
89
93
|
}
|
|
90
94
|
|
|
91
95
|
:host-state([hasImage]) {
|