spaCy/website/assets/css/_components/_asides.sass

44 lines
1022 B
Sass
Raw Normal View History

2016-10-31 21:04:15 +03:00
//- 💫 CSS > COMPONENTS > ASIDES
2016-10-03 21:19:13 +03:00
2016-10-31 21:04:15 +03:00
//- Aside container
2016-10-03 21:19:13 +03:00
.c-aside
2016-10-31 21:04:15 +03:00
position: relative
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
//- Aside content
.c-aside__content
background: $color-front
2017-10-03 15:14:52 +03:00
border-top-left-radius: $border-radius
border-bottom-left-radius: $border-radius
2016-10-31 21:04:15 +03:00
z-index: 10
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
@include breakpoint(min, md)
@include position(absolute, top, left, -3rem, calc(100% + 5.5rem))
width: calc(#{$aside-width} + 2rem)
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
// Banner effect
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
&:after
$triangle-size: 2rem
2016-03-31 17:24:48 +03:00
2017-10-03 15:14:52 +03:00
@include position(absolute, bottom, left, -$triangle-size / 2, $border-radius / 2)
2016-10-31 21:04:15 +03:00
@include size(0)
border-color: transparent
border-style: solid
border-top-color: $color-dark
2017-10-03 15:14:52 +03:00
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
2016-10-31 21:04:15 +03:00
content: ""
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
@include breakpoint(max, sm)
display: block
margin: 2rem 0
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
//- Aside text
.c-aside__text
color: $color-back
padding: 1.5rem 2.5rem 3rem 2rem