Packages
corex
0.1.0-alpha.31
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/components/select.css
@import "../main.css";
@layer components {
.select [data-scope="select"][data-part="root"] {
@apply ui-root;
width: var(--container-mini);
gap: var(--spacing-ui-gap);
}
.select [data-scope="select"][data-part="label"] {
@apply ui-label;
}
.select [data-scope="select"][data-part="control"] {
display: flex;
width: 100%;
position: relative;
}
.select [data-scope="select"][data-part="trigger"] {
@apply ui-trigger;
justify-content: space-between;
width: 100%;
}
.select [data-scope="select"][data-part="positioner"] {
position: relative;
}
.select [data-scope="select"][data-part="content"] {
@apply ui-content;
border: 1px solid var(--color-ui--border);
z-index: 50;
padding: 0;
border-radius: var(--radius-ui);
overflow: hidden;
box-shadow: var(--shadow-ui);
&:focus-visible {
outline: none;
}
}
.select [data-scope="select"][data-part="item-group"] {
display: flex;
flex-direction: column;
}
.select [data-scope="select"][data-part="item-group-label"] {
font-size: var(--text-ui);
line-height: var(--text-ui--line-height);
text-align: start;
padding-inline: var(--spacing-ui-padding);
padding-block: var(--spacing-mini-padding-sm);
background-color: var(--color-root);
color: var(--color-root--text);
border-bottom: 1px solid var(--color-ui--border);
}
.select [data-scope="select"][data-part="item"] {
@apply ui-item;
}
.select [data-scope="select"][data-part="item-text"] {
width: 100%;
text-align: start;
}
.select [data-scope="select"][data-part="error"] {
@apply ui-error;
}
}
@utility select--* {
[data-scope="select"][data-part="root"] {
width: --value(--container-*, [length]);
}
[data-scope="select"][data-part="label"] {
font-size: --value(--text-ui-*, [length]);
line-height: --value(--text-ui-* --line-height, [length]);
}
[data-scope="select"][data-part="trigger"] {
font-size: --value(--text-ui-*, [length]);
line-height: --value(--text-ui-* --line-height, [length]);
min-height: --value(--spacing-ui-*, [length]);
}
[data-scope="select"][data-part="control"] {
max-width: --value(--container-mini-*, [length]);
gap: --value(--spacing-mini-gap-*, [length]);
}
[data-scope="select"][data-part="item"] {
font-size: --value(--text-ui-*, [length]);
line-height: --value(--text-ui-* --line-height, [length]);
min-height: --value(--spacing-ui-*, [length]);
}
/* States for item */
[data-scope="select"][data-part="item"][data-selected],
[data-scope="select"][data-part="item"][data-state="checked"] {
background-color: --value(--color-ui-*, [color]);
color: --value(--color-ui-* --text, [color]);
}
[data-scope="select"][data-part="item"][data-selected]:hover,
[data-scope="select"][data-part="item"][data-state="checked"]:hover {
background-color: --value(--color-ui-* -hover, [color]);
color: --value(--color-ui-* --text, [color]);
}
[data-scope="select"][data-part="item"][data-selected]:active {
background-color: --value(--color-ui-* -active, [color]);
color: --value(--color-ui-* --text, [color]);
}
[data-scope="select"][data-part="item"][data-highlighted] {
outline: none;
box-shadow: inset 0 0 0 2px --value(--color-ui-* --text, [color]);
background-color: --value(--color-ui-* -hover, [color]);
color: --value(--color-ui-* --text, [color]);
}
[data-scope="select"][data-part="item"][data-selected][data-highlighted],
[data-scope="select"][data-part="item"][data-state="checked"][data-highlighted] {
outline: none;
box-shadow: inset 0 0 0 2px --value(--color-ui-* --text, [color]);
background-color: --value(--color-ui-* -hover, [color]);
color: --value(--color-ui-* --text, [color]);
}
}