1
0
mirror of https://github.com/ascribe/wp-theme synced 2024-12-22 09:13:38 +01:00

nicer answer opening

This commit is contained in:
Matthias Kretschmann 2016-03-12 20:44:20 +01:00
parent 9910758fe4
commit b04f89eba2

View File

@ -8,11 +8,19 @@
margin-left: 20px; margin-left: 20px;
} }
//
// FAQ Section Title
//
.faq__title { .faq__title {
&:extend(.h2); &:extend(.h2);
margin-top: 0; margin-top: 0;
} }
//
// FAQ Question
//
.faq__question { .faq__question {
&:extend(.bold); &:extend(.bold);
display: block; display: block;
@ -30,18 +38,38 @@
} }
} }
//
// FAQ Answer
//
.faq__answer { .faq__answer {
display: none; transition: .2s ease-out;
margin-bottom: @spacer; transform-origin: top;
height: 0;
overflow: hidden;
margin-left: 0; margin-left: 0;
&.open { &.open {
display: block; animation: openQuestion .15s ease-out forwards;
max-height: 800px; }
}
@keyframes openQuestion {
0% {
transform: scaleY(0);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
height: 100%;
} }
} }
//
// Featured FAQ modifier
//
.faq--featured { .faq--featured {
.faq__question { .faq__question {
color: @pink; color: @pink;
@ -55,22 +83,24 @@
border-style: solid; border-style: solid;
border-width: 5px 0 5px 6px; border-width: 5px 0 5px 6px;
border-color: transparent transparent transparent @greySocial; border-color: transparent transparent transparent @greySocial;
transition: .2s ease-out; transition: .15s ease-out;
} }
.grid__col--toc { .grid__col--toc {
position: relative;
@media (@screen-sm) { @media (@screen-sm) {
flex: 0 0 33% !important; flex: 0 0 33% !important;
} }
} }
.grid__col--toc {
position: relative;
}
//
// Table of Contents
//
#toc { #toc {
margin-top: @spacer; margin-top: @spacer;
&.affix { &.affix {
top: 0; top: 0;
padding-top: @spacer; padding-top: @spacer;