treetables/tree-table.css

jquery plugin extending jquery-datatables to support tree data

tr .tt-details-control {
  vertical-align: middle !important; }
  tr .tt-details-control .expander {
    position: relative;
    color: transparent;
    margin: 0 10px; }

tr.has-child .tt-details-control {
  cursor: pointer; }
  tr.has-child .tt-details-control .expander {
    cursor: pointer; }
    tr.has-child .tt-details-control .expander::after {
      content: '';
      position: absolute;
      -webkit-transform: translate(-18%, -50%) rotate(-90deg);
      transform: translate(-18%, -50%) rotate(-90deg);
      border-left: 5.04px solid transparent;
      border-right: 5.04px solid transparent;
      border-top: 7px solid #000;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      cursor: pointer; }

tr.open .tt-details-control .expander::after {
  -webkit-transform: translate(-18%, -50%) rotate(0);
  transform: translate(-18%, -50%) rotate(0); }

tr:not(.has-child) .tt-details-control .expander::after {
  content: '-';
  font-weight: bold;
  color: #000;
  border: 0; }

tr.level-1 .tt-details-control .expander::after {
  margin-left: 10px; }

tr.level-2 .tt-details-control .expander::after {
  margin-left: 20px; }

tr.level-3 .tt-details-control .expander::after {
  margin-left: 30px; }

tr.level-4 .tt-details-control .expander::after {
  margin-left: 40px; }

tr.level-5 .tt-details-control .expander::after {
  margin-left: 50px; }