@crispy-seed/data-table 0.1.0

package/dist/data-table-recipe.layered.css

@@ -0,0 +1,505 @@
+@layer seed-components {
+  .seed-data-table__root {
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 1px;
+    flex-direction: column;
+    width: 100%;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+    display: flex;
+  }
+
+  .seed-data-table__table {
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .seed-data-table__headerCell {
+    box-sizing: border-box;
+    z-index: 2;
+    vertical-align: middle;
+    text-align: start;
+    height: var(--seed-dimension-x10);
+    background-color: var(--seed-color-bg-layer-default);
+    border-top: 1px solid var(--seed-color-stroke-neutral-muted);
+    border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
+    border-inline-end: 1px solid var(--seed-color-stroke-neutral-muted);
+    color: var(--seed-color-fg-neutral);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+    letter-spacing: -.14px;
+    border-inline-start: none;
+    padding: 0;
+    position: sticky;
+    top: 0;
+  }
+
+  .seed-data-table__headerCell:last-child {
+    border-inline-end: none;
+  }
+
+  .seed-data-table__headerCell[data-sortable] {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .seed-data-table__headerCell [data-chevron] {
+    opacity: 0;
+    transition: opacity .12s;
+  }
+
+  .seed-data-table__headerCell[data-sortable]:hover [data-chevron] {
+    opacity: .6;
+  }
+
+  .seed-data-table__headerCell[data-sorted] [data-chevron] {
+    opacity: 1;
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-data-table__headerCell:hover [data-column-menu], :is(.seed-data-table__headerCell [data-column-menu][data-open], .seed-data-table__headerCell [data-column-menu]:focus-visible) {
+    opacity: 1;
+  }
+
+  .seed-data-table__headerCell[data-dragging] {
+    opacity: .5;
+  }
+
+  .seed-data-table__headerCell[data-sticky] {
+    z-index: 3;
+    background-color: var(--seed-color-bg-layer-default);
+    position: sticky;
+  }
+
+  .seed-data-table__headerCell {
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  }
+
+  .seed-data-table__headerCell:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  }
+
+  .seed-data-table__headerCell .seed-data-table-resize-handle {
+    top: 0;
+    z-index: 4;
+    cursor: col-resize;
+    touch-action: none;
+    justify-content: center;
+    align-items: center;
+    width: 7px;
+    height: 100%;
+    display: flex;
+    position: absolute;
+    inset-inline-end: -3.5px;
+  }
+
+  .seed-data-table__headerCell .seed-data-table-resize-handle-inner {
+    opacity: 0;
+    background-color: #0298d9;
+    border-radius: 3px;
+    width: 3px;
+    height: 100%;
+    transition: opacity .1s;
+  }
+
+  .seed-data-table__headerCell .seed-data-table-resize-handle:hover .seed-data-table-resize-handle-inner, .seed-data-table__headerCell .seed-data-table-resize-handle[data-resizing] .seed-data-table-resize-handle-inner {
+    opacity: 1;
+  }
+
+  .seed-data-table__headerCellInner {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--seed-dimension-x1_5);
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    padding-inline: var(--seed-dimension-x3);
+    display: flex;
+  }
+
+  .seed-data-table__headerCellLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: clip;
+  }
+
+  .seed-data-table__headerCellIcon {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
+    color: var(--seed-color-fg-neutral-subtle);
+    font: inherit;
+    cursor: pointer;
+    background: none;
+    border: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-inline-start: auto;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .seed-data-table__headerCellIcon[data-active] {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-data-table__headerCellIcon[data-column-menu] {
+    opacity: 0;
+    transition: opacity .12s;
+  }
+
+  .seed-data-table__row {
+    background-color: var(--seed-color-bg-layer-default);
+    --seed-data-table-row-bg: var(--seed-color-bg-layer-default);
+    position: relative;
+  }
+
+  .seed-data-table__row[data-clickable] {
+    cursor: pointer;
+  }
+
+  .seed-data-table__row:is([aria-selected="true"], [data-selected]) {
+    background-color: color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default));
+    --seed-data-table-row-bg: color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default));
+  }
+
+  .seed-data-table__row:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
+    background-color: color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)));
+    --seed-data-table-row-bg: color-mix(in srgb, var(--seed-color-fg-neutral) 3%, color-mix(in srgb, #0298d9 10%, var(--seed-color-bg-layer-default)));
+  }
+
+  .seed-data-table__cell {
+    box-sizing: border-box;
+    vertical-align: middle;
+    text-align: start;
+    height: var(--seed-dimension-x9);
+    border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
+    border-inline-end: 1px solid var(--seed-color-stroke-neutral-muted);
+    border-top: none;
+    padding-block: 0;
+    padding-inline: var(--seed-dimension-x3);
+    color: var(--seed-color-fg-neutral);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-regular);
+    letter-spacing: -.14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-inline-start: none;
+    position: relative;
+    overflow: clip;
+  }
+
+  .seed-data-table__cell:last-child {
+    border-inline-end: none;
+  }
+
+  tbody tr:last-child .seed-data-table__cell {
+    border-bottom: none;
+  }
+
+  .seed-data-table__cell[data-numeric] {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .seed-data-table__cell[data-sticky] {
+    z-index: 1;
+    background-color: var(--seed-data-table-row-bg);
+    position: sticky;
+  }
+
+  .seed-data-table__cell[data-editable] {
+    cursor: default;
+  }
+
+  .seed-data-table__cell .seed-data-table-edit-picker {
+    align-items: center;
+    gap: var(--seed-dimension-x1_5);
+    min-width: 0;
+    display: flex;
+  }
+
+  .seed-data-table__cell .seed-data-table-edit-pending {
+    color: var(--seed-color-fg-neutral-subtle);
+    flex-shrink: 0;
+    animation: .6s linear infinite rotate;
+  }
+
+  .seed-data-table__cell .seed-data-table-edit-error {
+    top: 100%;
+    z-index: 2;
+    color: var(--seed-color-fg-critical);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-top: 2px;
+    font-size: 12px;
+    line-height: 1.3;
+    position: absolute;
+    inset-inline-start: var(--seed-dimension-x3);
+    inset-inline-end: var(--seed-dimension-x3);
+    overflow: clip;
+  }
+
+  .seed-data-table__entity {
+    align-items: center;
+    gap: var(--seed-dimension-x1_5);
+    min-width: 0;
+    display: flex;
+  }
+
+  .seed-data-table__entityName {
+    min-width: 0;
+    font-weight: var(--seed-font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: clip;
+  }
+
+  .seed-data-table__tagList {
+    align-items: center;
+    gap: var(--seed-dimension-x1_5);
+    min-width: 0;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .seed-data-table__link {
+    color: var(--seed-color-fg-neutral);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    text-decoration: none;
+    overflow: clip;
+  }
+
+  .seed-data-table__link:is(:hover, [data-hover]) {
+    text-decoration: underline;
+  }
+
+  .seed-data-table__toolbar {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--seed-dimension-x2);
+    width: 100%;
+    min-height: 49px;
+    padding-inline: var(--seed-dimension-x3);
+    border-top: 1px solid var(--seed-color-stroke-neutral-muted);
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .seed-data-table__search {
+    flex: 1;
+    max-width: 280px;
+  }
+
+  .seed-data-table__count {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t3);
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
+
+  .seed-data-table__scrollArea {
+    flex-direction: column;
+    flex: auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    position: relative;
+    overflow: auto;
+  }
+
+  .seed-data-table__scrollArea[data-scrolled-start] [data-sticky-edge] {
+    clip-path: inset(0 -38px 0 0);
+    box-shadow: 6px 0 16px 4px #0000001f;
+  }
+
+  .seed-data-table__scrollArea[data-scrolled-end] [data-sticky-edge-end] {
+    clip-path: inset(0 0 0 -38px);
+    box-shadow: -6px 0 16px 4px #0000001f;
+  }
+
+  .seed-data-table__footerCell {
+    box-sizing: border-box;
+    z-index: 2;
+    vertical-align: middle;
+    height: var(--seed-dimension-x9);
+    background-color: var(--seed-color-bg-layer-default);
+    border-top: 1px solid var(--seed-color-stroke-neutral-muted);
+    border-inline-end: 1px solid var(--seed-color-stroke-neutral-muted);
+    border-inline-start: none;
+    padding: 0;
+    position: sticky;
+    bottom: 0;
+  }
+
+  .seed-data-table__footerCell:last-child {
+    border-inline-end: none;
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-trigger {
+    align-items: center;
+    gap: var(--seed-dimension-x1_5);
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    padding: 0 var(--seed-dimension-x3);
+    color: var(--seed-color-fg-neutral-subtle);
+    font-family: inherit;
+    font-size: var(--seed-font-size-t4);
+    font-weight: var(--seed-font-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+    background: none;
+    border: none;
+    margin: 0;
+    transition: background-color .12s, color .12s;
+    display: flex;
+    overflow: clip;
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-trigger:hover {
+    background-color: color-mix(in srgb, var(--seed-color-fg-neutral) 4%, transparent);
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-trigger[data-align="right"] {
+    justify-content: flex-end;
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-trigger svg {
+    opacity: .7;
+    flex-shrink: 0;
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-placeholder {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: clip;
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-value {
+    min-width: 0;
+    color: var(--seed-color-fg-neutral);
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
+    overflow: clip;
+  }
+
+  .seed-data-table__footerCell .seed-data-table-column-calc-op {
+    min-width: 0;
+    color: color-mix(in srgb, var(--seed-color-fg-neutral) 63%, transparent);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
+    overflow: clip;
+  }
+
+  .seed-data-table__emptyState {
+    box-sizing: border-box;
+    text-align: center;
+    padding-block: var(--seed-dimension-x8);
+    padding-inline: var(--seed-dimension-x3);
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t4);
+  }
+
+  .seed-data-table__loadingState {
+    box-sizing: border-box;
+    padding-block: var(--seed-dimension-x8);
+    padding-inline: var(--seed-dimension-x3);
+    color: color-mix(in srgb, var(--seed-color-fg-neutral) 63%, transparent);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    display: flex;
+  }
+
+  .seed-data-table__loadingState[data-inline] {
+    height: var(--seed-dimension-x9);
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  .seed-data-table__loadingState .seed-data-table-loading-spinner {
+    color: color-mix(in srgb, var(--seed-color-fg-neutral) 63%, transparent);
+    flex-shrink: 0;
+    animation: .6s linear infinite rotate;
+  }
+
+  .seed-data-table__addRowCell {
+    box-sizing: border-box;
+    border-top: none;
+    padding: 0;
+  }
+
+  .seed-data-table__addRow {
+    box-sizing: border-box;
+    border: none;
+    border-top: 1px solid var(--seed-color-stroke-neutral-muted);
+    background-color: var(--seed-color-bg-layer-default);
+    width: 100%;
+    height: var(--seed-dimension-x9);
+    align-items: center;
+    gap: var(--seed-dimension-x2);
+    padding-inline: var(--seed-dimension-x2);
+    color: var(--seed-color-fg-neutral-subtle);
+    font-family: inherit;
+    font-size: var(--seed-font-size-t4);
+    cursor: pointer;
+    margin: 0;
+    transition: background-color .12s, color .12s;
+    display: flex;
+  }
+
+  .seed-data-table__addRow:hover {
+    background-color: color-mix(in srgb, var(--seed-color-fg-neutral) 4%, var(--seed-color-bg-layer-default));
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-data-table__addRow svg {
+    flex-shrink: 0;
+  }
+
+  .seed-data-table__selectionCell {
+    text-align: center;
+    padding: 0;
+  }
+
+  .seed-data-table__root--surface_card {
+    border-color: var(--seed-color-stroke-neutral-muted);
+    background-color: var(--seed-color-bg-layer-default);
+    border-radius: var(--seed-radius-r3);
+  }
+
+  .seed-data-table__root--surface_bleed {
+    border-color: var(--seed-color-bg-transparent);
+    background-color: var(--seed-color-bg-transparent);
+  }
+
+  .seed-data-table__row--interactive_true {
+    transition: background-color .12s;
+  }
+
+  .seed-data-table__row--interactive_true:is(:hover, [data-hover]) {
+    background-color: color-mix(in srgb, var(--seed-color-fg-neutral) 3%, transparent);
+    --seed-data-table-row-bg: color-mix(in srgb, var(--seed-color-fg-neutral) 3%, var(--seed-color-bg-layer-default));
+  }
+}