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