Packages
noora
0.50.1
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
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
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
css/table.css
.noora-table {
box-sizing: border-box;
border-radius: var(--noora-radius-2xlarge);
background: var(--noora-surface-table-header);
padding: var(--noora-spacing-2);
width: 100%;
overflow-x: auto;
overscroll-behavior-x: none;
scroll-padding-right: var(--noora-spacing-2);
& table {
position: relative;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
min-width: max-content;
/* Table elements do not support `box-shadow`, which we are using for borders. In order to still have a shadow around the body, we are
* adding a pseudo element with standard layouting around the table and add a box-shadow around it. */
&:has(td):after {
position: absolute;
top: 40px;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
box-shadow: var(--noora-border-light-default);
border-radius: var(--noora-radius-xlarge);
pointer-events: none;
content: "";
}
& tbody {
background: transparent;
/* Using `overflow` set to `auto` or `scroll`, most browsers collapse the right padding when overflowing. This visually removes the
* border around the body, which is unintended. To solve this, we are adding a pseudo element of the width of the padding to
* the right of the table. This does not get collapsed and serves as a padding. */
&:after {
display: block;
position: absolute;
right: calc(var(--noora-spacing-2) * -1);
width: var(--noora-spacing-2);
height: 1px;
pointer-events: none;
content: "";
}
& tr {
&[data-expanded] td {
background-color: var(--noora-surface-background-secondary);
}
&[data-expandable] {
cursor: pointer;
&:hover td {
background-color: var(--noora-surface-background-secondary);
}
}
&:hover {
& td[data-selectable] {
background: var(--noora-surface-background-secondary);
cursor: pointer;
}
}
& td {
background-color: var(--noora-surface-background-primary);
& > [data-part="expand-cell"] {
display: flex;
align-items: center;
gap: var(--noora-spacing-5);
padding-left: var(--noora-spacing-5);
& > svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
}
& > [data-part="expand-cell"] > [data-part="cell"] {
padding-left: 0;
}
&[data-part="expanded-content"] {
position: relative;
background-color: var(--noora-surface-background-secondary);
padding-left: var(--noora-spacing-8);
&::before {
position: absolute;
top: 0;
bottom: 0;
left: var(--noora-spacing-7);
background-color: var(--noora-surface-border-primary);
width: 1px;
content: "";
}
}
}
}
& tr:not(:first-child):not([data-part="expanded-row"]) td {
box-shadow:
0 1px 0 0
light-dark(var(--noora-neutral-light-400), oklch(0% 0 0 / 80%))
inset,
0px 2px 0px 0px
light-dark(
oklch(from var(--noora-neutral-light-500) l c h / 30%),
oklch(from var(--noora-neutral-dark-900) l c h / 35%)
)
inset;
}
& tr:not(:last-child) td {
padding-bottom: 2px;
}
& tr:not(:first-child) td {
padding-top: 2px;
}
/* Border radius on the `tbody` itself is unsupported, so we're selectively adding radius to specific cells. */
& tr:first-child {
& td:first-child {
border-top-left-radius: var(--noora-radius-xlarge);
}
& td:last-child {
border-top-right-radius: var(--noora-radius-xlarge);
}
}
& tr:last-child {
& td:first-child {
border-bottom-left-radius: var(--noora-radius-xlarge);
}
& td:last-child {
border-bottom-right-radius: var(--noora-radius-xlarge);
}
}
}
}
& th {
position: sticky;
top: 0;
background-color: var(--noora-surface-table-header);
padding: var(--noora-spacing-4) var(--noora-spacing-7)
var(--noora-spacing-5) var(--noora-spacing-7);
color: var(--noora-surface-label-primary);
font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
text-align: left;
& > [data-part="sort-link"] {
color: unset;
text-decoration: unset;
&:hover [data-part="icon"] {
color: var(--noora-surface-label-primary);
}
}
& [data-part="icon"] {
display: inline-block;
position: relative;
top: 2.5px;
left: var(--noora-spacing-2);
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
/* We cannot make `th` a flex element for vertical alignment and `gap`, so we are using `top` to vertically align, and `left` for
* spacing. */
color: var(--noora-surface-label-secondary);
& svg {
width: 100%;
height: 100%;
}
}
}
& [data-part="link"] {
text-decoration: none;
}
& [data-part="cell"] {
display: flex;
align-items: center;
box-sizing: border-box;
max-width: 100%;
&[data-type="text"] {
display: flex;
align-items: center;
gap: var(--noora-spacing-2);
padding: var(--noora-spacing-7);
font: var(--noora-font-body-medium);
& [data-part="icon"] {
display: inline-flex;
width: var(--noora-icon-size-medium);
height: var(--noora-icon-size-medium);
color: var(--noora-surface-label-primary);
& svg {
width: 100%;
height: 100%;
}
}
& [data-part="label"] {
color: var(--noora-surface-label-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& [data-part="sublabel"] {
color: var(--noora-surface-label-secondary);
}
}
&[data-type="text_and_description"] {
display: flex;
align-items: center;
gap: var(--noora-spacing-5);
padding: var(--noora-spacing-5) var(--noora-spacing-7)
var(--noora-spacing-5) var(--noora-spacing-5);
& [data-part="icon"] {
display: flex;
border-radius: var(--noora-radius-large);
color: var(--noora-surface-label-primary);
&:not(:has(img)) {
box-shadow: var(--noora-border-light-default);
padding: 10px;
}
& img {
border-radius: var(--noora-radius-large);
width: 40px;
height: 40px;
}
& svg {
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
}
}
& [data-part="column"] {
display: flex;
flex-direction: column;
}
& [data-part="label"] {
color: var(--noora-surface-label-primary);
font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
}
& [data-part="description"] {
color: var(--noora-surface-label-secondary);
font: var(--noora-font-body-small);
}
}
&[data-type="badge"],
&[data-type="status_badge"],
&[data-type="button"],
&[data-type="link_button"],
&[data-type="tag"] {
padding: var(--noora-spacing-7);
}
&[data-type="button"] {
display: flex;
gap: var(--noora-spacing-4);
}
}
& .noora-table-empty-state {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--noora-spacing-10) var(--noora-spacing-0);
& > [data-part="icon"] {
margin-bottom: var(--noora-spacing-8);
box-shadow: var(--noora-border-light-default);
border-radius: var(--noora-radius-medium);
background: var(--noora-surface-background-primary);
padding: var(--noora-spacing-3);
width: var(--noora-icon-size-large);
height: var(--noora-icon-size-large);
color: var(--noora-surface-label-primary);
& svg {
width: 100%;
height: 100%;
}
}
& > [data-part="title"] {
color: var(--noora-surface-label-secondary);
font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
}
& > [data-part="subtitle"] {
margin-top: var(--noora-spacing-4);
color: var(--noora-surface-label-tertiary);
font: var(--noora-font-body-small);
}
}
}