Packages
corex
0.1.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/badge.css
@import "../main.css";
@layer components {
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
cursor: unset;
width: fit-content;
max-width: 100%;
font-size: calc(var(--text-base) * 0.8);
line-height: var(--text-base--line-height);
font-weight: var(--font-weight-normal);
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
padding: var(--spacing-space);
gap: var(--spacing-space);
height: calc(var(--spacing-size) * 0.8);
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
color: var(--color-ink);
background-color: var(--color-ui);
&:disabled,
&[data-disabled],
&[disabled] {
color: var(--color-ink-muted);
background-color: var(--color-ui-muted);
cursor: not-allowed;
}
& svg {
@apply ui-icon;
padding: 0;
}
}
.badge.badge--square,
.badge.badge--circle {
display: inline-flex;
aspect-ratio: 1 / 1;
justify-content: center;
align-items: center;
width: auto;
padding: 0;
}
.badge.badge--circle {
border-radius: var(--radius-full);
}
}
@utility badge--* {
font-size: calc(--value(--text-*, [length]) * 0.8);
line-height: calc(--value(--text-*--line-height, [length]) * 0.8);
height: calc(--value(--spacing-*, [length]) * 0.8);
background-color: --value(--color-ui, [color]);
color: --value(--color-ink, [color]);
border-color: --value(--color-border, [color]);
padding-inline: --value(--spacing-space-*, [length]);
gap: --value(--spacing-space-*, [length]);
&:disabled,
&[data-disabled],
&[disabled] {
color: var(--color-ink-muted);
background-color: --value(--color-ui-muted, [color]);
}
}