diff --git a/components/lib/tab/style/TabStyle.js b/components/lib/tab/style/TabStyle.js index 4a670fa70..1a7de6135 100644 --- a/components/lib/tab/style/TabStyle.js +++ b/components/lib/tab/style/TabStyle.js @@ -4,7 +4,7 @@ const classes = { root: ({ instance, props }) => [ 'p-tab', { - 'p-active': instance.active, + 'p-tab-active': instance.active, 'p-disabled': props.disabled } ] diff --git a/components/lib/tablist/style/TabListStyle.js b/components/lib/tablist/style/TabListStyle.js index 5833a6fac..c47f5d993 100644 --- a/components/lib/tablist/style/TabListStyle.js +++ b/components/lib/tablist/style/TabListStyle.js @@ -5,13 +5,13 @@ const classes = { content: ({ instance }) => [ 'p-tablist-content', { - 'p-tablist-scroller': instance.$pcTabs.scrollable + 'p-tablist-viewport': instance.$pcTabs.scrollable } ], - tabs: 'p-tablist-tabs', - inkbar: 'p-tablist-ink-bar', - previousButton: 'p-tablist-prev-button p-tablist-navigator', - nextButton: 'p-tablist-next-button p-tablist-navigator' + tabs: 'p-tablist-tab-list', + inkbar: 'p-tablist-active-bar', + previousButton: 'p-tablist-prev-button', + nextButton: 'p-tablist-next-button' }; export default BaseStyle.extend({ diff --git a/components/lib/tabpanel/style/TabPanelStyle.js b/components/lib/tabpanel/style/TabPanelStyle.js index 724ea4281..f85593c4a 100644 --- a/components/lib/tabpanel/style/TabPanelStyle.js +++ b/components/lib/tabpanel/style/TabPanelStyle.js @@ -4,7 +4,7 @@ const classes = { root: ({ instance }) => [ 'p-tabpanel', { - 'p-active': instance.active + 'p-tabpanel-active': instance.active } ] }; diff --git a/components/lib/tabs/style/TabsStyle.js b/components/lib/tabs/style/TabsStyle.js index 0840c7a74..bdce6ce21 100644 --- a/components/lib/tabs/style/TabsStyle.js +++ b/components/lib/tabs/style/TabsStyle.js @@ -4,8 +4,7 @@ const classes = { root: ({ props }) => [ 'p-tabs p-component', { - 'p-tabs-scrollable': props.scrollable, - 'p-tabs-vertical': props.orientation === 'vertical' + 'p-tabs-scrollable': props.scrollable } ] }; diff --git a/components/lib/themes/primeone/base/tabs/index.js b/components/lib/themes/primeone/base/tabs/index.js index edb9b04e5..d25d602e3 100644 --- a/components/lib/themes/primeone/base/tabs/index.js +++ b/components/lib/themes/primeone/base/tabs/index.js @@ -13,7 +13,7 @@ export default { overflow: hidden; } -.p-tablist-scroller { +.p-tablist-viewport { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; @@ -21,11 +21,11 @@ export default { overscroll-behavior: contain auto; } -.p-tablist-scroller::-webkit-scrollbar { +.p-tablist-viewport::-webkit-scrollbar { display: none; } -.p-tablist-tabs { +.p-tablist-tab-list { position: relative; display: flex; background: ${dt('tabs.nav.background')}; @@ -33,7 +33,8 @@ export default { border-width: 0 0 1px 0; } -.p-tablist-navigator { +.p-tablist-prev-button, +.p-tablist-next-button { all: unset; position: absolute; top: 0; @@ -50,12 +51,14 @@ export default { cursor: pointer; } -.p-tablist-navigator:focus-visible { +.p-tablist-prev-button:focus-visible, +.p-tablist-next-button:focus-visible { outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline-offset: ${dt('focus.ring.offset')}; } -.p-tablist-navigator:hover { +.p-tablist-prev-button:hover, +.p-tablist-next-button:hover { color: ${dt('tabs.navigator.icon.hover.color')}; } @@ -90,11 +93,11 @@ export default { outline-offset: -1px; } -.p-tab:not(.p-active):not(.p-disabled):hover { +.p-tab:not(.p-tab-active):not(.p-disabled):hover { color: ${dt('tabs.header.hover.color')}; } -.p-tab.p-active { +.p-tab-active { color: ${dt('tabs.header.active.color')}; } @@ -104,7 +107,7 @@ export default { padding: 0.875rem 1.125rem 1.125rem 1.125rem; } -.p-tablist-ink-bar { +.p-tablist-active-bar { z-index: 1; display: block; position: absolute;