diff --git a/components/lib/breadcrumb/style/BreadcrumbStyle.js b/components/lib/breadcrumb/style/BreadcrumbStyle.js index d7c49a9f9..3e8ac0f7a 100644 --- a/components/lib/breadcrumb/style/BreadcrumbStyle.js +++ b/components/lib/breadcrumb/style/BreadcrumbStyle.js @@ -3,12 +3,12 @@ import BaseStyle from 'primevue/base/style'; const classes = { root: 'p-breadcrumb p-component', menu: 'p-breadcrumb-list', - home: 'p-breadcrumb-home', - separator: 'p-menuitem-separator', - menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }], - action: 'p-menuitem-link', - icon: 'p-menuitem-icon', - label: 'p-menuitem-text' + home: 'p-breadcrumb-home-item', + separator: 'p-breadcrumb-separator', + menuitem: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }], + action: 'p-breadcrumb-action', + icon: 'p-breadcrumb-icon', + label: 'p-breadcrumb-label' }; export default BaseStyle.extend({ diff --git a/components/lib/themes/primeone/base/breadcrumb/index.js b/components/lib/themes/primeone/base/breadcrumb/index.js index fad7a89a4..042fd4651 100644 --- a/components/lib/themes/primeone/base/breadcrumb/index.js +++ b/components/lib/themes/primeone/base/breadcrumb/index.js @@ -8,7 +8,7 @@ export default { overflow-x: auto; } -.p-breadcrumb .p-breadcrumb-list { +.p-breadcrumb-list { margin: 0; padding: 0; list-style-type: none; @@ -17,50 +17,44 @@ export default { flex-wrap: nowrap; } -.p-breadcrumb .p-menuitem-link { - text-decoration: none; - display: flex; - align-items: center; -} - -.p-breadcrumb .p-menuitem-separator { +.p-breadcrumb-separator { display: flex; align-items: center; + margin: 0 0.5rem 0 0.5rem; + color: ${dt('breadcrumb.separator.color')}; } .p-breadcrumb::-webkit-scrollbar { display: none; } -.p-breadcrumb .p-menuitem-link { +.p-breadcrumb-action { + text-decoration: none; + display: flex; + align-items: center; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; border-radius: ${dt('rounded.base')}; outline-color: transparent; } -.p-breadcrumb .p-menuitem-link:focus-visible { +.p-breadcrumb-action:focus-visible { outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline-offset: ${dt('focus.ring.offset')}; } -.p-breadcrumb .p-menuitem-text { +.p-breadcrumb-label { color: ${dt('breadcrumb.item.color')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; line-height: 1; } -.p-breadcrumb .p-menuitem-text:hover { +.p-breadcrumb-label:hover { color: ${dt('breadcrumb.item.hover.color')}; line-height: 1; } -.p-breadcrumb .p-menuitem-icon { +.p-breadcrumb-icon { color: ${dt('breadcrumb.item.icon.color')}; } - -.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { - margin: 0 0.5rem 0 0.5rem; - color: ${dt('breadcrumb.separator.color')}; -} ` };