Tree View Example SASS

tree.scss

$_MAX_TREE_VIEW_DEPTH: 10;

.tree {
  margin: 0 auto;
  position: relative;
  background: #fff;
  transition: 0.3s transform ease-in-out;
  overflow-x: hidden;
  width: 200px;
}

.back {
  flex: 0 0 auto;
  padding: 10px 20px;
  cursor: pointer;
  height: 40px;

  .icon {
    font-size: 20px;
  }
}

.contents {
  background: #ffffff;
  overflow: hidden;
  display: flex;
  height: 400px;
  flex-direction: column;

  .item, .group {
    padding: 0 20px;
    line-height: 50px;
    cursor: pointer;

    &:hover {
      background: #f1f1f1;
    }
  }
}

.panel-wrapper {
  flex: 1 1 auto;
}

.panels {
  white-space: nowrap;
  transform: translateX(0);
  transition: 0.3s transform ease-in-out;

  @for $i from 1 through $_MAX_TREE_VIEW_DEPTH {
    &.active-#{$i} {
      transform: translateX(-100% * $i);
    }
  }
}

.panel {
  position: absolute;
  top: 0;
  transition: 0.3s opacity ease-in;
  width: 100%;
  opacity: 0;
  height: 100%;

  &.active {
    opacity: 1;
  }
}

@for $i from 1 through $_MAX_TREE_VIEW_DEPTH {
  .panel-#{$i} {
    left: 100% * $i;
  }
}