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

Refactored PanelMenu

pull/5677/head
Cagatay Civici 2024-04-09 17:27:13 +03:00
parent 6b605f6b57
commit 9c5251a2a1
2 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/panelmenu/style/PanelMenuStyle.js
View File

@ -6,30 +6,30 @@ const classes = {
header: ({ instance, item }) => [
'p-panelmenu-header',
{
'p-highlight': instance.isItemActive(item) && !!item.items,
'p-panelmenu-header-active': instance.isItemActive(item) && !!item.items,
'p-disabled': instance.isItemDisabled(item)
}
],
headerContent: 'p-panelmenu-header-content',
headerAction: 'p-panelmenu-header-action',
headerIcon: 'p-menuitem-icon',
headerLabel: 'p-menuitem-text',
toggleableContent: 'p-toggleable-content',
headerAction: 'p-panelmenu-header-link',
headerIcon: 'p-panelmenu-header-icon',
headerLabel: 'p-panelmenu-header-label',
toggleableContent: 'p-panelmenu-content-container',
menuContent: 'p-panelmenu-content',
menu: 'p-panelmenu-root-list',
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
'p-panelmenu-item',
{
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: 'p-menuitem-link',
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
submenu: 'p-submenu-list',
content: 'p-panelmenu-item-content',
action: 'p-panelmenu-item-link',
icon: 'p-panelmenu-item-icon',
label: 'p-panelmenu-item-label',
submenuIcon: 'p-panelmenu-submenu-icon',
submenu: 'p-panelmenu-submenu',
separator: 'p-menuitem-separator'
};

43
components/lib/themes/primeone/base/panelmenu/index.js
View File

@ -27,7 +27,7 @@ export default {
outline-color: transparent;
}
.p-panelmenu-header-action {
.p-panelmenu-header-link {
display: flex;
gap: 0.5rem;
align-items: center;
@ -40,9 +40,10 @@ export default {
font-weight: 600;
}
.p-panelmenu .p-submenu-icon,
.p-panelmenu .p-menuitem-icon {
color: ${dt('panelmenu.item.icon.icolor')};
.p-panelmenu-header-icon,
.p-panelmenu-item-icon,
.p-panelmenu-submenu-icon {
color: ${dt('panelmenu.item.icon.color')};
}
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
@ -50,8 +51,8 @@ export default {
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-submenu-icon,
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-menuitem-icon {
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon,
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
@ -60,30 +61,30 @@ export default {
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-header:not(.p-disabled).p-panelmenu-header-content:hover .p-submenu-icon,
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-menuitem-icon {
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon,
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
.p-panelmenu .p-menuitem {
.p-panelmenu .p-panelmenu-item {
margin: 2px 0;
}
.p-panelmenu .p-menuitem:first-child {
.p-panelmenu .p-panelmenu-item:first-child {
margin-top: 0;
}
.p-panelmenu .p-menuitem:last-child {
.p-panelmenu .p-panelmenu-item:last-child {
margin-bottom: 0;
}
.p-panelmenu .p-submenu-list {
.p-panelmenu-submenu {
margin: 4px 0 0 0;
padding: 0 0 0 1rem;
list-style: none;
}
.p-panelmenu .p-menuitem-link {
.p-panelmenu-item-link {
display: flex;
gap: 0.5rem;
align-items: center;
@ -96,33 +97,33 @@ export default {
padding: 0.5rem 0.75rem;
}
.p-panelmenu .p-menuitem-text {
.p-panelmenu-item-label {
line-height: 1;
}
.p-panelmenu .p-menuitem-content {
.p-panelmenu-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
color: ${dt('panelmenu.item.color')};
}
.p-panelmenu .p-menuitem.p-focus > .p-menuitem-content {
.p-menupanelmenu-item.p-focus > .p-panelmenu-item-content {
background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu .p-menuitem.p-focus > .p-menuitem-icon {
.p-panelmenu-item.p-focus > .p-panelmenu-item-icon {
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover {
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon,
.p-panelmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon {
color: ${dt('panelmenu.item.focus.color')};
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon,
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
`
};