Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Tree View Example SASS
$_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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment