💄 Adding the style of the primevue accordion component

This commit is contained in:
Paul Valerie GOMA 2025-07-21 14:14:53 +02:00
parent 2b883f39a5
commit 2af0369a88

View File

@ -0,0 +1,42 @@
:root{
/* panel */
--p-accordion-transition-duration: 0.2s;
--p-accordion-panel-border-width: 0px;
--p-accordion-panel-border-color: none;
/* header */
--p-accordion-header-color: var(--text-action-high-blue-france);
--p-accordion-header-hover-color: var(--text-action-high-blue-france);
--p-accordion-header-active-color: var(--text-action-high-blue-france);
--p-accordion-header-active-hover-color: var(--text-action-high-blue-france);
--p-accordion-header-padding: 0.75rem 1rem;
--p-accordion-header-font-weight: var(--text-body-MD-standard-text-Medium-weight);
--p-accordion-header-border-radius: 0px;
--p-accordion-header-border-width: 1px;
--p-accordion-header-border-color: var(--border-default-grey);
--p-accordion-header-background: var(--background-transparent);
--p-accordion-header-hover-background: var(--background-transparent-hover);
--p-accordion-header-active-background: var(--background-open-blue-france);
--p-accordion-header-active-hover-background: var(--background-open-blue-france-hover);
/* header first top border */
--p-accordion-header-first-top-border-radius: 0px;
--p-accordion-header-first-border-width: 1px;
/* header last bottom border */
--p-accordion-header-last-bottom-border-radius: 0px;
--p-accordion-header-last-active-bottom-border-radius: 0px;
/* focus */
--p-accordion-header-focus-ring-width: var(--focus-width);
--p-accordion-header-focus-ring-style: var(--focus-style);
--p-accordion-header-focus-ring-color: var(--focus-color);
--p-accordion-header-focus-ring-offset: var(--focus-offset);
/* icon */
--p-accordion-header-toggle-icon-color: var(--text-action-high-blue-france);
--p-accordion-header-toggle-icon-hover-color: var(--text-action-high-blue-france);
--p-accordion-header-toggle-icon-active-color: var(--text-action-high-blue-france);
--p-accordion-header-toggle-icon-active-hover-color: var(--text-action-high-blue-france);
/* content */
--p-accordion-content-border-width: 0px;
--p-accordion-content-border-color: none;
--p-accordion-content-background: var(--background-contrast-grey);
--p-accordion-content-color: var(--text-default-grey);
--p-accordion-content-padding: 1rem;
}