mirror of https://github.com/explosion/spaCy.git
44 lines
1022 B
Sass
44 lines
1022 B
Sass
//- 💫 CSS > COMPONENTS > ASIDES
|
|
|
|
//- Aside container
|
|
|
|
.c-aside
|
|
position: relative
|
|
|
|
|
|
//- Aside content
|
|
|
|
.c-aside__content
|
|
background: $color-front
|
|
border-top-left-radius: $border-radius
|
|
border-bottom-left-radius: $border-radius
|
|
z-index: 10
|
|
|
|
@include breakpoint(min, md)
|
|
@include position(absolute, top, left, -3rem, calc(100% + 5.5rem))
|
|
width: calc(#{$aside-width} + 2rem)
|
|
|
|
// Banner effect
|
|
|
|
&:after
|
|
$triangle-size: 2rem
|
|
|
|
@include position(absolute, bottom, left, -$triangle-size / 2, $border-radius / 2)
|
|
@include size(0)
|
|
border-color: transparent
|
|
border-style: solid
|
|
border-top-color: $color-dark
|
|
border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
|
|
content: ""
|
|
|
|
@include breakpoint(max, sm)
|
|
display: block
|
|
margin: 2rem 0
|
|
|
|
|
|
//- Aside text
|
|
|
|
.c-aside__text
|
|
color: $color-back
|
|
padding: 1.5rem 2.5rem 3rem 2rem
|