| Current Path : /home/atelierpru/provence/squelettes/less/theme_components/ |
| Current File : /home/atelierpru/provence/squelettes/less/theme_components/accordions.less |
/*! -- Stack Accordions -- */
.accordion{
.accordion__title{
.transition(0.5s,ease);
opacity: .5;
margin-bottom: @base-line-height/2;
&:hover{
opacity: 1;
}
&:before{
font-family: "stack-interface";
content: '\e80d';
margin-right: 6px;
color: @color-dark;
}
span{
display: inline-block;
}
}
li{
&.active{
margin-bottom: @base-line-height/2;
.accordion__title{
opacity: 1;
&:before{
content: '\e80a';
}
}
.accordion__content{
animation: fadeUp .5s ease forwards;
-webkit-animation: fadeUp .5s ease forwards;
}
}
}
}
.accordion-1{
li{
&.active{
.accordion__title{
span{
color: #fff;
}
&:before{
color: #fff;
}
border-color: @color-primary;
}
}
.accordion__title{
border-radius: 6px;
border-bottom: 1px solid #ECECEC;
}
}
}
.accordion-2{
li{
.accordion__title{
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid #ECECEC;
padding-left: 0;
}
&.active{
.accordion__title{
background: none;
border-bottom: 1px solid rgba(0,0,0,0);
}
}
}
}
.bg--dark,.imagebg:not(.image--light), .bg--primary{
.accordion-2, .accordion-1{
li{
.accordion__title{
&:before{
color: #fff;
}
border-color: lighten(@color-dark, 15%)
}
}
}
}
.imagebg:not(.image--light), .bg--primary{
.accordion{
li{
.accordion__title{
border-color: rgba(255,255,255,.3);
}
}
}
}