Packages
corex
0.1.0-alpha.30
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/data-table.css
@import "../main.css";
@layer components {
.data-table {
@apply scrollbar;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: auto;
border-radius: var(--radius-ui);
border: 1px solid var(--color-ui--border);
}
.data-table [data-scope="data-table"][data-part="root"] {
display: table;
width: max-content;
min-width: 100%;
max-width: none;
border-collapse: collapse;
}
.data-table [data-scope="data-table"][data-part="thead"] {
border-bottom: 1px solid var(--color-ui--border);
color: var(--color-ui--text);
text-transform: uppercase;
font-size: var(--text-ui-sm);
}
.data-table [data-scope="data-table"][data-part="thead"] th,
.data-table [data-scope="data-table"][data-part="action-header"],
.data-table [data-scope="data-table"][data-part="selection-header"] {
text-align: left;
padding: var(--spacing-ui-padding) var(--spacing-ui-padding);
font-weight: var(--font-weight-ui-bold);
white-space: nowrap;
width: 1%;
background-color: var(--color-ui-active);
}
.data-table [data-scope="data-table"][data-part="action-header"] {
text-align: right;
}
.data-table [data-scope="data-table"][data-part="sort-header"] {
display: flex;
align-items: center;
gap: var(--spacing-ui-mini-gap);
width: 100%;
}
.data-table [data-scope="data-table"][data-part="sort-trigger"] {
@apply ui-trigger ui-trigger--sm ui-trigger--circle;
}
.data-table [data-scope="data-table"][data-part="sort-text"] {
flex: 1;
text-align: left;
}
.data-table [data-scope="data-table"][data-part="tbody"] tr[data-part="empty-row"]:not(:only-child) {
display: none;
}
.data-table [data-scope="data-table"][data-part="tbody"] tr {
border-bottom: 1px solid var(--color-ui--border);
transition: background-color 0.2s ease-in-out;
}
.data-table [data-scope="data-table"][data-part="tbody"] tr:last-child {
border-bottom: none;
}
.data-table [data-scope="data-table"][data-part="cell"],
.data-table [data-scope="data-table"][data-part="selection-cell"] {
padding: var(--spacing-ui-padding) var(--spacing-ui-padding);
vertical-align: middle;
white-space: nowrap;
width: 1%;
}
.data-table [data-scope="data-table"][data-part="row"]:hover {
background-color: var(--color-ui-active);
padding-inline: var(--spacing-ui-padding);
}
.data-table [data-scope="data-table"][data-part="actions"] {
display: flex;
gap: var(--spacing-ui-gap);
justify-content: flex-end;
padding-inline: var(--spacing-ui-padding);
}
}
@utility data-table--* {
font-size: --value(--text-ui-*, [length]);
line-height: --value(--text-ui-* --line-height, [length]);
[data-scope="data-table"][data-part="thead"] {
font-size: calc(--value(--text-ui-*, [length]) * 0.85);
}
[data-scope="data-table"][data-part="cell"],
[data-scope="data-table"][data-part="selection-cell"],
[data-scope="data-table"][data-part="selection-header"],
[data-scope="data-table"][data-part="action-header"],
[data-scope="data-table"][data-part="thead"] th {
padding: --value(--spacing-ui-padding-*, [length]);
}
}