| DIR: /home/otwalrll/.trash/wp-content.1/themes/consultio/assets/scss/elementor/ |
| Current File : /home/otwalrll/.trash/wp-content.1/themes/consultio/assets/scss/elementor/accordion.scss |
.ct-icon-accordion {
width: 15px;
height: 15px;
position: absolute;
top: 50%;
right: 0;
@include transform(translate(0, -50%));
margin-bottom: 4px;
margin-top: -2px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
display: none;
&:before, &:after {
content: '';
position: absolute;
background-color: #000;
}
&:before {
width: 15px;
height: 1px;
left: 0;
top: 7px;
}
&:after {
height: 15px;
width: 1px;
left: 7px;
top: 0;
}
}
.ct-accordion-button {
margin-top: 25px;
a {
font-size: 15px;
font-weight: 700;
color: #000000;
i {
font-weight: 400;
margin-left: 8px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:hover {
color: $primary_color;
i {
margin-left: 12px;
}
}
}
}
.ct-accordion {
.ct-ac-content {
display: none;
}
&.layout1 {
.ct-ac-title {
font-size: 18px;
color: #222;
@include transition(all 300ms linear 0ms);
font-weight: 700;
position: relative;
cursor: pointer;
@include font-family-heading($heading_default_font);
a {
padding: 23px 65px 23px 25px;
display: block;
color: inherit;
i {
margin-right: 4px;
color: $primary_color;
.flaticon {
font-weight: 400;
}
}
&:before {
content: '\f107';
font-family: 'Font Awesome 5 Pro';
font-size: 16px;
position: absolute;
top: 50%;
@include transform(translate(0, -50%));
right: 35px;
color: #9ba2aa;
@include transition(all 300ms linear 0ms);
}
&:after {
content: '\f136';
font-family: 'Material-Design-Iconic-Font';
top: 50%;
@include transform(translate(0, -50%));
right: 30px;
height: 21px;
width: 21px;
line-height: 21px;
background-color: #9ba2aa;
color: #fff;
text-align: center;
position: absolute;
@include border-radius(21px);
font-size: 12px;
@include transition(all 300ms linear 0ms);
opacity: 0;
margin-top: 9px;
}
}
}
.ct-ac-content {
color: #636363;
padding: 0 65px 23px 25px;
}
.ct-accordion-item {
border: 1px solid #e6e6e6;
@include transition(all 300ms linear 0ms);
@include border-radius(0px);
background-color: #fff;
position: relative;
&:before {
content: '';
height: 0;
width: 6px;
position: absolute;
top: 0;
bottom: 0;
left: -1px;
margin: auto;
@include background-horizontal($gradient_color_from, $gradient_color_to);
@include transition(all 300ms linear 0ms);
opacity: 0;
}
+ .ct-accordion-item {
margin-top: 19px;
}
&.active {
border-color: #fff;
@include box-shadow(0 0 25px rgba(#000000, 0.15));
&:before {
height: 100%;
opacity: 1;
}
.ct-ac-title a {
padding-bottom: 4px;
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
}
}
}
&.style2 {
border-bottom: 1px solid #e8e8e8;
.ct-accordion-item {
border: none;
border-top: 1px solid #e8e8e8;
margin: 0;
@include box-shadow(none);
&:before, &:after {
display: none;
}
.ct-ac-title {
font-family: inherit;
.ct-ac-title-text {
padding: 19px 0;
border: none;
font-size: 16px;
color: #353434;
&:before {
content: '\f0fe';
opacity: 1;
font-size: 16px;
right: 28px;
}
&:after {
display: none;
}
}
}
.ct-ac-content {
padding: 2px 30px 52px 0;
font-size: 15px;
line-height: 26px;
color: #4e4e4e;
}
&.active {
.ct-ac-title .ct-ac-title-text:before {
color: $primary_color;
content: '\f146';
}
}
}
}
&.style3 {
.ct-accordion-item {
background-color: transparent;
border: none;
padding-left: 20px;
.ct-ac-title {
margin-bottom: 30px;
}
&:before {
display: none;
}
.ct-ac-title-text {
padding: 0px !important;
margin-bottom: 0px;
color: #fff;
font-size: 18px;
font-weight: 600;
@include transition(all 300ms linear 0ms);
&:after {
display: none;
}
&:before {
content: '+';
@extend .text-gradient;
font-size: 18px;
font-weight: 700;
@include font-family-heading($heading_default_font);
right: auto;
left: -20px;
opacity: 1 !important;
display: block;
}
}
.ct-ac-content {
padding: 0;
font-size: 16px;
line-height: 26px;
color: #ababab;
padding-right: 16%;
margin-bottom: 44px;
@media #{$max-lg} {
padding-right: 0;
}
}
&.active .ct-ac-title-text {
&:before {
content: '-';
}
}
}
}
&.style4 {
.ct-accordion-item {
border-width: 2px;
&.active {
@include box-shadow(0 20px 40px rgba(#1d1b4c, 0.21));
}
&:before {
display: none;
}
.ct-ac-title-text {
color: #1d1b4c;
}
.ct-ac-content {
color: #696b6d;
padding: 0 65px 23px 25px;
line-height: 24px;
}
+ .ct-accordion-item {
margin-top: 27px;
}
@media #{$max-md} {
.ct-ac-title {
line-height: normal;
}
}
}
}
&.style5 {
.ct-accordion-item {
border: none;
margin: 0;
@include box-shadow(none);
background-color: transparent;
&:before, &:after {
display: none;
}
.ct-ac-title {
font-family: inherit;
}
.ct-ac-title-text {
padding: 16px 48px 16px 20px !important;
background-color: #fff;
@include box-shadow(0 2px 32px rgba(#0c0c0c, 0.08));
font-size: 18px;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
&:before {
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
content: '+';
font-size: 18px;
@include font-family-heading($heading_default_font);
font-weight: 500;
color: #fff;
right: 14px;
background-color: $secondary_color;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:after {
display: none;
}
}
.ct-ac-content {
padding: 0;
line-height: 1.75;
color: #6e6e6e;
padding-top: 17px;
}
&.active {
@include box-shadow(none);
.ct-ac-title-text {
background-color: $secondary_color;
color: #fff;
&:before {
background-color: #fff;
color: #000;
opacity: 1 !important;
}
}
}
}
}
&.style6 {
.ct-ac-title {
font-family: inherit;
a {
padding-left: 34px;
padding-top: 17px;
padding-bottom: 17px;
font-size: 16px;
color: #1a2428;
@media #{$max-sm} {
padding-left: 20px;
}
&:before {
color: #1a2428;
@media #{$max-sm} {
right: 20px;
}
}
&:after {
display: none;
}
}
}
.ct-ac-content {
font-size: 15px;
line-height: 22px;
color: #333;
padding-left: 34px;
padding-right: 30px;
padding-bottom: 30px;
margin-top: -10px;
@media #{$max-sm} {
padding-left: 20px;
}
b {
color: $primary_color;
}
}
.ct-accordion-item {
border-color: #dfdfdf;
@include box-shadow(0 0 7px rgba(#0c0c0c, 0.04));
&:before {
display: none;
}
&.active {
@include box-shadow(0 0 7px rgba(#0c0c0c, 0.04));
background-image: url(../images/comment-icon.png);
background-repeat: no-repeat;
background-position: left 10px center;
.ct-ac-title a {
padding-top: 21px;
padding-bottom: 21px;
&:before {
opacity: 1;
content: '\f106';
}
}
}
}
}
&.style7 {
position: relative;
padding-left: 50px;
@media #{$max-sm} {
padding-left: 30px;
}
&:before {
content: '';
width: 3px;
height: 100%;
background-color: #000000;
position: absolute;
top: 0;
left: 0;
}
.ct-ac-title {
font-size: 24px;
line-height: 1.2;
@media #{$max-sm} {
font-size: 18px;
}
a {
padding: 30px 60px 30px 0;
&:before {
right: 0;
width: 38px;
height: 38px;
background-color: $primary_color;
border-radius: 38px;
line-height: 38px;
text-align: center;
color: #fff;
@include transform(translate(0, -50%) rotate(-90deg));
}
&:after {
content: '';
width: 3px;
height: 100%;
background-color: $primary_color;
left: -50px;
@include border-radius(0px);
margin-top: -2px;
@media #{$max-sm} {
left: -30px;
}
}
}
&.active a {
padding: 0;
}
}
.ct-ac-content {
padding: 0 30px 42px 0;
color: #111111;
@media #{$max-sm} {
font-size: 15px;
line-height: 24px;
}
a {
text-decoration: underline;
}
}
.ct-accordion-item {
border: none;
border-top: 1px solid #ededed;
background-color: transparent;
@include box-shadow(none);
&:last-child {
border-bottom: 1px solid #ededed;
}
&:before {
display: none;
}
+ .ct-accordion-item {
margin-top: 0;
}
&.active .ct-ac-title a {
padding: 30px 0;
&:before {
opacity: 1;
@include transform(translate(0, -50%) rotate(0deg));
}
}
}
}
&.style8 {
.ct-icon-accordion {
display: block;
}
.ct-ac-title {
a {
padding: 0 40px 0 0;
font-size: 18px;
font-family: 'Barlow', sans-serif;
&:before, &:after {
display: none;
}
}
&.active .ct-icon-accordion {
@include transform(translate(0, -50%) rotate(135deg));
}
}
.ct-ac-content {
padding: 0 30px 0 0;
color: #666666;
font-size: 15px;
line-height: 24px;
font-family: 'Barlow', sans-serif;
padding-top: 6px;
}
.ct-accordion-item {
@include box-shadow(none);
border: none;
&:before {
display: none;
}
+ .ct-accordion-item {
margin-top: 17px;
}
}
}
}
&.layout2 {
border-bottom: 1px solid #d9d9d9;
.ct-ac-title-text {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 20px;
font-weight: 700;
color: #152644;
@include font-family-heading($heading_default_font);
cursor: pointer;
@media #{$max-md} {
font-size: 16px;
}
i, svg {
font-size: 48px;
margin-right: 15px;
color: $primary_color;
fill: $primary_color;
line-height: 1;
@media #{$max-md} {
font-size: 32px;
}
}
.flaticon {
font-weight: 400;
}
}
.ct-ac-content {
font-size: 16px;
line-height: 24px;
color: #616161;
margin-top: 10px;
@media #{$max-md} {
font-size: 15px;
}
br {
display: none;
}
}
.ct-accordion-item {
border-top: 1px solid #d9d9d9;
position: relative;
padding: 25px 0 25px 60px;
@media #{$max-lg} {
padding-left: 30px;
}
@media #{$max-md} {
padding-left: 0px;
}
&:before, &:after {
content: '';
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
position: absolute;
left: 0;
right: 0;
width: 0;
@include background-horizontal($gradient_color_from, $gradient_color_to);
height: 5px;
opacity: 0;
margin: auto;
}
&:before {
top: 0;
}
&:after {
bottom: 0;
}
&.active {
&:before, &:after {
width: 50px;
opacity: 1;
}
.ct-ac-title-text i {
@extend .text-gradient;
}
}
}
}
} |