spur-tailwind/css/components/table.css

Spur web UI

$warning-icon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 576 512"><path fill="#f5bf5f" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>';
$error-icon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 576 512"><path fill="#f55f6e" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>';

.table-styled {
  @apply block overflow-x-auto;
}

.table-styled table {
  @apply w-full;
  border-collapse: collapse;
  border-spacing: 0;
}

.table-styled thead tr {
  @apply .border-b-2 .border-filter-grey;
}

.table-styled th {
  @apply text-left p-5 text-spur-grey font-semibold whitespace-no-wrap align-top;
}

.table-styled tbody {
  @apply .border-b .border-filter-grey;
}

.table-styled tbody tr {
  @apply .border-t .border-filter-grey bg-transparent;
  transition: background-color 300ms ease-in-out;
}

.table-styled td {
  @apply p-5 leading-normal whitespace-no-wrap align-top;
}

.table-styled tr th:first-child,
.table-styled tr td:first-child {
  @apply px-2;
}

/* Has overflow */
.table-styled.has-overflow {
  @apply relative;
}

.table-styled.has-overflow > div {
  @apply overflow-x-scroll;
}

.table-styled.has-overflow::before,
.table-styled.has-overflow::after {
  @apply absolute inset-y-0 block w-8 h-full opacity-100;
  content: '';
  transition: opacity 200ms ease-in-out;
}

.table-styled.has-overflow::before {
  @apply left-0;
  background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%);
}

.table-styled.has-overflow.is-at-start::before {
  @apply opacity-0;
}

.table-styled.has-overflow::after {
  @apply right-0;
  background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%);
}

.table-styled.has-overflow.is-at-end::after {
  @apply opacity-0;
}

/* User avatars */
.table-styled-avatar {
  @apply block mr-3 text-support-purple border border-support-purple border-solid rounded-full overflow-hidden;
}

.table-styled-avatar img {
  min-width: 46px;
}

/* Selected row state */
.table-styled .is-selected {
  @apply bg-background-grey;
}

/* Warning state */
.table-styled .has-warning {
  @apply relative;
}

.table-styled .has-warning::before {
  @apply absolute;
  left: -0.75rem;
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  background-image: url($warning-icon);
}

/* Error state */
.table-styled .has-error {
  @apply bg-light-watermelon;
}

.table-styled .has-error .error {
  @apply text-deep-watermelon;
}

.table-styled .has-error td:last-child {
  @apply relative;
}

.table-styled .has-error td:last-child::before {
  @apply absolute;
  right: 1.25rem;
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  background-image: url($error-icon);
}

/* no data state */
.table-styled.is-empty th,
.table-styled.is-empty td {
  @apply text-center text-border-line-purple;
}

.table-styled.is-empty td {
  @apply py-10 px-2;
}

/* Check box fixes */
.table-styled .check {
  width: 20px;
}

.table-styled .check-text {
  @apply pl-0;
}

/* Adjacent table row state */
.table-styled tbody tr.is-adjacent {
  @apply border-0;
}

.table-styled tbody tr.is-adjacent td {
  @apply pt-0;
}

/* Reports table modifiers */
.table-styled.table-styled-reports {
  @apply .border-t .border-filter-grey;
}

.table-styled.table-styled-reports tr th:first-child,
.table-styled.table-styled-reports tr td:first-child {
  @apply w-full;
}

.table-styled.table-styled-reports tr th:last-child,
.table-styled.table-styled-reports tr td:last-child {
  @apply w-6 pr-5;
}

.table-styled.table-styled-reports th,
.table-styled.table-styled-reports td {
  @apply align-middle;
}

/* Fixed column table style */
.table-styled.table-styled-fixed-column {
  @apply .relative .pb-1 .overflow-hidden .border-b .border-filter-grey;
}

.table-styled.table-styled-fixed-column > div {
  @apply overflow-x-scroll pb-4;
  margin-left: 10rem;
}

.table-styled.table-styled-fixed-column tr th:first-child,
.table-styled.table-styled-fixed-column tr td:first-child {
  @apply absolute bg-white;
  width: 10rem;
  left: 0;
  top: auto;
  box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.12);
}

.table-styled.table-styled-fixed-column tr th:first-child {
  @apply .border-b-2 .border-filter-grey;
}

.table-styled.table-styled-fixed-column tr td:first-child {
  @apply .border-b .border-filter-grey;
}

/* Draggable styles */
.table-styled .sortable-list-item,
.table-styled .sortable-list-item:focus,
.table-styled .sortable-list-item:active {
  outline: none !important;
}

.table-styled .sortable-list-item {
  @apply cursor-pointer;
  transition: opacity 200ms ease-in-out;
}

.table-styled .draggable-mirror,
.table-styled .draggable-mirror:focus,
.table-styled .draggable-mirror:active {
  @apply .border .border-filter-grey .bg-white .shadow-md;
  outline: none;
}

.table-styled .draggable-source--is-dragging {
  @apply opacity-0;
}

/* Clickable rows modifier */
.table-styled.is-clickable tbody > tr:hover {
  @apply .bg-buzz-purple-5 .cursor-pointer;
}

/* Vertically center */
.table-styled.is-vertically-centered td {
  @apply align-middle;
}

/* Table scroll controls */
.table-scroll-controls {
  @apply absolute inset-x-0 flex justify-between;
  top: 0.5rem;

  & .table-scroll-control,
  & .table-scroll-control:hover {
    @apply relative z-10 px-2 opacity-100 bg-white shadow;
    transition: opacity 200ms ease-in-out;
  }

  & .table-scroll-control[disabled] {
    @apply opacity-0 pointer-events-none;
  }
}

.border-collapse {
  border-collapse: collapse;
}