Packages
corex
0.1.0-beta.3
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/radio-group.css
@import "../main.css";
@layer components {
.radio-group {
width: 100%;
max-width: var(--container-md);
}
.radio-group[data-loading] [data-scope="radio-group"][data-part="root"] {
@apply ui-loading;
}
.radio-group [data-scope="radio-group"][data-part="root"] {
@apply ui-root;
gap: --spacing(4);
position: relative;
padding-inline-end: var(--spacing-space);
}
.radio-group [data-scope="radio-group"][data-part="root"][data-readonly],
.radio-group [data-scope="radio-group"][data-part="root"][data-read-only] {
@apply ui-readonly;
}
.radio-group [data-scope="radio-group"][data-part="label"] {
@apply ui-label;
}
[data-scope="radio-group"][data-part="item"] {
display: inline-flex;
align-items: center;
position: relative;
max-width: var(--container-md);
width: auto;
gap: --spacing(4);
margin-inline: auto;
cursor: pointer;
}
[data-scope="radio-group"][data-part="item"][data-disabled] {
cursor: not-allowed;
}
[data-scope="radio-group"][data-part="item-control"] {
height: --spacing(8);
width: --spacing(8);
background: var(--color-ui);
color: var(--color-ink);
font-weight: var(--font-weight-normal);
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: --spacing(4);
&[data-state="checked"] {
background: var(--color-selected);
color: var(--color-selected-ink);
border-color: var(--color-selected);
}
&[data-state="unchecked"] {
background: var(--color-ui);
color: var(--color-ink);
border-color: var(--color-border);
}
&:hover {
background-color: var(--color-ui-hover);
}
&:active {
background-color: var(--color-ui-active);
}
&[data-state="checked"]:hover {
background-color: var(--color-selected-hover);
}
&[data-state="checked"]:active {
background-color: var(--color-selected-active);
}
&:focus-visible,
&[data-focus] {
outline: none;
box-shadow: inset 0 0 0 2px var(--color-ink);
}
&[data-state="checked"]:focus-visible,
&[data-state="checked"][data-focus] {
box-shadow: inset 0 0 0 2px var(--color-selected-ink);
}
&:disabled,
&[data-disabled],
&[disabled] {
color: var(--color-ink-muted);
background-color: var(--color-ui-muted);
cursor: not-allowed;
}
&[data-invalid] {
color: var(--color-alert);
border-color: var(--color-alert);
}
&[data-required] {
color: var(--color-alert);
border-color: var(--color-alert);
}
}
[data-scope="radio-group"][data-part="item-control"] .data-checked {
display: none !important;
}
[data-scope="radio-group"][data-part="item-control"][data-state="checked"]
.data-checked {
display: block !important;
@apply ui-icon;
color: inherit;
width: 100%;
height: 100%;
}
}