Packages
corex
0.1.0-beta.2
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
priv/design/corex/components/avatar.css
@import "../main.css";
@layer components {
.avatar[dir="rtl"] [data-scope="avatar"][data-part="fallback"] {
text-align: end;
}
.avatar [data-scope="avatar"][data-part="root"] {
@apply ui-root;
position: relative;
display: inline-grid;
place-items: center;
width: --spacing(11);
height: --spacing(11);
aspect-ratio: 1 / 1;
max-width: 100%;
border-radius: var(--radius-full);
overflow: hidden;
}
.avatar [data-scope="avatar"][data-part="fallback"] {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: start;
width: 100%;
height: 100%;
font-size: var(--text-base);
line-height: var(--text-base--line-height);
font-weight: var(--font-weight-normal);
border-radius: inherit;
border: 1px solid var(--color-border);
gap: --spacing(4);
color: var(--color-ink);
background-color: var(--color-ui);
}
.avatar [data-scope="avatar"][data-part="image"] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
position: relative;
z-index: 1;
}
.avatar [data-scope="avatar"][data-part="skeleton"] {
position: absolute;
inset: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: var(--radius-full);
background: linear-gradient(
90deg,
var(--color-ui-muted) 0%,
var(--color-border) 50%,
var(--color-ui-muted) 100%
);
background-size: 200% 100%;
animation: avatar-skeleton-loading 1.2s ease-in-out infinite;
}
.avatar [data-scope="avatar"][data-part="skeleton"][data-state="hidden"] {
display: none;
}
.avatar.avatar--square [data-scope="avatar"][data-part="skeleton"] {
border-radius: var(--radius-md);
}
.avatar.avatar--square [data-scope="avatar"][data-part="root"] {
border-radius: var(--radius-md);
}
.avatar.avatar--square [data-scope="avatar"][data-part="fallback"] {
border-radius: var(--radius-md);
}
.avatar.avatar--sm [data-scope="avatar"][data-part="root"] {
width: --spacing(8);
height: --spacing(8);
}
.avatar.avatar--sm [data-scope="avatar"][data-part="fallback"] {
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
}
.avatar.avatar--md [data-scope="avatar"][data-part="root"] {
width: --spacing(11);
height: --spacing(11);
}
.avatar.avatar--md [data-scope="avatar"][data-part="fallback"] {
font-size: var(--text-base);
line-height: var(--text-base--line-height);
}
.avatar.avatar--lg [data-scope="avatar"][data-part="root"] {
width: --spacing(14);
height: --spacing(14);
}
.avatar.avatar--lg [data-scope="avatar"][data-part="fallback"] {
font-size: var(--text-lg);
line-height: var(--text-lg--line-height);
}
.avatar.avatar--xl [data-scope="avatar"][data-part="root"] {
width: --spacing(18);
height: --spacing(18);
}
.avatar.avatar--xl [data-scope="avatar"][data-part="fallback"] {
font-size: var(--text-xl);
line-height: var(--text-xl--line-height);
}
}
@keyframes avatar-skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@utility avatar--* {
[data-scope="avatar"][data-part="root"] {
max-width: --value(--spacing-*, [length]);
}
[data-scope="avatar"][data-part="fallback"] {
font-size: --value(--text-*, [length]);
line-height: --value(--text-*--line-height, [length]);
width: --value(--spacing-*, [length]);
height: --value(--spacing-*, [length]);
background-color: --value(--color-ui, [color]);
color: --value(--color-ink, [color]);
border-color: --value(--color-border, [color]);
}
}