2016-10-31 18:04:15 +00:00
|
|
|
//- 💫 CSS > COMPONENTS > SIDEBAR
|
|
|
|
|
|
|
|
|
|
//- Sidebar container
|
2016-10-03 18:19:13 +00:00
|
|
|
|
|
|
|
|
.c-sidebar
|
2016-10-31 18:04:15 +00:00
|
|
|
overflow-y: auto
|
|
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
@include breakpoint(min, md)
|
2016-10-31 18:04:15 +00:00
|
|
|
@include position(fixed, top, left, 0, 0)
|
2017-10-03 12:14:52 +00:00
|
|
|
@include size($sidebar-width, calc(100vh - 3px))
|
|
|
|
|
@include scroll-shadow($color-back, $color-front, $nav-height)
|
2016-10-03 18:19:13 +00:00
|
|
|
flex: 0 0 $sidebar-width
|
2017-06-01 11:02:36 +00:00
|
|
|
padding: calc(#{$nav-height} + 1.5rem) 0 0
|
2016-10-31 18:04:15 +00:00
|
|
|
z-index: 10
|
2016-10-03 18:19:13 +00:00
|
|
|
|
|
|
|
|
@include breakpoint(max, sm)
|
|
|
|
|
flex: 100%
|
|
|
|
|
width: 100%
|
2016-10-31 18:04:15 +00:00
|
|
|
margin-top: $nav-height
|
|
|
|
|
display: flex
|
|
|
|
|
flex-flow: row wrap
|
|
|
|
|
width: 100%
|
2016-10-03 18:19:13 +00:00
|
|
|
|
|
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
//- Sidebar section
|
2016-10-03 18:19:13 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
.c-sidebar__section
|
2016-11-03 00:52:15 +00:00
|
|
|
& > *
|
2017-10-03 12:14:52 +00:00
|
|
|
padding: 0 2rem 0.35rem
|
2016-11-03 00:52:15 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
@include breakpoint(max, sm)
|
|
|
|
|
flex: 1 1 0
|
2016-11-03 00:52:15 +00:00
|
|
|
padding: 1.25rem 0
|
2016-10-31 18:04:15 +00:00
|
|
|
border-bottom: 1px solid $color-subtle
|
|
|
|
|
margin: 0
|
2016-10-03 18:19:13 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
&:not(:last-child)
|
|
|
|
|
border-right: 1px solid $color-subtle
|
2016-10-03 18:19:13 +00:00
|
|
|
|
2017-10-03 12:14:52 +00:00
|
|
|
.c-sidebar__item
|
|
|
|
|
color: $color-theme
|
|
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
color: $color-theme-dark
|
|
|
|
|
|
|
|
|
|
& > .is-active
|
2016-10-03 18:19:13 +00:00
|
|
|
font-weight: bold
|
2017-10-03 12:14:52 +00:00
|
|
|
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
|
