seccodesmith/seccodesmith-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Accordion styling and integrate into Contact page

Browse Source
This commit is contained in:
SecCodeSmith
2025-05-27 13:52:14 +02:00
parent cd684dbaf7
commit 29218b0e38
3 changed files with 46 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/Accordion.scss
+41
View File
@@ -0,0 +1,41 @@
@use './variables.scss' as *;
/* Accordion styling */
.accordion-button {
background-color: $card-bg !important;
color: $text-light !important;
border-color: $card-border !important;
box-shadow: none !important;
padding: 1rem 1.25rem;
font-family: 'Cinzel', serif;
}
.accordion-button:not(.collapsed) {
color: $accent-fire !important;
}
.accordion-button:focus {
border-color: $accent-fire !important;
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-item {
background-color: transparent;
border: none;
margin-bottom: 1rem;
}
.accordion-body {
background-color: $card-bg;
border: 1px solid $card-border;
border-top: none;
color: $text-ash;
padding: 1.25rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
src/assets/styles/Contact.module.scss
-40
View File
@@ -156,46 +156,6 @@
filter: grayscale(90%) invert(92%) hue-rotate(180deg);
}
/* Accordion styling */
.accordionButton {
background-color: $card-bg !important;
color: $text-light !important;
border-color: $card-border !important;
box-shadow: none !important;
padding: 1rem 1.25rem;
font-family: 'Cinzel', serif;
}
.accordionButton:not(.collapsed) {
color: $accent-fire !important;
}
.accordionButton:focus {
border-color: $accent-fire !important;
box-shadow: 0 0 0 0.25rem rgba(255, 100, 0, 0.25) !important;
}
.accordionButton::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6400'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordionItem {
background-color: transparent;
border: none;
margin-bottom: 1rem;
}
.accordionBody {
background-color: $card-bg;
border: 1px solid $card-border;
border-top: none;
color: $text-ash;
padding: 1.25rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
/* Binary background effect */
.binaryLine {
position: absolute;
src/pages/Contact.tsx
+5 -4
View File
@@ -1,6 +1,7 @@
import { PageHeader } from '../components/PageHeader';
import { ContactForm } from '../components/ContactForm';
import style from '@styles/Contact.module.scss';
import '@styles/Accordion.scss';
import { contactData } from '../data/contactData'
import type { ContactProps } from '../untils/ContactProps';
@@ -98,10 +99,10 @@ export const Contact = () => {
<div className="accordion" id="faqAccordion">
{
data.questionsAndAnswers.map((item, index) => (
<div className={`accordion-item ${style.accordionItem}`} key={index}>
<h2 className={`accordion-header ${style.accordionHeader}`} id={`heading${index}`}>
<div className={`accordion-item`} key={index}>
<h2 className={`accordion-header`} id={`heading${index}`}>
<button
className={`accordion-button collapsed ${style.accordionButton}`}
className={`accordion-button collapsed`}
type="button"
data-bs-toggle="collapse"
data-bs-target={`#collapse${index}`}
@@ -117,7 +118,7 @@ export const Contact = () => {
aria-labelledby={`heading${index}`}
data-bs-parent="#faqAccordion"
>
<div className={`accordion-body ${style.accordionBody}`}>
<div className={`accordion-body`}>
{item.answer}
</div>
</div>