Project-Pro/brpp.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change accordion logic

Browse Source
This commit is contained in:
Roman Pyrih
2025-09-16 10:15:08 +02:00
parent 2a3ed50e96
commit a60adef6e8
5 changed files with 245 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
wp-content/themes/brpp-prawo-podatki/css/custom.css
View File

@@ -791,6 +791,10 @@ article.article-card .article-card--wrapper .article-card--content .article-card
cursor: pointer;
}
.c-acc-advanced .c-acc--item .c-acc--head {
cursor: pointer;
}
body.page-id-25 main {
margin-top: 60px;
}
@@ -2509,74 +2513,42 @@ body.page-id-54 main .box-2 .row-2 .t-row-2 {
row-gap: 40px;
}
}
@media (min-width: 992px) {
body.page-id-54 main .box-2 .row-2 .t-row .tab-description {
padding-left: 48px;
border-left: 1px solid #d9ba5c;
}
body.page-id-54 main .box-2 .row-2 .t-row-2 .t-col-1 .c-acc-advanced .c-acc--item:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
@media (max-width: 991px) {
body.page-id-54 main .box-2 .row-2 .t-row .tab-description {
padding-top: 40px;
border-top: 1px solid #d9ba5c;
}
body.page-id-54 main .box-2 .row-2 .t-row-2 .t-col-2 .c-acc-advanced .c-acc--item {
display: none;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--head {
margin-bottom: 24px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--head h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text {
margin-bottom: 40px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-54 main .box-2 .row-2 .t-row .tab-description .tab-description--text p:last-child {
margin-bottom: 0;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced {
padding: 0;
margin: 0;
}
@media (min-width: 992px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced {
margin-right: 30px;
max-width: 630px;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item.active .c-acc--head {
padding-left: 27px;
transition-delay: 0ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head .icon {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item.active .c-acc--head .icon {
opacity: 1;
visibility: visible;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item.active .c-acc--head span {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item.active .c-acc--head span {
color: #d9ba5c;
transition-delay: 0ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head {
position: relative;
transition: all 250ms ease-in-out;
cursor: pointer;
transition-delay: 250ms;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head .icon {
position: absolute;
display: inline-block;
width: 12px;
@@ -2588,7 +2560,7 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon
visibility: hidden;
transition: all 250ms ease-in-out;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon::before {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head .icon::before {
content: "";
position: absolute;
top: 50%;
@@ -2598,7 +2570,7 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon
background: #d9ba5c;
transform: translateY(-50%);
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon::after {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head .icon::after {
content: "";
position: absolute;
top: 50%;
@@ -2608,7 +2580,7 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head .icon
background: #d9ba5c;
transform: translateY(-50%) translateX(-50%);
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head span {
display: block;
padding: 16px 0;
color: #ffffff;
@@ -2620,23 +2592,45 @@ body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span
transition-delay: 250ms;
}
@media (min-width: 576px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--head span {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--head span {
font-size: 18px;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body {
display: none;
@media (min-width: 992px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body {
padding-left: 48px;
border-left: 1px solid #d9ba5c;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body .c-acc--body-text {
padding-bottom: 16px;
@media (max-width: 991px) {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body {
padding-top: 40px;
border-top: 1px solid #d9ba5c;
}
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc .c-acc--item .c-acc--body .c-acc--body-text p {
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--head {
margin-bottom: 24px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--head h3 {
color: #d9ba5c;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--text {
margin-bottom: 40px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--text p {
color: #ffffff;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
body.page-id-54 main .box-2 .row-2 .t-row .c-acc-advanced .c-acc--item .c-acc--body .tab-description--text p:last-child {
margin-bottom: 0;
}
body.page-id-54 main .box-3 {
position: relative;
background: #fafafa;

2
wp-content/themes/brpp-prawo-podatki/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

90
wp-content/themes/brpp-prawo-podatki/css/custom.scss
View File

@@ -809,6 +809,14 @@ article.article-card {
}
}
}
.c-acc-advanced {
.c-acc--item {
.c-acc--head {
cursor: pointer;
}
}
}
//* END Global
//* Home
@@ -2192,47 +2200,28 @@ body.page-id-54 {
flex-direction: column;
row-gap: 40px;
}
}
.tab-description {
@include respond-above(lg) {
padding-left: 48px;
border-left: 1px solid $cGold;
}
@include respond-below(lg) {
padding-top: 40px;
border-top: 1px solid $cGold;
}
.tab-description--head {
margin-bottom: 24px;
h3 {
color: $cGold;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
.t-col {
&-1 {
.c-acc-advanced {
.c-acc--item {
&:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
}
}
}
}
.tab-description--text {
margin-bottom: 40px;
p {
color: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
&:last-child {
margin-bottom: 0;
&-2 {
.c-acc-advanced {
.c-acc--item {
display: none;
}
}
}
}
}
.c-acc {
.c-acc-advanced {
padding: 0;
margin: 0;
@@ -2241,10 +2230,6 @@ body.page-id-54 {
max-width: 630px;
}
.c-acc--item {
&:not(:last-child) {
border-bottom: 1px solid #6a6a6a;
}
&.active {
.c-acc--head {
padding-left: 27px;
@@ -2322,16 +2307,39 @@ body.page-id-54 {
}
.c-acc--body {
display: none;
@include respond-above(lg) {
padding-left: 48px;
border-left: 1px solid $cGold;
}
@include respond-below(lg) {
padding-top: 40px;
border-top: 1px solid $cGold;
}
.tab-description--head {
margin-bottom: 24px;
h3 {
color: $cGold;
font-weight: 400;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.48px;
}
}
.tab-description--text {
margin-bottom: 40px;
.c-acc--body-text {
padding-bottom: 16px;
p {
color: $cWhite;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
&:last-child {
margin-bottom: 0;
}
}
}
}