Add connector line in Tree View to make files belonging to folders more obvious

Created by lee-dohm
Last updated about 4 months ago
// From https://github.com/atom/tree-view/issues/662#issuecomment-166201370

.tree-view .selected:before {
  background: hsla(0, 0%, 100%, .2); // show lines underneath
}

.tree-view .directory {
  & > .list-item:before {
    visibility: hidden; // hide arrows
  }

  .selected > .header.list-item ~ .entries.list-tree {
    background:
      linear-gradient(
        to right,
        transparent 24px,
        darken(@base-background-color, 30%) 24px,
        darken(@base-background-color, 30%) 25px,
        transparent 25px
      );
  }

  .header.list-item:hover ~ .entries.list-tree {
    background: linear-gradient(to right, transparent 24px, @text-color 24px, @text-color 25px, transparent 25px);
  }
}