app/assets/stylesheets/promethee.sass
@import "@fancyapps/fancybox/dist/jquery.fancybox.min"
$black: #000000 !default
// aside
// blockquote
// collection
// cover
// faq
// image
// slider
// table
// text
.promethee
&__component
&__page > &
@extend .container
margin-bottom: $grid-gutter-width*2
&__page > &__cover
max-width: 100%
&__page > &__row,
&__page > &__collection
padding-left: 0
padding-right: 0
&__aside
.aside__button
a
display: inline-block
&--center
text-align: center
&--left
text-align: left
&--right
text-align: right
&__blockquote
.blockquote
border: none
font-size: 30px
text-align: center
p
display: inline
font-size: 30px
div
margin-bottom: 20px
&::before, &::after
display: inline-block
&::before
content: '“ '
&::after
content: ' ”'
.author
font-size: 14px
&__collection
margin-bottom: $grid-gutter-width
[class*="col-"]
margin-bottom: $grid-gutter-width
.collection-item__content
&:not(:last-of-type)
margin-bottom: $grid-gutter-width
&__caption
margin-top: 10px
p:last-of-type
margin-bottom: 0
&__cover
background-position: center center
background-repeat: no-repeat
background-size: cover
display: flex
flex-direction: column
justify-content: center
margin-bottom: 50px
min-height: 300px
padding: $grid-gutter-width 0
position: relative
text-align: center
&::before
background-color: rgba(0,0,0,.3)
bottom: 0
content: ''
left: 0
pointer-events: none
position: absolute
right: 0
top: 0
h1,
p
color: white
position: relative
p:last-of-type
margin-bottom: 0
&__image
margin-bottom: $grid-gutter-width
figcaption
margin-top: 10px
&__faq
&_item:not(:last-of-type)
padding-bottom: 20px
h4
cursor: pointer
position: relative
&::after
border-right: 2px solid $black
border-top: 2px solid $black
content: ''
display: block
height: 8px
position: absolute
right: 10px
top: 5px
transform: rotate(135deg)
transition: transform .4s ease
width: 8px
&[aria-expanded="true"]
&::after
transform: rotate(315deg)
a
display: block
p:last-child
margin-bottom: 0
&__slider
overflow: hidden
.promethee__component
margin-bottom: 0
.carousel-item
margin-bottom: 0
&__content
text-align: center
p:last-of-type
margin-bottom: 0
margin-top: 10px
.carousel-control
align-items: center
display: flex
justify-content: center
padding: 5px
&-prev,
&-next
color: $black
&-prev
justify-content: flex-start
&-next
justify-content: flex-end
.fontawesome-carousel-control .fa
font-size: 30px
&__table
tr
p
line-height: $line-height-base
margin-bottom: 0
&.empty
background-color: #EEEEEE
td
line-height: 1px
padding-bottom: 1px
padding-top: 1px
// component direct in root
&__page > &__blockquote,
&__page > &__cover
.promethee__component
&__row
@extend .row
&__content
@extend .col-md-8
@extend .offset-md-2 !optional
@extend .col-md-offset-2 !optional
&__page > &__aside,
&__page > &__faq,
&__page > &__image,
&__page > &__text,
&__page > &__video
.promethee__component
&__row
@extend .row
&__content
@extend .col-md-10
@extend .offset-md-1 !optional
@extend .col-md-offset-1 !optional
@media screen and (max-width: 767.98px)
&__page > &
margin-bottom: $grid-gutter-width
&__page > &__slider,
&__page > &__video
padding-left: 0
padding-right: 0
.promethee__component__row
margin-left: 0
margin-right: 0
.promethee__component__content
padding-left: 0
padding-right: 0
@media screen and (max-width: 900px)
&__cover
min-height: 450px
@media screen and (max-width: 1200px)
&__cover
min-height: 600px
@media print
body
font-size: 125%
.promethee
&__component
&__page > div:not(&__cover):not(&__slider)
max-width: 90%
.container
max-width: 90%