diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css new file mode 100644 index 00000000..afa2c8ec --- /dev/null +++ b/blocks/accordion/accordion.css @@ -0,0 +1,127 @@ +main .accordion { + max-width: 980px; + margin: 0 auto; + padding: 10px 0; +} + +main .accordion.faq-accordion>div { + border: 1px solid #dbdbdb; + border-radius: 5px; +} + +main .accordion.spacer.faq-accordion>div { + margin-top: 7px; +} + + +main .accordion.faq-accordion .faq-question { + cursor: pointer; + padding: 12px 20px; + font-size: 16px; + color: #0d233e; + font-weight: 700; + line-height: 1.1; + text-align: left; +} + +main .accordion.faq-accordion .faq-question:hover { + color: #ec8f2d; +} + +main .accordion.faq-accordion .faq-question.active { + color: #ec8f2d; +} + +main .accordion.faq-accordion .faq-question::before { + content: "\e905"; + float: right; + font-family: ald-icons !important; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 1; + text-transform: none; +} + +main .accordion.faq-accordion .faq-question.active::before { + content: "\e904"; + float: right; + font-family: ald-icons !important; + font-style: normal; + font-variant: normal; + font-weight: 400; + line-height: 1; + text-transform: none; +} + + +main .section.orange .accordion.faq-accordion .faq-question::before, +main .section.orange .accordion.faq-accordion .faq-question.active::before, +main .section.orange .accordion.faq-accordion a { + color: #f77f00; +} + + +main .section.green .accordion.faq-accordion .faq-question::before, +main .section.green .accordion.faq-accordion .faq-question.active::before, +main .section.green .accordion.faq-accordion a { + color: #78be20; +} + +main .accordion.faq-accordion .faq-answer { + padding: 0 20px; + display: none; + overflow: hidden; + font-size: 16px; + max-height: 0; + transition: all 0.2s ease-in-out; + text-align: left; +} + +main .accordion.faq-accordion .faq-answer p { + font-size: 16px; +} + +main .accordion.faq-accordion .faq-answer ul { + list-style-type: none; +} + +main .accordion.faq-accordion .faq-answer ul li::before { + color: #ec8f2d; + content: "\25A0"; + font-family: Arial; + font-size: 1em; + left: 0; + line-height: 100%; + position: absolute; + top: 0.45em; +} + +main .accordion.faq-accordion .faq-answer.active { + display: block; +} + +/* Tablet */ +@media only screen and (min-width: 768px) { + main .accordion { + padding: 20px 0; + } + + main .accordion.faq-accordion .faq-question { + cursor: pointer; + padding: 12px 20px; + font-size: 16px; + } + +} + +/* Desktop */ +@media only screen and (min-width: 1030) { + main .accordion { + padding: 50px 0; + } + + main .accordion.faq-accordion .faq-question { + font-size: 16px; + } +} \ No newline at end of file diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js new file mode 100644 index 00000000..435a685c --- /dev/null +++ b/blocks/accordion/accordion.js @@ -0,0 +1,33 @@ +export default function decorate(block) { + const faqRows = [...block.children]; + block.classList.add('faq-accordion'); + + faqRows.forEach((row) => { + const faqQuestion = [...row.children][0]; + const faqAnswer = [...row.children][1]; + + faqQuestion.classList.add('faq-question'); + faqAnswer.classList.add('faq-answer'); + + faqQuestion.addEventListener('click', () => { + const isActive = faqQuestion.classList.contains('active'); + + if (isActive) { + faqQuestion.classList.remove('active'); + faqAnswer.classList.remove('active'); + // Set max-height to 0 for smooth closing + faqAnswer.style.maxHeight = '0'; + } else { + faqQuestion.classList.add('active'); + faqAnswer.classList.add('active'); + // Set max-height to scrollHeight for smooth opening + faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`; + } + }); + + // Close all accordions initially + faqQuestion.classList.remove('active'); + faqAnswer.classList.remove('active'); + faqAnswer.style.maxHeight = '0'; + }); +} diff --git a/fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2 b/fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2 new file mode 100644 index 00000000..dff908f8 Binary files /dev/null and b/fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2 differ diff --git a/fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf b/fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf new file mode 100644 index 00000000..2e2ce433 Binary files /dev/null and b/fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf differ diff --git a/fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff b/fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff new file mode 100644 index 00000000..03368029 Binary files /dev/null and b/fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff differ diff --git a/styles/Typo.css b/styles/Typo.css index 251cc9a4..1f8e54bb 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -50,9 +50,9 @@ font-weight: 400; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix"); src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix") format("eot"), - url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2") format("woff2"), - url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff") format("woff"), - url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf") format("truetype") + url("../fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2") format("woff2"), + url("../fonts/proxima/italic/cf7ea09d-4129-4178-be10-46690a910bc6.woff") format("woff"), + url("../fonts/proxima/italic/155079dd-36cb-4995-8ced-3fc104e75028.ttf") format("truetype") } @font-face {