2016-10-03 21:19:13 +03:00
|
|
|
//- ----------------------------------
|
|
|
|
|
//- 💫 COMPONENTS > ASIDES
|
|
|
|
|
//- ----------------------------------
|
|
|
|
|
|
|
|
|
|
//- Aside
|
|
|
|
|
|
|
|
|
|
.c-aside
|
|
|
|
|
@include breakpoint(min, md)
|
|
|
|
|
@include position(absolute, top, left, 0, calc(100% + #{$aside-padding}))
|
|
|
|
|
border-left: 1px solid $color-subtle
|
|
|
|
|
opacity: 0.5
|
|
|
|
|
transition: opacity 0.25s ease
|
|
|
|
|
padding: 0 $aside-padding
|
2016-03-31 17:24:48 +03:00
|
|
|
width: $aside-width
|
|
|
|
|
|
2016-10-03 21:19:13 +03:00
|
|
|
&:hover
|
|
|
|
|
opacity: 1
|
2016-03-31 17:24:48 +03:00
|
|
|
|
2016-10-03 21:19:13 +03:00
|
|
|
@include breakpoint(max, sm)
|
2016-03-31 17:24:48 +03:00
|
|
|
display: block
|
2016-10-03 21:19:13 +03:00
|
|
|
margin: type(5) 0
|
2016-03-31 17:24:48 +03:00
|
|
|
|
|
|
|
|
|
2016-10-03 21:19:13 +03:00
|
|
|
//- Aside label
|
2016-03-31 17:24:48 +03:00
|
|
|
|
2016-10-03 21:19:13 +03:00
|
|
|
.c-aside__label
|
2016-03-31 17:24:48 +03:00
|
|
|
display: block
|
2016-10-03 21:19:13 +03:00
|
|
|
margin-bottom: 1rem
|
2016-03-31 17:24:48 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// Aside container
|
|
|
|
|
|
|
|
|
|
.has-aside
|
|
|
|
|
position: relative
|
|
|
|
|
|
2016-10-03 21:19:13 +03:00
|
|
|
&:hover > .c-aside
|
|
|
|
|
opacity: 1
|
