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

> *...c'est un "kit" pour Vue.js :)*

@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;
    }
  }

  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);
    }

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

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

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

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