From a66441355fd9a815ab7addb8d0f478d6bf120dc3 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 9 Apr 2024 16:21:05 +0300 Subject: [PATCH] Refactored contextmenu styles --- .../lib/contextmenu/style/ContextMenuStyle.js | 18 ++--- components/lib/menu/style/MenuStyle.js | 2 +- .../themes/primeone/base/contextmenu/index.js | 74 +++++++++---------- .../lib/themes/primeone/base/menu/index.js | 2 +- .../themes/primeone/base/tieredmenu/index.js | 2 +- .../presets/aura/contextmenu/index.js | 8 +- .../lib/tieredmenu/style/TieredMenuStyle.js | 2 +- 7 files changed, 53 insertions(+), 55 deletions(-) diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js index 626a2cb81..1d396a1b3 100644 --- a/components/lib/contextmenu/style/ContextMenuStyle.js +++ b/components/lib/contextmenu/style/ContextMenuStyle.js @@ -9,20 +9,20 @@ const classes = { ], menu: 'p-contextmenu-root-list', menuitem: ({ instance, processedItem }) => [ - 'p-menuitem', + 'p-contextmenu-item', { - 'p-menuitem-active p-highlight': instance.isItemActive(processedItem), + 'p-contextmenu-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-contextmenu-item-content', + action: 'p-contextmenu-item-link', + icon: 'p-contextmenu-item-icon', + label: 'p-contextmenu-item-label', + submenuIcon: 'p-contextmenu-submenu-icon', + submenu: 'p-contextmenu-submenu-list', + separator: 'p-contextmenu-separator' }; export default BaseStyle.extend({ diff --git a/components/lib/menu/style/MenuStyle.js b/components/lib/menu/style/MenuStyle.js index 106f4754b..3e85a39c9 100644 --- a/components/lib/menu/style/MenuStyle.js +++ b/components/lib/menu/style/MenuStyle.js @@ -23,7 +23,7 @@ const classes = { content: 'p-menu-item-content', action: 'p-menu-item-link', icon: 'p-menu-item-icon', - label: 'p-menu-item-text' + label: 'p-menu-item-label' }; export default BaseStyle.extend({ diff --git a/components/lib/themes/primeone/base/contextmenu/index.js b/components/lib/themes/primeone/base/contextmenu/index.js index 82574c67c..6230ccd85 100644 --- a/components/lib/themes/primeone/base/contextmenu/index.js +++ b/components/lib/themes/primeone/base/contextmenu/index.js @@ -10,17 +10,15 @@ export default { min-width: 12.5rem; } -.p-contextmenu ul { +.p-contextmenu-root-list, +.p-contextmenu-submenu-list { margin: 0; padding: 0; list-style: none; -} - -.p-contextmenu-root-list { outline: 0 none; } -.p-contextmenu .p-submenu-list { +.p-contextmenu-submenu-list { position: absolute; min-width: 100%; z-index: 1; @@ -32,7 +30,25 @@ 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-contextmenu .p-menuitem-link { +.p-contextmenu-item { + position: relative; + margin: 2px 0; +} + +.p-contextmenu-item:first-child { + margin-top: 0; +} +.p-contextmenu-item:last-child { + margin-bottom: 0; +} + +.p-contextmenu-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; + color: ${dt('contextmenu.item.color')}; +} + +.p-contextmenu-item-link { cursor: pointer; display: flex; align-items: center; @@ -44,34 +60,16 @@ export default { user-select: none; } -.p-contextmenu .p-menuitem-text { +.p-contextmenu-item-label { line-height: 1; } -.p-contextmenu .p-menuitem { - position: relative; - margin: 2px 0; -} - -.p-contextmenu .p-menuitem:first-child { - margin-top: 0; -} -.p-contextmenu .p-menuitem:last-child { - margin-bottom: 0; -} - -.p-contextmenu .p-menuitem-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; - color: ${dt('contextmenu.item.color')}; -} - -.p-contextmenu .p-menuitem-icon { - color: ${dt('contextmenu.item.icom.color')}; +.p-contextmenu-item-icon { + color: ${dt('contextmenu.item.icon.color')}; margin-right: 0.5rem; } -.p-contextmenu .p-submenu-icon { +.p-contextmenu-submenu-icon { color: ${dt('contextmenu.item.icon.color')}; margin-left: auto; font-size: 0.875rem; @@ -79,37 +77,37 @@ export default { height: 0.875rem; } -.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content { +.p-contextmenu-item.p-focus > .p-contextmenu-item-content { color: ${dt('contextmenu.item.focus.color')}; background: ${dt('contextmenu.item.focus.background')}; } -.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon, -.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon { +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon, +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon { color: ${dt('contextmenu.item.icon.focus.color')}; } -.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover { color: ${dt('contextmenu.item.focus.color')}; background: ${dt('contextmenu.item.focus.background')}; } -.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, -.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon, +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon { color: ${dt('contextmenu.item.icon.focus.color')}; } -.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-content { +.p-contextmenu-item-active > .p-contextmenu-item-content { color: ${dt('contextmenu.item.focus.color')}; background: ${dt('contextmenu.item.focus.background')}; } -.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-content .p-menuitem-icon, -.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-content .p-submenu-icon { +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon, +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon { color: ${dt('contextmenu.item.icon.focus.color')}; } -.p-contextmenu .p-menuitem-separator { +.p-contextmenu-separator { border-top: 1px solid ${dt('contextmenu.separator.border.color')}; margin: 2px 0; } diff --git a/components/lib/themes/primeone/base/menu/index.js b/components/lib/themes/primeone/base/menu/index.js index 733e964c8..4f99fe97f 100644 --- a/components/lib/themes/primeone/base/menu/index.js +++ b/components/lib/themes/primeone/base/menu/index.js @@ -45,7 +45,7 @@ export default { color: ${dt('menu.item.color')}; } -.p-menu-item-text { +.p-menu-item-label { line-height: 1; } diff --git a/components/lib/themes/primeone/base/tieredmenu/index.js b/components/lib/themes/primeone/base/tieredmenu/index.js index ce243a82a..cda989cca 100644 --- a/components/lib/themes/primeone/base/tieredmenu/index.js +++ b/components/lib/themes/primeone/base/tieredmenu/index.js @@ -60,7 +60,7 @@ export default { user-select: none; } -.p-tieredmenu-item-text { +.p-tieredmenu-item-label { line-height: 1; } diff --git a/components/lib/themes/primeone/presets/aura/contextmenu/index.js b/components/lib/themes/primeone/presets/aura/contextmenu/index.js index 8af36aebd..59771d3f6 100644 --- a/components/lib/themes/primeone/presets/aura/contextmenu/index.js +++ b/components/lib/themes/primeone/presets/aura/contextmenu/index.js @@ -9,10 +9,10 @@ export default { item: { focusBackground: '{surface.100}', color: '{surface.700}', - colorFocus: '{surface.800}', + focusColor: '{surface.800}', icon: { color: '{surface.400}', - colorFocus: '{surface.500}' + focusColor: '{surface.500}' } }, separator: { @@ -28,10 +28,10 @@ export default { item: { focusBackground: '{surface.800}', color: '{surface.0}', - colorFocus: '{surface.0}', + focusColor: '{surface.0}', icon: { color: '{surface.500}', - colorFocus: '{surface.400}' + focusColor: '{surface.400}' } }, separator: { diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js index c29536a61..a749ad61b 100644 --- a/components/lib/tieredmenu/style/TieredMenuStyle.js +++ b/components/lib/tieredmenu/style/TieredMenuStyle.js @@ -25,7 +25,7 @@ const classes = { content: 'p-tieredmenu-item-content', action: 'p-tieredmenu-item-link', icon: 'p-tieredmenu-item-icon', - text: 'p-tieredmenu-item-text', + text: 'p-tieredmenu-item-label', submenuIcon: 'p-tieredmenu-submenu-icon', submenu: 'p-tieredmenu-submenu-list', separator: 'p-tieredmenu-separator',