From 90124037353c77266646943d6d9f00b0fb18a772 Mon Sep 17 00:00:00 2001 From: Serhii Zlobin Date: Fri, 6 Feb 2026 16:06:55 +0200 Subject: [PATCH] Add accordion to About section --- assets/about.css | 2 +- assets/accordion.css | 2 +- sections/about.liquid | 58 ++++++++ snippets/accordion.liquid | 25 +++- src/scss/_components/_accordion.scss | 6 +- src/scss/about.scss | 214 +++++++++++++++++++++++++-- src/sections/about.liquid | 58 ++++++++ src/snippets/accordion.liquid | 25 +++- 8 files changed, 363 insertions(+), 27 deletions(-) diff --git a/assets/about.css b/assets/about.css index 08780ea..f2c0db4 100644 --- a/assets/about.css +++ b/assets/about.css @@ -1 +1 @@ -.about{--about-border-radius: 0;--about-btn-gap: 0;--about-btn-margin-top: 16px;--about-buttons-direction: column;--about-buttons-margin-top: 32px;--about-col-direction: column;--about-col-gap: 46px;--about-col-indent-x-mobile: 16px;--about-col-indent-x-desktop: 40px;--about-col-padding-left: 0;--about-col-padding-right: 0;--about-description-margin-top: 40px;--about-heading-margin-top: 20px;--about-highlight-content-background: transparent;--about-highlight-content-border-radius: 0;--about-highlight-content-padding: 0;--about-highlight-wrapper-columns: 1fr;--about-highlight-wrapper-gap: 16px;--about-highlight-margin-top: 24px;--about-tagline-margin-top: 20px}@media(min-width: 567px){.about{--about-btn-gap: 16px;--about-buttons-direction: row}}@media(min-width: 992px){.about{--about-btn-gap: 24px;--about-btn-margin-top: 46px;--about-col-direction: row;--about-highlight-margin-top: 40px;--about-highlight-wrapper-gap: 24px}}@media(min-width: 1280px){.about{--about-highlight-wrapper-columns: repeat(2, 1fr)}}.about__wrapper{--about-content-justify: var(--about-content-horizontal-alignment, flex-start);--about-content-text-justify: var(--about-content-text-horizontal-alignment, left);--section-padding-bottom: var(--padding-bottom-mobile, 16px);--section-padding-top: var(--padding-top-mobile, 16px);position:relative;color:var(--color-primary, #000);background:var(--background-primary, #fff);border-radius:var(--about-border-radius);text-align:var(--about-content-text-justify)}@media(min-width: 992px){.about__wrapper{--section-padding-bottom: var(--padding-bottom-desktop, 40px);--section-padding-top: var(--padding-top-desktop, 40px)}}.about__wrapper--padding-top:not(:empty){padding-top:var(--section-padding-top)}.about__wrapper--padding-bottom:not(:empty){padding-bottom:var(--section-padding-bottom)}.about__container .about__wrapper{--about-border-radius: var(--border-radius-block)}@media(min-width: 992px){.about__container .about__wrapper{--about-col-gap: 0}}.about__wrapper[style*="--about-highlight-content-direction: row"]{--about-highlight-content-border-radius: var(--border-radius-block);--about-highlight-content-background: color-mix(in srgb, var(--color-primary) 15%, transparent);--about-highlight-content-padding: 16px;--about-highlight-wrapper-columns: repeat(2, 1fr)}@media(min-width: 992px){.about__wrapper[style*="--about-highlight-content-direction: row"]{--about-highlight-content-padding: 24px}}.about__heading{margin:var(--about-heading-margin-top) 0 0}.about__heading:first-child{--about-heading-margin-top: 0}.about__tagline{margin:var(--about-tagline-margin-top) 0 0}.about__tagline:first-child{--about-tagline-margin-top: 0}.about__description:not(:first-child){margin-top:var(--about-description-margin-top)}.about__description *:last-child{margin-bottom:0;padding-bottom:0}.about__heading+.about__description{--about-description-margin-top: 24px}.about__buttons{--about-btn-margin-top: 16px;display:flex;align-items:center;justify-content:var(--about-content-justify);flex-direction:var(--about-buttons-direction);flex-wrap:wrap;gap:var(--about-btn-gap)}.about__buttons:not(:first-child){margin-top:var(--about-buttons-margin-top)}.about__btn-wrapper:not(:first-child){margin-top:var(--about-btn-margin-top)}.about__highlight{display:inline-block;vertical-align:top;margin-top:var(--about-highlight-margin-top)}.about__highlight-content{border-radius:var(--about-highlight-content-border-radius);background:var(--about-highlight-content-background);padding:var(--about-highlight-content-padding);height:100%;width:100%}.about__highlight-heading{margin-bottom:12px}.about__highlight-text{line-height:1.3333}.about__highlight-text p:last-child{margin:0}.about__highlight-wrapper{--about-highlight-margin-top: 0;display:grid;grid-template-columns:var(--about-highlight-wrapper-columns);gap:var(--about-highlight-wrapper-gap);margin-top:40px;width:100%}.about__col>.about__highlight:first-child{--about-highlight-margin-top: 0}.about__col{display:flex;align-items:var(--about-content-justify);flex-direction:column;padding:0 var(--about-col-padding-right) 0 var(--about-col-padding-left)}.about__container>.about__wrapper .about__col{--about-col-padding-left: var(--about-col-indent-x-mobile);--about-col-padding-right: var(--about-col-indent-x-mobile)}@media(min-width: 992px){.about__container>.about__wrapper .about__col{--about-col-padding-left: var(--about-col-indent-x-desktop);--about-col-padding-right: var(--about-col-indent-x-desktop)}}@media(min-width: 1280px){.about__container>.about__wrapper .about__col:first-child:not(:only-child){margin:0 var(--about-col-indent-x-desktop)}}.about__columns{display:flex;align-items:center;flex-direction:var(--about-col-direction);gap:var(--about-col-gap)}.about__image-holder{border-radius:var(--border-radius-block);overflow:clip} +.accordion{--accordion-icon-transform: ;--accordion-item-max-width: none;--accordion-label-direction: space-between;--accordion-text-template-rows: 0fr}.accordion__item{text-align:left;max-width:var(--accordion-item-max-width);margin:0 auto 16px;padding:0 6px;border-bottom:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent)}@media(min-width: 768px){.accordion__item{--accordion-item-max-width: 720px}}@media(min-width: 768px){.accordion__col .accordion__item{--accordion-item-max-width: none}}.accordion__trigger{display:none}.accordion__label{display:flex;align-items:center;justify-content:var(--accordion-label-direction);gap:var(--accordion-item-indent);color:currentcolor;cursor:pointer;padding:var(--accordion-item-indent) 0;font-weight:var(--font-weight-bold)}[style*="--accordion-item-icon-position: left"] .accordion__label{--accordion-label-direction: flex-start}.accordion__icon{position:relative;height:var(--accordion-item-indent);width:var(--accordion-item-indent)}.accordion__icon::after,.accordion__icon::before{content:"";position:absolute;top:50%;left:50%;height:2px;width:var(--accordion-item-indent);background:var(--color-outline);transform:translate(-50%, -50%) var(--accordion-icon-transform);transition:transform var(--transition-duration) var(--transition-function)}.accordion__icon::after{--accordion-icon-transform: rotate(90deg)}:checked~.accordion__label .accordion__icon::after{--accordion-icon-transform: rotate(0deg)}.accordion__text{display:grid;grid-template-rows:var(--accordion-text-template-rows);padding:0 calc(var(--accordion-item-indent)*2);transition:grid-template-rows var(--transition-duration) var(--transition-function)}.accordion__text-inner{overflow:hidden}:checked~.accordion__text{--accordion-text-template-rows: 1fr}.about{--about-accordion-icon-opacity: 1;--about-accordion-icon-size: 14px;--about-accordion-icon-transform: ;--about-accordion-item-indent: 32px;--about-accordion-item-line-bottom: 50%;--about-accordion-item-line-top: 50%;--about-accordion-item-margin-right: 0;--about-accordion-item-margin-top: 16px;--about-accordion-text-indent: 16px;--about-accordion-text-template-rows: 0fr;--about-border-radius: 0;--about-btn-gap: 0;--about-btn-margin-top: 16px;--about-buttons-direction: column;--about-buttons-margin-top: 32px;--about-col-display: flex;--about-col-direction: column;--about-col-first-width: 100%;--about-col-gap: 46px;--about-col-indent-x-mobile: 16px;--about-col-indent-x-desktop: 40px;--about-col-last-width: 100%;--about-col-padding-left: 0;--about-col-padding-right: 0;--about-description-margin-top: 40px;--about-heading-margin-top: 20px;--about-highlight-content-background: transparent;--about-highlight-content-border-radius: 0;--about-highlight-content-padding: 0;--about-highlight-margin-top: 24px;--about-highlight-wrapper-columns: 1fr;--about-highlight-wrapper-gap: 16px;--about-tagline-margin-top: 20px}@media(min-width: 567px){.about{--about-btn-gap: 16px;--about-buttons-direction: row}}@media(min-width: 992px){.about{--about-btn-gap: 24px;--about-btn-margin-top: 46px;--about-col-direction: row;--about-highlight-margin-top: 40px;--about-highlight-wrapper-gap: 24px}}@media(min-width: 1280px){.about{--about-highlight-wrapper-columns: repeat(2, 1fr)}}.about__wrapper{--about-content-justify: var(--about-content-horizontal-alignment, flex-start);--about-content-text-justify: var(--about-content-text-horizontal-alignment, left);--section-padding-bottom: var(--padding-bottom-mobile, 16px);--section-padding-top: var(--padding-top-mobile, 16px);position:relative;color:var(--color-primary, #000);background:var(--background-primary, #fff);border-radius:var(--about-border-radius);text-align:var(--about-content-text-justify)}@media(min-width: 992px){.about__wrapper{--section-padding-bottom: var(--padding-bottom-desktop, 40px);--section-padding-top: var(--padding-top-desktop, 40px)}}.about__wrapper--padding-top:not(:empty){padding-top:var(--section-padding-top)}.about__wrapper--padding-bottom:not(:empty){padding-bottom:var(--section-padding-bottom)}.about__container .about__wrapper{--about-border-radius: var(--border-radius-block)}@media(min-width: 992px){.about__container .about__wrapper{--about-col-gap: 0}}.about__wrapper[style*="--about-highlight-content-direction: row"]{--about-highlight-content-border-radius: var(--border-radius-block);--about-highlight-content-background: color-mix(in srgb, var(--color-primary) 15%, transparent);--about-highlight-content-padding: 16px;--about-highlight-wrapper-columns: repeat(2, 1fr)}@media(min-width: 992px){.about__wrapper[style*="--about-highlight-content-direction: row"]{--about-highlight-content-padding: 24px}}.about__heading{margin:var(--about-heading-margin-top) 0 0}.about__heading:first-child{--about-heading-margin-top: 0}.about__tagline{margin:var(--about-tagline-margin-top) 0 0}.about__tagline:first-child{--about-tagline-margin-top: 0}.about__description:not(:first-child){margin-top:var(--about-description-margin-top)}.about__description *:last-child{margin-bottom:0;padding-bottom:0}.about__heading+.about__description{--about-description-margin-top: 24px}.about__buttons{--about-btn-margin-top: 16px;display:flex;align-items:center;justify-content:var(--about-content-justify);flex-direction:var(--about-buttons-direction);flex-wrap:wrap;gap:var(--about-btn-gap)}.about__buttons:not(:first-child){margin-top:var(--about-buttons-margin-top)}.about__btn-wrapper:not(:first-child){margin-top:var(--about-btn-margin-top)}.about__highlight{display:inline-block;vertical-align:top;margin-top:var(--about-highlight-margin-top)}.about__highlight-content{border-radius:var(--about-highlight-content-border-radius);background:var(--about-highlight-content-background);padding:var(--about-highlight-content-padding);height:100%;width:100%}.about__highlight-heading{margin-bottom:12px}.about__highlight-text{line-height:1.3333}.about__highlight-text p:last-child{margin:0}.about__highlight-wrapper{--about-highlight-margin-top: 0;display:grid;grid-template-columns:var(--about-highlight-wrapper-columns);gap:var(--about-highlight-wrapper-gap);margin-top:40px;width:100%}.about__col>.about__highlight:first-child{--about-highlight-margin-top: 0}.about__col{display:flex;align-items:var(--about-content-justify);flex-direction:column;padding:0 var(--about-col-padding-right) 0 var(--about-col-padding-left)}.about__col:first-child{width:var(--about-col-first-width)}@media(min-width: 992px){.about__col:first-child:not(:empty){--about-col-first-width: 43%}}@media(min-width: 1280px){.about__container>.about__wrapper .about__col:first-child:not(:only-child){margin:0 var(--about-col-indent-x-desktop)}}.about__col:last-child{width:var(--about-col-last-width)}@media(min-width: 992px){.about__col:last-child:not(:empty){--about-col-last-width: 57%}}.about__container>.about__wrapper .about__col{--about-col-padding-left: var(--about-col-indent-x-mobile);--about-col-padding-right: var(--about-col-indent-x-mobile)}@media(min-width: 992px){.about__container>.about__wrapper .about__col{--about-col-padding-left: var(--about-col-indent-x-desktop);--about-col-padding-right: var(--about-col-indent-x-desktop)}}.about__columns{display:var(--about-col-display);align-items:center;flex-direction:var(--about-col-direction);gap:var(--about-col-gap)}.about__columns:has(.about__col+.about__col:empty){--about-col-display: block}@media(min-width: 992px){.about__columns:has(.about__col+.about__col:empty) .about__col:first-child:not(:empty){--about-col-first-width: 100%}}@media(min-width: 992px){.about__columns:has(.about__col+.about__col:empty) .about__col:last-child:not(:empty){--about-col-last-width: 0}}.about__columns:has(.about__col:first-child:empty+.about__col){--about-col-display: block}@media(min-width: 992px){.about__columns:has(.about__col:first-child:empty+.about__col) .about__col:first-child:not(:empty){--about-col-first-width: 0}}@media(min-width: 992px){.about__columns:has(.about__col:first-child:empty+.about__col) .about__col:last-child:not(:empty){--about-col-last-width: 100%}}.about__image-holder{border-radius:var(--border-radius-block);overflow:clip}.about-accordion__item{padding:var(--about-accordion-item-indent);margin:var(--about-accordion-item-margin-top) var(--about-accordion-item-margin-right) 0 0;border-bottom:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);position:relative}@media(min-width: 1440px){.about-accordion__item{--about-accordion-item-margin-right: clamp(30px, 3.5vw, 80px)}}.about-accordion__item::before{content:"";position:absolute;top:var(--about-accordion-item-line-top);bottom:var(--about-accordion-item-line-bottom);left:0;width:2px;background:var(--background-accent);transition:all var(--transition-duration) var(--transition-function)}.about-accordion__item:has(:checked)::before{--about-accordion-item-line-top: var(--about-accordion-item-indent);--about-accordion-item-line-bottom: var(--about-accordion-item-indent)}.about-accordion__item:first-child{--about-accordion-item-margin-top: 0}.about-accordion .about-accordion__item{--about-accordion-item-margin-top: 0}.about-accordion__trigger{display:none}.about-accordion__label{display:flex;align-items:center;position:relative;color:currentcolor;cursor:pointer;font-weight:var(--font-weight-bold);font-size:clamp(24px, calc(var(--font-size-h4) * 100vw / var(--max-width-value)), 40px);padding:0 0 var(--about-accordion-text-indent)}.about-accordion__text{display:grid;grid-template-rows:var(--about-accordion-text-template-rows);padding:var(--about-accordion-text-indent) 0 0;font-size:clamp(14px,var(--font-size-base) - 2px,20px);transition:grid-template-rows var(--transition-duration) var(--transition-function),padding var(--transition-duration) var(--transition-function)}.about-accordion__text-inner{overflow:hidden}:checked~.about-accordion__text{--about-accordion-text-template-rows: 1fr;--about-accordion-text-indent: 0}.about-accordion__icon{position:absolute;top:100%;left:0;height:var(--about-accordion-icon-size);width:var(--about-accordion-icon-size)}.about-accordion__icon-text{font-size:clamp(14px,var(--font-size-base) - 2px,18px);white-space:nowrap;position:absolute;left:27px;top:50%;opacity:var(--about-accordion-icon-opacity);transform:translate(0, -50%);transition:all var(--transition-duration) var(--transition-function)}:checked~[class*=__label] .about-accordion__icon-text{--about-accordion-icon-opacity: 0}.about-accordion__icon::after,.about-accordion__icon::before{content:"";position:absolute;top:50%;left:0;height:2px;width:var(--about-accordion-icon-size);opacity:var(--about-accordion-icon-opacity);background:var(--color-outline);transform:translate(0, -50%) var(--about-accordion-icon-transform);transition:all var(--transition-duration) var(--transition-function)}:checked~[class*=__label] .about-accordion__icon::after,:checked~[class*=__label] .about-accordion__icon::before{--about-accordion-icon-opacity: 0}.about-accordion__icon::after{--about-accordion-icon-transform: rotate(90deg)}.about-accordion:not(:first-child){margin-top:var(--about-accordion-item-margin-top)} diff --git a/assets/accordion.css b/assets/accordion.css index 60e73d7..1310a48 100644 --- a/assets/accordion.css +++ b/assets/accordion.css @@ -1 +1 @@ -.accordion{--accordion-icon-transform: ;--accordion-item-max-width: none;--accordion-label-direction: space-between;--accordion-text-template-rows: 0fr}.accordion__item{text-align:left;max-width:var(--accordion-item-max-width);margin:0 auto 16px;padding:0 6px;border-bottom:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent)}@media(min-width: 768px){.accordion__item{--accordion-item-max-width: 720px}}@media(min-width: 768px){.accordion__col .accordion__item{--accordion-item-max-width: none}}.accordion__trigger{display:none}.accordion__label{display:flex;align-items:center;justify-content:var(--accordion-label-direction);gap:var(--accordion-item-indent);color:currentcolor;cursor:pointer;padding:var(--accordion-item-indent) 0;font-weight:var(--font-weight-bold)}[style*="--accordion-item-icon-position: left"] .accordion__label{--accordion-label-direction: flex-start}.accordion__icon{position:relative;height:var(--accordion-item-indent);width:var(--accordion-item-indent)}.accordion__icon::after,.accordion__icon::before{content:"";position:absolute;top:50%;left:50%;height:2px;width:var(--accordion-item-indent);background:var(--color-outline);transform:translate(-50%, -50%) var(--accordion-icon-transform);transition:transform var(--transition-duration) var(--transition-function)}.accordion__icon::after{--accordion-icon-transform: rotate(90deg)}:checked~.accordion__label .accordion__icon::after{--accordion-icon-transform: rotate(0deg)}.accordion__text{padding:0 calc(var(--accordion-item-indent)*2);display:grid;grid-template-rows:var(--accordion-text-template-rows);transition:grid-template-rows var(--transition-duration) var(--transition-function)}.accordion__text-inner{overflow:hidden}:checked~.accordion__text{--accordion-text-template-rows: 1fr}.accordion{--accordion-border-radius: 0;--accordion-col-width: 100%;--accordion-columns-direction: column;--accordion-columns-gap: 0;--accordion-item-indent: 20px;--accordion-list-margin-top: 0}@media(min-width: 992px){.accordion{--accordion-columns-direction: row;--accordion-columns-gap: 32px}}.accordion__wrapper{--accordion-btn-margin-top: 16px;--accordion-content-justify: var(--accordion-content-alignment, flex-start);--accordion-content-text-justify: var(--accordion-content-text-alignment, left);--accordion-padding-left: 0;--accordion-padding-right: 0;--section-padding-bottom: var(--padding-bottom-mobile, 16px);--section-padding-top: var(--padding-top-mobile, 16px);color:var(--color-primary, #000);background:var(--background-primary, #fff);border-radius:var(--accordion-border-radius);padding-left:var(--accordion-padding-left);padding-right:var(--accordion-padding-right);text-align:var(--accordion-content-text-justify)}@media(min-width: 992px){.accordion__wrapper{--accordion-btn-margin-top: 32px;--section-padding-bottom: var(--padding-bottom-desktop, 40px);--section-padding-top: var(--padding-top-desktop, 40px)}}.accordion__wrapper--padding-top:not(:empty){padding-top:var(--section-padding-top)}.accordion__wrapper--padding-bottom:not(:empty){padding-bottom:var(--section-padding-bottom)}.accordion__container .accordion__wrapper{--accordion-border-radius: var(--border-radius-block);--accordion-padding-left: 16px;--accordion-padding-right: 16px}@media(min-width: 992px){.accordion__container .accordion__wrapper{--accordion-padding-left: 32px;--accordion-padding-right: 32px}}.accordion__content{display:flex;align-items:var(--accordion-content-justify);flex-direction:column}.accordion__heading{margin:var(--accordion-item-indent) 0 0}.accordion__heading:first-child{--accordion-item-indent: 0}.accordion__tagline{margin:var(--accordion-item-indent) 0 0}.accordion__tagline:first-child{--accordion-item-indent: 0}.accordion__description:not(:first-child){margin-top:calc(var(--accordion-item-indent) + 4px)}.accordion__description *:last-child{margin-bottom:0;padding-bottom:0}.accordion__btn-wrapper:not(:first-child){margin-top:var(--accordion-btn-margin-top)}.accordion__columns{width:100%;display:flex;flex-direction:var(--accordion-columns-direction);gap:var(--accordion-columns-gap)}.accordion__col{width:var(--accordion-col-width)}.accordion__col:first-child{display:flex;align-items:var(--accordion-content-justify);flex-direction:column}@media(min-width: 992px){.accordion__col:not(:only-child){--accordion-col-width: 42%}}@media(min-width: 992px){.accordion__col:last-child:not(:only-child){--accordion-col-width: 58%}}.accordion__list{width:100%;margin-top:var(--accordion-list-margin-top)}.accordion__list:not(:first-child){--accordion-list-margin-top: 26px}@media(min-width: 992px){.accordion__list:not(:first-child){--accordion-list-margin-top: 42px}}.accordion__col .accordion__list{--accordion-list-margin-top: 26px}@media(min-width: 992px){.accordion__col .accordion__list{--accordion-list-margin-top: calc(-1 * var(--accordion-item-indent))}} +.accordion{--accordion-icon-transform: ;--accordion-item-max-width: none;--accordion-label-direction: space-between;--accordion-text-template-rows: 0fr}.accordion__item{text-align:left;max-width:var(--accordion-item-max-width);margin:0 auto 16px;padding:0 6px;border-bottom:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent)}@media(min-width: 768px){.accordion__item{--accordion-item-max-width: 720px}}@media(min-width: 768px){.accordion__col .accordion__item{--accordion-item-max-width: none}}.accordion__trigger{display:none}.accordion__label{display:flex;align-items:center;justify-content:var(--accordion-label-direction);gap:var(--accordion-item-indent);color:currentcolor;cursor:pointer;padding:var(--accordion-item-indent) 0;font-weight:var(--font-weight-bold)}[style*="--accordion-item-icon-position: left"] .accordion__label{--accordion-label-direction: flex-start}.accordion__icon{position:relative;height:var(--accordion-item-indent);width:var(--accordion-item-indent)}.accordion__icon::after,.accordion__icon::before{content:"";position:absolute;top:50%;left:50%;height:2px;width:var(--accordion-item-indent);background:var(--color-outline);transform:translate(-50%, -50%) var(--accordion-icon-transform);transition:transform var(--transition-duration) var(--transition-function)}.accordion__icon::after{--accordion-icon-transform: rotate(90deg)}:checked~.accordion__label .accordion__icon::after{--accordion-icon-transform: rotate(0deg)}.accordion__text{display:grid;grid-template-rows:var(--accordion-text-template-rows);padding:0 calc(var(--accordion-item-indent)*2);transition:grid-template-rows var(--transition-duration) var(--transition-function)}.accordion__text-inner{overflow:hidden}:checked~.accordion__text{--accordion-text-template-rows: 1fr}.accordion{--accordion-border-radius: 0;--accordion-col-width: 100%;--accordion-columns-direction: column;--accordion-columns-gap: 0;--accordion-item-indent: 20px;--accordion-list-margin-top: 0}@media(min-width: 992px){.accordion{--accordion-columns-direction: row;--accordion-columns-gap: 32px}}.accordion__wrapper{--accordion-btn-margin-top: 16px;--accordion-content-justify: var(--accordion-content-alignment, flex-start);--accordion-content-text-justify: var(--accordion-content-text-alignment, left);--accordion-padding-left: 0;--accordion-padding-right: 0;--section-padding-bottom: var(--padding-bottom-mobile, 16px);--section-padding-top: var(--padding-top-mobile, 16px);color:var(--color-primary, #000);background:var(--background-primary, #fff);border-radius:var(--accordion-border-radius);padding-left:var(--accordion-padding-left);padding-right:var(--accordion-padding-right);text-align:var(--accordion-content-text-justify)}@media(min-width: 992px){.accordion__wrapper{--accordion-btn-margin-top: 32px;--section-padding-bottom: var(--padding-bottom-desktop, 40px);--section-padding-top: var(--padding-top-desktop, 40px)}}.accordion__wrapper--padding-top:not(:empty){padding-top:var(--section-padding-top)}.accordion__wrapper--padding-bottom:not(:empty){padding-bottom:var(--section-padding-bottom)}.accordion__container .accordion__wrapper{--accordion-border-radius: var(--border-radius-block);--accordion-padding-left: 16px;--accordion-padding-right: 16px}@media(min-width: 992px){.accordion__container .accordion__wrapper{--accordion-padding-left: 32px;--accordion-padding-right: 32px}}.accordion__content{display:flex;align-items:var(--accordion-content-justify);flex-direction:column}.accordion__heading{margin:var(--accordion-item-indent) 0 0}.accordion__heading:first-child{--accordion-item-indent: 0}.accordion__tagline{margin:var(--accordion-item-indent) 0 0}.accordion__tagline:first-child{--accordion-item-indent: 0}.accordion__description:not(:first-child){margin-top:calc(var(--accordion-item-indent) + 4px)}.accordion__description *:last-child{margin-bottom:0;padding-bottom:0}.accordion__btn-wrapper:not(:first-child){margin-top:var(--accordion-btn-margin-top)}.accordion__columns{width:100%;display:flex;flex-direction:var(--accordion-columns-direction);gap:var(--accordion-columns-gap)}.accordion__col{width:var(--accordion-col-width)}.accordion__col:first-child{display:flex;align-items:var(--accordion-content-justify);flex-direction:column}@media(min-width: 992px){.accordion__col:not(:only-child){--accordion-col-width: 42%}}@media(min-width: 992px){.accordion__col:last-child:not(:only-child){--accordion-col-width: 58%}}.accordion__list{width:100%;margin-top:var(--accordion-list-margin-top)}.accordion__list:not(:first-child){--accordion-list-margin-top: 26px}@media(min-width: 992px){.accordion__list:not(:first-child){--accordion-list-margin-top: 42px}}.accordion__col .accordion__list{--accordion-list-margin-top: 26px}@media(min-width: 992px){.accordion__col .accordion__list{--accordion-list-margin-top: calc(-1 * var(--accordion-item-indent))}} diff --git a/sections/about.liquid b/sections/about.liquid index 2a53642..9395fd8 100644 --- a/sections/about.liquid +++ b/sections/about.liquid @@ -1,6 +1,7 @@ {%- if section.blocks.size > 0 -%} {%- assign about_layout = section.settings.about_layout -%} {%- assign about_layout_blocks = section.settings.about_layout_blocks -%} + {%- assign accordion_group = false -%} {%- assign button_group = false -%} {%- assign color_scheme = section.settings.color_scheme -%} {%- assign content_horizontal = section.settings.content_horizontal -%} @@ -88,6 +89,34 @@ {%- endunless -%} {%- case block.type -%} + {%- when 'accordion' -%} + {%- assign icon_text = block.settings.accordion_icon_text -%} + {%- assign title = block.settings.accordion_title -%} + {%- assign text = block.settings.accordion_text -%} + + {%- if title != blank -%} + {%- if accordion_group == false and next_block_type == 'accordion' -%} +
+ {%- assign accordion_group = true -%} + {%- endif -%} + + {%- render 'accordion', + behavior: 'single', + block_id: block_id, + icon_text: icon_text, + label: title, + position: 'left', + text: text, + section_type: 'about-accordion' + -%} + + {%- if accordion_group and next_block_type != 'accordion' -%} +
+ + {%- assign accordion_group = false -%} + {%- endif -%} + {%- endif -%} + {%- when 'button' -%} {%- assign button_icon = block.settings.button_icon -%} {%- assign button_label = block.settings.button_label -%} @@ -229,6 +258,35 @@ } ], "blocks": [ + { + "type": "accordion", + "name": "Accordion", + "limit": 4, + "settings": [ + { + "type": "header", + "content": "General settings" + }, + { + "type": "text", + "id": "accordion_title", + "label": "Title", + "default": "Accordion title" + }, + { + "type": "contentEditor", + "id": "accordion_text", + "label": "Text", + "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique." + }, + { + "type": "text", + "id": "accordion_icon_text", + "label": "Icon Text", + "default": "Read more" + } + ] + }, { "type": "button", "name": "Button", diff --git a/snippets/accordion.liquid b/snippets/accordion.liquid index f690698..37463f3 100644 --- a/snippets/accordion.liquid +++ b/snippets/accordion.liquid @@ -20,6 +20,7 @@ {%- render 'accordion', behavior: 'multiple', block_id: block.id, + icon_text: 'Read more', label: 'Accordion title', position: 'left', text: 'Accordion content goes here.', @@ -33,24 +34,34 @@ {%- assign icon_position = position -%} {%- endif -%} +{%- capture icon -%} + +{%- endcapture -%} + {%- if label != blank and text != blank -%}
diff --git a/src/scss/_components/_accordion.scss b/src/scss/_components/_accordion.scss index 5afff31..57d30dd 100644 --- a/src/scss/_components/_accordion.scss +++ b/src/scss/_components/_accordion.scss @@ -77,9 +77,11 @@ } &__text { + @include grid( + $rows: var(--accordion-text-template-rows) + ); + padding: 0 calc(var(--accordion-item-indent) * 2); - display: grid; - grid-template-rows: var(--accordion-text-template-rows); transition: grid-template-rows $transition-duration $transition-function; &-inner { diff --git a/src/scss/about.scss b/src/scss/about.scss index 54bdf8d..c774549 100644 --- a/src/scss/about.scss +++ b/src/scss/about.scss @@ -4,16 +4,32 @@ // Import mixins @use '_helpers/mixins' as *; +// Import components +@use '_components/accordion' as *; + .about { + --about-accordion-icon-opacity: 1; + --about-accordion-icon-size: 14px; + --about-accordion-icon-transform: ; + --about-accordion-item-indent: 32px; + --about-accordion-item-line-bottom: 50%; + --about-accordion-item-line-top: 50%; + --about-accordion-item-margin-right: 0; + --about-accordion-item-margin-top: 16px; + --about-accordion-text-indent: 16px; + --about-accordion-text-template-rows: 0fr; --about-border-radius: 0; --about-btn-gap: 0; --about-btn-margin-top: 16px; --about-buttons-direction: column; --about-buttons-margin-top: 32px; + --about-col-display: flex; --about-col-direction: column; + --about-col-first-width: 100%; --about-col-gap: 46px; --about-col-indent-x-mobile: 16px; --about-col-indent-x-desktop: 40px; + --about-col-last-width: 100%; --about-col-padding-left: 0; --about-col-padding-right: 0; --about-description-margin-top: 40px; @@ -21,9 +37,9 @@ --about-highlight-content-background: transparent; --about-highlight-content-border-radius: 0; --about-highlight-content-padding: 0; + --about-highlight-margin-top: 24px; --about-highlight-wrapper-columns: 1fr; --about-highlight-wrapper-gap: 16px; - --about-highlight-margin-top: 24px; --about-tagline-margin-top: 20px; @include media-up(xs) { @@ -203,17 +219,15 @@ padding: 0 var(--about-col-padding-right) 0 var(--about-col-padding-left); - .about__container > .about__wrapper & { - --about-col-padding-left: var(--about-col-indent-x-mobile); - --about-col-padding-right: var(--about-col-indent-x-mobile); + &:first-child { + width: var(--about-col-first-width); - @include media-up(md) { - --about-col-padding-left: var(--about-col-indent-x-desktop); - --about-col-padding-right: var(--about-col-indent-x-desktop); + &:not(:empty) { + @include media-up(md) { + --about-col-first-width: 43%; + } } - } - &:first-child { &:not(:only-child) { .about__container > .about__wrapper & { @include media-up(lg) { @@ -222,14 +236,70 @@ } } } + + /* stylelint-disable-next-line */ + &:last-child { + width: var(--about-col-last-width); + + /* stylelint-disable-next-line */ + &:not(:empty) { + @include media-up(md) { + --about-col-last-width: 57%; + } + } + } + + /* stylelint-disable-next-line */ + .about__container > .about__wrapper & { + --about-col-padding-left: var(--about-col-indent-x-mobile); + --about-col-padding-right: var(--about-col-indent-x-mobile); + + @include media-up(md) { + --about-col-padding-left: var(--about-col-indent-x-desktop); + --about-col-padding-right: var(--about-col-indent-x-desktop); + } + } } &__columns { @include flexbox( $align: center, + $display: var(--about-col-display), $direction: var(--about-col-direction), $gap: var(--about-col-gap) ); + + &:has(.about__col + .about__col:empty) { + --about-col-display: block; + + .about__col:first-child:not(:empty) { + @include media-up(md) { + --about-col-first-width: 100%; + } + } + + .about__col:last-child:not(:empty) { + @include media-up(md) { + --about-col-last-width: 0; + } + } + } + + &:has(.about__col:first-child:empty + .about__col) { + --about-col-display: block; + + .about__col:first-child:not(:empty) { + @include media-up(md) { + --about-col-first-width: 0; + } + } + + .about__col:last-child:not(:empty) { + @include media-up(md) { + --about-col-last-width: 100%; + } + } + } } &__image { @@ -238,4 +308,130 @@ overflow: clip; } } + + &-accordion { + &__item { + padding: var(--about-accordion-item-indent); + margin: var(--about-accordion-item-margin-top) var(--about-accordion-item-margin-right) 0 0; + border-bottom: 1px solid $color-border; + position: relative; + + @include media-up(xl) { + --about-accordion-item-margin-right: clamp(30px, 3.5vw, 80px); + } + + &::before { + content: ""; + position: absolute; + top: var(--about-accordion-item-line-top); + bottom: var(--about-accordion-item-line-bottom); + left: 0; + width: 2px; + background: $background-accent; + transition: all $transition-duration $transition-function; + } + + &:has(:checked) { + &::before { + --about-accordion-item-line-top: var(--about-accordion-item-indent); + --about-accordion-item-line-bottom: var(--about-accordion-item-indent); + } + } + + &:first-child { + --about-accordion-item-margin-top: 0; + } + + .about-accordion & { + --about-accordion-item-margin-top: 0; + } + } + + &__trigger { + display: none; + } + + &__label { + @include flexbox( + $align: center + ); + + position: relative; + color: currentcolor; + cursor: pointer; + font-weight: $font-weight-bold; + font-size: $font-size-h4; + padding: 0 0 var(--about-accordion-text-indent); + } + + &__text { + @include grid( + $rows: var(--about-accordion-text-template-rows) + ); + + padding: var(--about-accordion-text-indent) 0 0; + font-size: clamp(14px, calc(#{$font-size-base} - 2px), 20px); + transition: grid-template-rows $transition-duration $transition-function, + padding $transition-duration $transition-function; + + &-inner { + overflow: hidden; + } + + :checked ~ & { + --about-accordion-text-template-rows: 1fr; + --about-accordion-text-indent: 0; + } + } + + &__icon { + position: absolute; + top: 100%; + left: 0; + height: var(--about-accordion-icon-size); + width: var(--about-accordion-icon-size); + + &-text { + font-size: clamp(14px, calc(#{$font-size-base} - 2px), 18px); + white-space: nowrap; + position: absolute; + left: 27px; + top: 50%; + opacity: var(--about-accordion-icon-opacity); + transform: translate(0, -50%); + transition: all $transition-duration $transition-function; + + :checked ~ [class*="__label"] & { + --about-accordion-icon-opacity: 0; + } + } + + &::after, + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + height: 2px; + width: var(--about-accordion-icon-size); + opacity: var(--about-accordion-icon-opacity); + background: $color-outline; + transform: translate(0, -50%) var(--about-accordion-icon-transform); + transition: all $transition-duration $transition-function; + + :checked ~ [class*="__label"] & { + --about-accordion-icon-opacity: 0; + } + } + + /* stylelint-disable-next-line */ + &::after { + --about-accordion-icon-transform: rotate(90deg); + } + } + + &:not(:first-child) { + margin-top: var(--about-accordion-item-margin-top); + } + } } diff --git a/src/sections/about.liquid b/src/sections/about.liquid index 2a53642..9395fd8 100644 --- a/src/sections/about.liquid +++ b/src/sections/about.liquid @@ -1,6 +1,7 @@ {%- if section.blocks.size > 0 -%} {%- assign about_layout = section.settings.about_layout -%} {%- assign about_layout_blocks = section.settings.about_layout_blocks -%} + {%- assign accordion_group = false -%} {%- assign button_group = false -%} {%- assign color_scheme = section.settings.color_scheme -%} {%- assign content_horizontal = section.settings.content_horizontal -%} @@ -88,6 +89,34 @@ {%- endunless -%} {%- case block.type -%} + {%- when 'accordion' -%} + {%- assign icon_text = block.settings.accordion_icon_text -%} + {%- assign title = block.settings.accordion_title -%} + {%- assign text = block.settings.accordion_text -%} + + {%- if title != blank -%} + {%- if accordion_group == false and next_block_type == 'accordion' -%} +
+ {%- assign accordion_group = true -%} + {%- endif -%} + + {%- render 'accordion', + behavior: 'single', + block_id: block_id, + icon_text: icon_text, + label: title, + position: 'left', + text: text, + section_type: 'about-accordion' + -%} + + {%- if accordion_group and next_block_type != 'accordion' -%} +
+ + {%- assign accordion_group = false -%} + {%- endif -%} + {%- endif -%} + {%- when 'button' -%} {%- assign button_icon = block.settings.button_icon -%} {%- assign button_label = block.settings.button_label -%} @@ -229,6 +258,35 @@ } ], "blocks": [ + { + "type": "accordion", + "name": "Accordion", + "limit": 4, + "settings": [ + { + "type": "header", + "content": "General settings" + }, + { + "type": "text", + "id": "accordion_title", + "label": "Title", + "default": "Accordion title" + }, + { + "type": "contentEditor", + "id": "accordion_text", + "label": "Text", + "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique." + }, + { + "type": "text", + "id": "accordion_icon_text", + "label": "Icon Text", + "default": "Read more" + } + ] + }, { "type": "button", "name": "Button", diff --git a/src/snippets/accordion.liquid b/src/snippets/accordion.liquid index f690698..37463f3 100644 --- a/src/snippets/accordion.liquid +++ b/src/snippets/accordion.liquid @@ -20,6 +20,7 @@ {%- render 'accordion', behavior: 'multiple', block_id: block.id, + icon_text: 'Read more', label: 'Accordion title', position: 'left', text: 'Accordion content goes here.', @@ -33,24 +34,34 @@ {%- assign icon_position = position -%} {%- endif -%} +{%- capture icon -%} + +{%- endcapture -%} + {%- if label != blank and text != blank -%}