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

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

@require "../../stylus/index.styl";
@require "./oui-virtual-list.styl";

.oui-tableview {
  // display: block; // for responisve scrolling
  use: stack-y;
  width: 100%;
  overflow: hidden;
  border-collapse: collapse;
  position: relative;

  .oui-separator {
    // --separator: red;
    // --separator-handle: green;
    position: absolute;
  }

  ._tableview {
    &_row {
      display: grid;
      grid-template-columns: var(--tableview-columns);
      min-width: 100%;
      width: max-content; // fixes backround scroll issues
    }

    &_cell {
      margin: 0;
      padding: 4 8;
      use: ellipsis;

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

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

    &_header {
      ._tableview_row {
        font-weight: 600;
        border-bottom: 2px solid var(--s2-fg);
      }

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

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

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

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

    &_body {
      use: stack-item-grow;

      ._tableview_cell {
        vertical-align: top;
        border-right: 1px solid var(--t3-bg);

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

      ._tableview_row {
        border-bottom: 1px solid var(--s2-fg);

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

        &._active {
          background: var(--p1-bg);
        }
      }
    }

    &_footer {
      ._tableview_row {
        border-top: 2px solid var(--s2-fg);
        overflow: hidden;
      }
    }
  }
}