diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js index 3ec54488b..d62423f3d 100644 --- a/components/lib/menubar/style/MenubarStyle.js +++ b/components/lib/menubar/style/MenubarStyle.js @@ -16,20 +16,20 @@ const classes = { button: 'p-menubar-button', menu: 'p-menubar-root-list', menuitem: ({ instance, processedItem }) => [ - 'p-menuitem', + 'p-menubar-item', { - 'p-menuitem-active p-highlight': instance.isItemActive(processedItem), + 'p-menubar-item-active': instance.isItemActive(processedItem), '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', - separator: 'p-menuitem-separator', + content: 'p-menubar-item-content', + action: 'p-menubar-item-link', + icon: 'p-menubar-item-icon', + label: 'p-menubar-item-label', + submenuIcon: 'p-menubar-submenu-icon', + submenu: 'p-menubar-submenu-list', + separator: 'p-menubar-separator', end: 'p-menubar-end' }; diff --git a/components/lib/themes/primeone/base/menubar/index.js b/components/lib/themes/primeone/base/menubar/index.js index 55ae4bd83..52f284ec6 100644 --- a/components/lib/themes/primeone/base/menubar/index.js +++ b/components/lib/themes/primeone/base/menubar/index.js @@ -10,13 +10,31 @@ export default { border-radius: ${dt('rounded.base')}; } -.p-menubar ul { +.p-menubar-root-list, +.p-menubar-submenu-list { margin: 0; padding: 0; list-style: none; + outline: 0 none; } -.p-menubar .p-menuitem-link { +.p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.p-menubar-root-list > .p-menubar-item-active > .p-menubar-submenu-list { + display: block; +} + +.p-menubar-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}); + color: ${dt('menubar.item.color')}; +} + +.p-menubar-item-link { cursor: pointer; display: flex; align-items: center; @@ -28,63 +46,46 @@ export default { user-select: none; } -.p-menubar .p-menuitem-text { +.p-menubar-item-label { line-height: 1; } -.p-menubar-root-list { - display: flex; - align-items: center; - flex-wrap: wrap; - outline: 0 none; -} - -.p-menubar-root-list > .p-menuitem-active > .p-submenu-list { - display: block; -} - -.p-menubar .p-menuitem-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}); - color: ${dt('menubar.item.color')}; -} - -.p-menubar .p-menuitem-icon { +.p-menubar-item-icon { color: ${dt('menubar.item.icon.color')}; margin-right: 0.5rem; } -.p-menubar .p-menuitem.p-focus > .p-menuitem-content { +.p-menubar-item.p-focus > .p-menubar-item-content { color: ${dt('menubar.item.focus.color')}; background: ${dt('menubar.item.focus.background')}; } -.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon, -.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon { +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon, +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon { color: ${dt('menubar.item.icon.focus.color')}; } -.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover { color: ${dt('menubar.item.focus.color')}; background: ${dt('menubar.item.focus.background')}; } -.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, -.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon, +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon { color: ${dt('menubar.item.icon.focus.color')}; } -.p-menubar .p-menuitem-active > .p-menuitem-content { +.p-menubar-item-active > .p-menubar-item-content { color: ${dt('menubar.item.focus.color')}; background: ${dt('menubar.item.focus.background')}; } -.p-menubar .p-menuitem-active > .p-menuitem-content .p-menuitem-icon, -.p-menubar .p-menuitem-active > .p-menuitem-content .p-submenu-icon { +.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon, +.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { color: ${dt('menubar.item.icon.focus.color')}; } -.p-menubar .p-submenu-icon { +.p-menubar-submenu-icon { color: ${dt('menubar.item.icon.color')}; margin-left: auto; font-size: 0.875rem; @@ -92,11 +93,11 @@ export default { height: 0.875rem; } -.p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon { +.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon { margin-left: 0.5rem; } -.p-menubar .p-submenu-list { +.p-menubar-submenu-list { display: none; position: absolute; min-width: 12.5rem; @@ -109,31 +110,31 @@ export default { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } -.p-menubar .p-submenu-list .p-menuitem-separator { +.p-menubar-submenu-list .p-menubar-separator { border-top: 1px solid ${dt('menubar.separator.border.color')}; margin: 2px 0; } -.p-menubar .p-submenu-list .p-menuitem { +.p-menubar-submenu-list .p-menubar-item { position: relative; margin: 2px 0; } -.p-menubar .p-submenu-list .p-menuitem:first-child { +.p-menubar-submenu-list .p-menubar-item:first-child { margin-top: 0; } -.p-menubar .p-submenu-list .p-menuitem:last-child { +.p-menubar-submenu-list .p-menubar-item:last-child { margin-bottom: 0; } -.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + .p-menubar-submenu-list > .p-menubar-item-active > .p-menubar-submenu-list { display: block; left: 100%; top: 0; } -.p-menubar .p-menubar-end { +.p-menubar-end { margin-left: auto; align-self: center; } @@ -190,48 +191,48 @@ export default { z-index: 1; } -.p-menubar-mobile .p-menubar-root-list .p-menuitem { +.p-menubar-mobile .p-menubar-root-list .p-menubar-item { width: 100%; position: static; } -.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { +.p-menubar-mobile .p-menubar-root-list .p-menubar-separator { border-top: 1px solid #e2e8f0; margin: 2px 0; } -.p-menubar-mobile .p-menubar-root-list > .p-menuitem { +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item { position: relative; margin: 2px 0; } -.p-menubar-mobile .p-menubar-root-list > .p-menuitem:first-child { +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:first-child { margin-top: 0; } -.p-menubar-mobile .p-menubar-root-list > .p-menuitem:last-child { +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:last-child { margin-bottom: 0; } -.p-menubar-mobile .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon { +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon { margin-left: auto; transition: transform 0.2s; } -.p-menubar-mobile .p-menubar-root-list > .p-menuitem-active > .p-menuitem-content .p-submenu-icon { +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { transform: rotate(-180deg); } -.p-menubar-mobile .p-submenu-list .p-submenu-icon { +.p-menubar-mobile .p-menubar-submenu-list .p-menubar-submenu-icon { transition: transform 0.2s; transform: rotate(90deg); } -.p-menubar-mobile .p-menuitem-active > .p-menuitem-content .p-submenu-icon { +.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { transform: rotate(-90deg); } -.p-menubar-mobile .p-submenu-list { +.p-menubar-mobile .p-menubar-submenu-list { width: 100%; position: static; box-shadow: none;