vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored Accordion

pull/5677/head
Cagatay Civici 2024-04-08 19:26:06 +03:00
parent a7b880305e
commit 296280c54a
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/lib/accordion/style/AccordionStyle.js
View File

@ -4,23 +4,23 @@ const classes = {
root: 'p-accordion p-component', root: 'p-accordion p-component',
tab: { tab: {
root: ({ instance, index }) => [ root: ({ instance, index }) => [
'p-accordion-tab', 'p-accordion-panel',
{ {
'p-accordion-tab-active': instance.isTabActive(index) 'p-accordion-panel-active': instance.isTabActive(index)
} }
], ],
header: ({ instance, tab, index }) => [ header: ({ instance, tab, index }) => [
'p-accordion-header', 'p-accordion-panel-header',
{ {
'p-highlight': instance.isTabActive(index), 'p-accordion-panel-header-active': instance.isTabActive(index),
'p-disabled': instance.getTabProp(tab, 'disabled') 'p-disabled': instance.getTabProp(tab, 'disabled')
} }
], ],
headerAction: 'p-accordion-header-link p-accordion-header-action', headerAction: 'p-accordion-panel-header-content',
headerIcon: 'p-accordion-toggle-icon', headerIcon: 'p-accordion-panel-toggle-icon',
headerTitle: 'p-accordion-header-text', headerTitle: 'p-accordion-panel-title',
toggleableContent: 'p-toggleable-content', toggleableContent: 'p-accordion-panel-content-container',
content: 'p-accordion-content' content: 'p-accordion-panel-content'
} }
}; };

20
components/lib/themes/primeone/base/accordion/index.js
View File

@ -1,6 +1,6 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-accordion-header-link { .p-accordion-panel-header-content {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -17,42 +17,42 @@ export default {
outline-color: transparent; outline-color: transparent;
} }
.p-accordion-header-text { .p-accordion-panel-header-text {
line-height: 1; line-height: 1;
} }
.p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible { .p-accordion-panel-header:not(.p-disabled) .p-accordion-panel-header-content:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -2px; outline-offset: -2px;
} }
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { .p-accordion-panel-header:not(.p-accordion-panel-header-active):not(.p-disabled):hover .p-accordion-panel-header-content {
color: ${dt('accordion.header.hover.color')} color: ${dt('accordion.header.hover.color')}
} }
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link { .p-accordion-panel-header:not(.p-disabled).p-accordion-panel-header-active .p-accordion-panel-header-content {
color: ${dt('accordion.header.active.color')} color: ${dt('accordion.header.active.color')}
} }
.p-accordion-toggle-icon { .p-accordion-panel-toggle-icon {
transform: rotate(90deg); transform: rotate(90deg);
} }
.p-accordion-header.p-highlight .p-accordion-toggle-icon { .p-accordion-panel-header-active .p-accordion-panel-toggle-icon {
transform: rotate(-180deg); transform: rotate(-180deg);
} }
.p-accordion-content { .p-accordion-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem; padding: 0 1.125rem 1.125rem 1.125rem;
background: color: ${dt('accordion.content.background')} background: color: ${dt('accordion.content.background')}
color: ${dt('accordion.content.color')} color: ${dt('accordion.content.color')}
} }
.p-accordion-tab { .p-accordion-panel {
border-bottom: 1px solid ${dt('accordion.content.border.color')}; border-bottom: 1px solid ${dt('accordion.content.border.color')};
} }
.p-accordion-tab:last-child { .p-accordion-panel:last-child {
border-bottom: 0 none border-bottom: 0 none
} }
` `