spaCy/website/assets/css/_components/_sidebar.sass
2017-10-03 14:14:52 +02:00

96 lines
2.0 KiB
Sass

//- 💫 CSS > COMPONENTS > SIDEBAR
//- Sidebar container
.c-sidebar
overflow-y: auto
@include breakpoint(min, md)
@include position(fixed, top, left, 0, 0)
@include size($sidebar-width, calc(100vh - 3px))
@include scroll-shadow($color-back, $color-front, $nav-height)
flex: 0 0 $sidebar-width
padding: calc(#{$nav-height} + 1.5rem) 0 0
z-index: 10
@include breakpoint(max, sm)
flex: 100%
width: 100%
margin-top: $nav-height
display: flex
flex-flow: row wrap
width: 100%
//- Sidebar section
.c-sidebar__section
& > *
padding: 0 2rem 0.35rem
@include breakpoint(max, sm)
flex: 1 1 0
padding: 1.25rem 0
border-bottom: 1px solid $color-subtle
margin: 0
&:not(:last-child)
border-right: 1px solid $color-subtle
.c-sidebar__item
color: $color-theme
&:hover
color: $color-theme-dark
& > .is-active
font-weight: bold
color: $color-dark
margin-top: 1rem
//- Sidebar subsections
$crumb-bullet: 14px
$crumb-bar: 2px
.c-sidebar__crumb
display: block
padding-top: 1rem
padding-left: 1rem
position: relative
.c-sidebar__crumb__item
margin-bottom: $crumb-bullet / 2
position: relative
padding-left: 2rem
color: $color-theme
font-size: 1.2rem
&:hover
color: $color-theme-dark
&:after
@include size($crumb-bullet)
@include position(absolute, top, left, $crumb-bullet / 4, 0)
content: ""
border-radius: 50%
background: $color-theme
z-index: 10
&:not(:last-child):before
@include size($crumb-bar, 100%)
@include position(absolute, top, left, $crumb-bullet, ($crumb-bullet - $crumb-bar) / 2)
content: ""
background: $color-subtle
&:first-child:before
height: calc(100% + #{$crumb-bullet * 2})
top: -$crumb-bullet / 2
&.is-active
color: $color-dark
&:after
background: $color-dark