| xos-nav { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| flex-basis: 15%; |
| background: darken(grey, 10); |
| overflow-y: scroll; |
| |
| ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| background: grey; |
| |
| > li { |
| display: flex; |
| flex-direction: column; |
| border-bottom: 1px solid darken(grey, 20); |
| |
| &.active { |
| background: darken(grey, 10); |
| |
| > a { |
| color: #5aadbb; |
| } |
| } |
| |
| &:hover { |
| background: darken(grey, 10); |
| } |
| |
| > a { |
| padding: 10px 20px; |
| cursor: pointer; |
| } |
| |
| // child router |
| > ul { |
| height: 0; |
| overflow: hidden; |
| transition: .5s all; |
| |
| > li { |
| padding-left: 20px; |
| background: darken(grey, 15); |
| |
| &:hover, &.active { |
| background: darken(grey, 20); |
| } |
| } |
| } |
| |
| > ul.opened { |
| height: auto; |
| } |
| } |
| } |
| } |