diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js index e36fbee80..174d85d03 100644 --- a/components/lib/calendar/style/CalendarStyle.js +++ b/components/lib/calendar/style/CalendarStyle.js @@ -29,12 +29,12 @@ const classes = { group: 'p-datepicker-calendar-container', calendar: 'p-datepicker-calendar', header: 'p-datepicker-header', - previousButton: 'p-datepicker-navigator p-datepicker-prev', + previousButton: 'p-datepicker-prev-button', title: 'p-datepicker-title', monthTitle: 'p-datepicker-view-month p-link', yearTitle: 'p-datepicker-view-year p-link', decadeTitle: 'p-datepicker-decade', - nextButton: 'p-datepicker-navigator p-datepicker-next', + nextButton: 'p-datepicker-next-button', grid: 'p-datepicker-day-view', weekHeader: 'p-datepicker-weekheader p-disabled', weekNumber: 'p-datepicker-weeknumber', diff --git a/components/lib/tabview/style/TabViewStyle.js b/components/lib/tabview/style/TabViewStyle.js index 96a8d6cbb..b20ea5688 100644 --- a/components/lib/tabview/style/TabViewStyle.js +++ b/components/lib/tabview/style/TabViewStyle.js @@ -7,25 +7,25 @@ const classes = { 'p-tabview-scrollable': props.scrollable } ], - navContainer: 'p-tabview-nav-container', - previousButton: 'p-tabview-nav-prev p-tabview-nav-btn p-link', - navContent: 'p-tabview-nav-content', - nav: 'p-tabview-nav', + navContainer: 'p-tabview-tablist-container', + previousButton: 'p-tabview-prev-button', + navContent: 'p-tabview-tablist-scroll-container', + nav: 'p-tabview-tablist', tab: { header: ({ instance, tab, index }) => [ - 'p-tabview-header', + 'p-tabview-tablist-item', instance.getTabProp(tab, 'headerClass'), { - 'p-highlight': instance.d_activeIndex === index, + 'p-tabview-tablist-item-active': instance.d_activeIndex === index, 'p-disabled': instance.getTabProp(tab, 'disabled') } ], - headerAction: 'p-tabview-nav-link p-tabview-header-action', - headerTitle: 'p-tabview-title', + headerAction: 'p-tabview-tab-header', + headerTitle: 'p-tabview-tab-title', content: ({ instance, tab }) => ['p-tabview-panel', instance.getTabProp(tab, 'contentClass')] }, inkbar: 'p-tabview-ink-bar', - nextButton: 'p-tabview-nav-next p-tabview-nav-btn p-link', + nextButton: 'p-tabview-next-button', panelContainer: 'p-tabview-panels' }; diff --git a/components/lib/themes/primeone/base/tabview/index.js b/components/lib/themes/primeone/base/tabview/index.js index e42b235de..e69854945 100644 --- a/components/lib/themes/primeone/base/tabview/index.js +++ b/components/lib/themes/primeone/base/tabview/index.js @@ -1,14 +1,14 @@ export default { css: ({ dt }) => ` -.p-tabview-nav-container { +.p-tabview-tablist-container { position: relative; } -.p-tabview-scrollable > .p-tabview-nav-container { +.p-tabview-scrollable > .p-tabview-tablist-container { overflow: hidden; } -.p-tabview-nav-content { +.p-tabview-tablist-scroll-container { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; @@ -16,7 +16,11 @@ export default { overscroll-behavior: contain auto; } -.p-tabview-nav { +.p-tabview-tablist-scroll-container::-webkit-scrollbar { + display: none; +} + +.p-tabview-tablist { display: flex; margin: 0; padding: 0; @@ -28,7 +32,7 @@ export default { position: relative; } -.p-tabview-nav-link { +.p-tabview-tab-header { cursor: pointer; user-select: none; display: flex; @@ -49,27 +53,30 @@ export default { outline-color: transparent; } -.p-tabview-header:not(.p-disabled) .p-tabview-nav-link:focus-visible { +.p-tabview-tablist-item:not(.p-disabled) .p-tabview-tab-header:focus-visible { outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline-offset: -1px; } -.p-tabview-header:not(.p-highlight):not(.p-disabled):hover >.p-tabview-nav-link { +.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header { color: ${dt('tabview.header.hover.color')}; } -.p-tabview-header.p-highlight > .p-tabview-nav-link { +.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header { color: ${dt('tabview.header.active.color')}; } -.p-tabview-title { +.p-tabview-tab-title { line-height: 1; white-space: nowrap; } -.p-tabview-nav-btn { +.p-tabview-next-button, +.p-tabview-prev-button { position: absolute; top: 0; + margin: 0; + padding: 0; z-index: 2; height: 100%; display: flex; @@ -82,29 +89,30 @@ export default { outline-color: transparent; transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; box-shadow: ${dt('tabview.navigator.icon.box.shadow')}; + border: none; + cursor: pointer; + user-select: none; } -.p-tabview-nav-btn:focus-visible { +.p-tabview-next-button:focus-visible, +.p-tabview-prev-button:focus-visible { outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline-offset: ${dt('focus.ring.offset')}; } -.p-tabview-nav-btn:hover { +.p-tabview-next-button:hover, +.p-tabview-prev-button:hover { color: ${dt('tabview.navigator.icon.hover.color')}; } -.p-tabview-nav-prev { +.p-tabview-prev-button { left: 0; } -.p-tabview-nav-next { +.p-tabview-next-button { right: 0; } -.p-tabview-nav-content::-webkit-scrollbar { - display: none; -} - .p-tabview-panels { background: ${dt('tabview.navigator.content.background')}; color: ${dt('tabview.navigator.content.color')};