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',
tab: {
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 }) => [
'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')
}
],
headerAction: 'p-accordion-header-link p-accordion-header-action',
headerIcon: 'p-accordion-toggle-icon',
headerTitle: 'p-accordion-header-text',
toggleableContent: 'p-toggleable-content',
content: 'p-accordion-content'
headerAction: 'p-accordion-panel-header-content',
headerIcon: 'p-accordion-panel-toggle-icon',
headerTitle: 'p-accordion-panel-title',
toggleableContent: 'p-accordion-panel-content-container',
content: 'p-accordion-panel-content'
}
};

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

@ -1,6 +1,6 @@
export default {
css: ({ dt }) => `
.p-accordion-header-link {
.p-accordion-panel-header-content {
cursor: pointer;
display: flex;
flex-direction: row-reverse;
@ -17,42 +17,42 @@ export default {
outline-color: transparent;
}
.p-accordion-header-text {
.p-accordion-panel-header-text {
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-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')}
}
.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')}
}
.p-accordion-toggle-icon {
.p-accordion-panel-toggle-icon {
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);
}
.p-accordion-content {
.p-accordion-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem;
background: color: ${dt('accordion.content.background')}
color: ${dt('accordion.content.color')}
}
.p-accordion-tab {
.p-accordion-panel {
border-bottom: 1px solid ${dt('accordion.content.border.color')};
}
.p-accordion-tab:last-child {
.p-accordion-panel:last-child {
border-bottom: 0 none
}
`