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
|
|
|
background: $color-subtle-light
|
|
|
|
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)
|
|
|
|
@include size($sidebar-width, 100vh)
|
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
|
|
|
|
border-right: 1px solid $color-subtle
|
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
|
|
|
& > *
|
|
|
|
padding: 0 2rem
|
|
|
|
|
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
|
|
|
|
|
|
|
.is-active
|
|
|
|
font-weight: bold
|
|
|
|
color: $color-theme
|
2016-11-03 00:52:25 +00:00
|
|
|
background: rgba($color-subtle, 0.4)
|