File: /virtual/yunportfolio/public_html/yunportfolio.shop/wp-content/themes/cocoon-master/scss/_faq.scss
.faq-wrap{
--cocoon-custom-question-color:#b7282e;
--cocoon-custom-answer-color:#007bbb;
--cocoon-custom-border-color: transparent;
--cocoon-custom-background-color: transparent;
--cocoon-custom-text-color: var(--cocoon-text-color);
border-color: var(--cocoon-custom-border-color);
background-color: var(--cocoon-custom-background-color);
color: var(--cocoon-custom-text-color);
}
.faq-item{
display: flex;
}
.faq-item-label{
font-size: 24px;
margin-right: 0.6em;
}
.is-style-square:not(.not-nested-style) .faq-item-label{
color: #fff !important;
background-color: var(--cocoon-custom-question-color);
font-size: 20px;
padding: 5px 8px;
height: 100%;
}
.is-style-square:not(.not-nested-style) .faq-answer-label{
background-color: var(--cocoon-custom-answer-color);
}
.faq-item-content{
flex: 1 1 auto;
width: calc(60%);
}
.faq-question{
margin-bottom: 1.8em;
align-items: center;
}
.faq-question-label{
color: var(--cocoon-custom-question-color);
}
.faq-question-content{
font-weight: 700;
margin-right: 30px;
}
.faq .faq-answer{
margin-left: 0;
}
.faq-answer-content {
margin-top: 6px;
}
.faq-answer-label{
color: var(--cocoon-custom-answer-color);
}
//スクエアラベル
.is-style-square{
.faq-item-label{
font-size: 20px;
padding: 5px 8px;
height: 100%;
}
}
//アコーディオンスタイル
.is-style-accordion{
padding: 0;
background-color:transparent;
&.has-border-color{
.faq-question{
border: none;
}
}
&:not(.not-nested-style) {
&.has-border-color{
.faq-question{
color: var(--cocoon-white-color);
}
}
}
>.faq{
>.faq-question{
padding: .5em;
margin: 0;
cursor: pointer;
position: relative;
background-color: #e8ecef;
border-color: var(--cocoon-three-d-border-colors);
// align-items: center;
&::before{
content: "+";
position: absolute;
right: 1em;
opacity: 0.5;
}
&.active::before{
content: "-";
}
}
>.faq-answer{
padding: 1em .5em;
background-color: var(--cocoon-custom-background-color);
}
}
}
//ブロックネスト時のスタイル
.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-item-label{
color: #fff;
}
.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-question-label{
background-color: var(--cocoon-custom-question-color);
}
.faq-wrap.is-style-square.not-nested-style > .faq > * > .faq-answer-label{
background-color: var(--cocoon-custom-answer-color);
}
.faq-wrap.is-style-accordion.has-border-color.not-nested-style > .faq > .faq-question {
color: var(--cocoon-white-color);
background-color: var(--cocoon-custom-border-color);
}