mixtape/zero.Backoffice.UI/app/components/ui-table.scss

.ui-table
{
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  position: relative;
  background: var(--color-table);
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  min-width: auto;
  border-radius: var(--radius);
  table-layout: fixed;
  word-wrap: break-word;
  font-size: var(--font-size);
  width: 100%;
  box-shadow: var(--shadow-short);

  &.is-inline
  {
    box-shadow: none;
    border: 1px solid var(--color-line);
  }
}

.ui-table-row
{
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row nowrap;
  -webkit-box-align: center;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid var(--color-table-line-horizontal);
  position: relative;
  transition: outline 0.1s ease, box-shadow 0.1s ease;
  color: var(--color-text);

  &:last-child
  {
    border-bottom: none;
  }

  .ui-table.is-inline &
  {
    border-bottom-color: var(--color-line);
  }
}

a.ui-table-row:hover, button.ui-table-row:hover
{
  //box-shadow: var(--shadow-mid);
  background: var(--color-table-hover); 
  z-index: 2;
}


.ui-table-head
{
  font-weight: 700;
  border-radius: 5px 5px 0 0;
  color: var(--color-text);
  position: sticky;
  top: 0;
  //border-bottom: 1px solid var(--color-line);
  z-index: 3;
  background: var(--color-table-head);
  /*border-bottom: 2px solid var(--color-bg);*/

  .ui-table-cell
  {
    justify-content: space-between; 
    font-size: var(--font-size-s);
  }

  .ui-table.is-inline &
  { 
    background: var(--color-box);
  }
}

.ui-table-cell
{
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 5%;
  position: relative;
  text-align: left;
  padding: 15px 20px 14px 20px;
  border-left: 1px solid var(--color-table-line-vertical);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 58px;
  min-width: 20px;
  line-height: 20px;

  &:first-child
  {
    border-left: none;
  } 

  &.is-multiline
  {
    white-space: normal;
    overflow: auto;
    text-overflow: initial;
  }

  &.is-bold
  {
    font-weight: bold;
  }

  &.is-selectable, &.is-options
  {
    font-size: var(--font-size-l);
    flex: 0 1 40px;
    text-align: center;
    padding: 0;
    justify-content: flex-end;

    .ui-native-check-toggle
    {
      margin-right: 0;
    }
  }

  &.is-options
  {
    overflow: visible;
    flex: 0 1 60px;
  }
}

.ui-table-row:not(.ui-table-head) .ui-table-cell
{
  color: var(--color-text-dim);

  &.is-primary, &:first-child
  {
    color: var(--color-text);
  }

  &.is-vertical
  {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  &.is-name .ui-icon
  {
    margin-left: .6em;
    color: var(--color-synchronized);
  }
}

.ui-table-row:not(.is-selected) .ui-table-cell:not(.is-head).is-selectable i
{
  color: var(--color-text);
  margin-right: 1px;

  &:before
  {
    content: "\e8cb";
  }
}

.ui-table-sort
{
  height: 20px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  border-radius: 15px;
  transition: background 0.2s ease;

  &[disabled]
  {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .arrow
  {
    border-top-color: var(--color-text);
    transition: opacity 0.2s ease, transform 0.3s ease;
    opacity: 0.2;
  }

  /*&:hover
  {
    background: var(--color-bg);
  }*/

  &:hover .arrow
  {
    opacity: 0.5;
  }

  &.sort-desc .arrow, &.sort-asc .arrow, 
  {
    opacity: 1;
  }

  &.sort-asc .arrow
  {
    transform: scaleY(-1) translateY(5px);
  }
}

.ui-table-empty, .ui-table-loading
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 250px;
  text-align: center;
  padding: 0 20px;
}

.ui-table.is-inline .ui-table-empty,
.ui-table.is-inline .ui-table-loading
{
  height: auto;
  padding: var(--padding) 20px;
}

.ui-table-empty-icon
{
  margin-bottom: 20px;
}


/* special styling for display types */

.ui-table-field-bool
{
  color: var(--color-text-dim-one);
}
.ui-table-field-bool[data-symbol="fth-check"]
{
  color: var(--color-primary);
}

.ui-table-cell[field-type="datetime"]
{
  display: inline;

  .-minor
  {
    color: var(--color-text-dim);
  }
}

.ui-table-cell .-minor
{
  color: var(--color-text-dim);
  font-weight: 400;
  font-size: var(--font-size-xs);
}

.ui-table-field-image
{
  border-radius: 3px;

  &.is-error
  {
    opacity: 0;
  }
}


.ui-table-cell .state
{
  display: inline-flex;
  align-self: center;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-table-highlight);
  padding: 4px 12px;
  border-radius: 20px;

  &[data-state="completed"], &[data-state="cancelled"],
  &[data-state="none"], &[data-state="captured"], &[data-state="authorized"], &[data-state="cancelled"], &[data-state="refunded"]
  {
    font-weight: 400;
    color: var(--color-text-dim);
  }
  &[data-state="error"]
  {
    color: var(--color-accent-error);
    background: var(--color-accent-error-bg);
  }
  &[data-payment-state]
  {
    font-weight: 400;
    color: var(--color-text-dim);
  }

  &[data-payment-state="error"]
  {
    color: var(--color-accent-error);
    background: var(--color-accent-error-bg);
  }
}

.ui-table-row:hover .ui-table-cell .state
{
  background: var(--color-bg-shade-4);
}