oui-kit/lib/basic/oui-table.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-table {
  display: block; // for responisve scrolling
  max-width: 100%;
  overflow-x: auto; // this does not work together with sticky headers
  border-collapse: collapse;

  th, td {
    margin: 0;
    padding: 4 8;

    > :first-child {
      padding-left: 0;
    }

    > :last-child {
      padding-right: 0;
    }

    &._grow {
      width: 99%;
    }
  }

  th {
    font-weight: 600;
  }

  tbody {
    td, th {
      vertical-align: top;
      border-bottom: 1px solid var(--s2-fg);
      border-right: 1px solid var(--t3-bg);

      > :last-child {
        border-right: none;
      }
    }

    tr._selectable:hover:not(._active) {
      background: var(--t3-bg);
    }

    tr._active {
      background: var(--s2-bg);
    }

    /* tr:last-child td {
      border-bottom: none;
    } */
  }

  thead {
    th {
      border-bottom: 2px solid var(--s2-fg);
      user-select: none;
    }

    ._sortable {
      cursor: unquote("pointer");
      user-select: none;
      position: relative;
      padding-right: 16;
    }

    ._sortable[align=right] {
      padding-right: 8;
      padding-left: 16;
    }

    ._active {
      color: var(--p1-fg);
    }

    ._asc[align=right], ._desc[align=right] {
      padding-right: 16;
      padding-left: 8;
    }

    ._asc:after, ._desc:after {
      position: absolute;
      right: 4;
    }

    ._asc:after {
      content: "▴";
    }

    ._desc:after {
      content: "▾";
    }
  }
}