diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js index 7df42c32f..0464029e2 100644 --- a/components/lib/paginator/style/PaginatorStyle.js +++ b/components/lib/paginator/style/PaginatorStyle.js @@ -8,47 +8,47 @@ const classes = { [`p-paginator-${key}`]: instance.hasBreakpoints() } ], - start: 'p-paginator-left-content', - end: 'p-paginator-right-content', + start: 'p-paginator-content-start', + end: 'p-paginator-content-end', firstPageButton: ({ instance }) => [ - 'p-paginator-first p-paginator-element p-link', + 'p-paginator-first', { 'p-disabled': instance.$attrs.disabled } ], - firstPageIcon: 'p-paginator-icon', + firstPageIcon: 'p-paginator-first-icon', previousPageButton: ({ instance }) => [ - 'p-paginator-prev p-paginator-element p-link', + 'p-paginator-prev', { 'p-disabled': instance.$attrs.disabled } ], - previousPageIcon: 'p-paginator-icon', + previousPageIcon: 'p-paginator-prev-icon', nextPageButton: ({ instance }) => [ - 'p-paginator-next p-paginator-element p-link', + 'p-paginator-next', { 'p-disabled': instance.$attrs.disabled } ], - nextPageIcon: 'p-paginator-icon', + nextPageIcon: 'p-paginator-next-icon', lastPageButton: ({ instance }) => [ - 'p-paginator-last p-paginator-element p-link', + 'p-paginator-last', { 'p-disabled': instance.$attrs.disabled } ], - lastPageIcon: 'p-paginator-icon', + lastPageIcon: 'p-paginator-last-icon', pages: 'p-paginator-pages', pageButton: ({ props, pageLink }) => [ - 'p-paginator-page p-paginator-element p-link', + 'p-paginator-page', { - 'p-highlight': pageLink - 1 === props.page + 'p-paginator-page-active': pageLink - 1 === props.page } ], current: 'p-paginator-current', - rowPerPageDropdown: 'p-paginator-rpp-options', - jumpToPageDropdown: 'p-paginator-page-options', - jumpToPageInput: 'p-paginator-page-input' + rowPerPageDropdown: 'p-paginator-rpp-dropdown', + jumpToPageDropdown: 'p-paginator-jtp-dropdown', + jumpToPageInput: 'p-paginator-jtp-input' }; export default BaseStyle.extend({ diff --git a/components/lib/themes/primeone/base/paginator/index.js b/components/lib/themes/primeone/base/paginator/index.js index 6b64969c4..c81333041 100644 --- a/components/lib/themes/primeone/base/paginator/index.js +++ b/components/lib/themes/primeone/base/paginator/index.js @@ -13,11 +13,11 @@ export default { gap: 0.25rem; } -.p-paginator-left-content { +.p-paginator-content-start { margin-right: auto; } -.p-paginator-right-content { +.p-paginator-content-end { margin-left: auto; } @@ -41,9 +41,11 @@ export default { height: 2.5rem; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; border-radius: 50%; + padding: 0; + margin: 0; } -.p-paginator-page:not(.p-disabled):not(.p-highlight):hover, +.p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover, .p-paginator-first:not(.p-disabled):hover, .p-paginator-prev:not(.p-disabled):hover, .p-paginator-next:not(.p-disabled):hover, @@ -62,12 +64,12 @@ export default { gap: 0.25rem; } -.p-paginator-page.p-highlight { +.p-paginator-page.p-paginator-page-active { background: ${dt('highlight.background')}; color: ${dt('highlight.color')}; } -.p-paginator-page-input .p-inputtext { +.p-paginator-jtp-input .p-inputtext { max-width: 2.5rem; } ` diff --git a/components/lib/themes/primeone/base/tree/index.js b/components/lib/themes/primeone/base/tree/index.js index 334133d6f..55604bce2 100644 --- a/components/lib/themes/primeone/base/tree/index.js +++ b/components/lib/themes/primeone/base/tree/index.js @@ -58,7 +58,7 @@ export default { overflow: hidden; position: relative; flex-shrink: 0; - margin-right: 0.5rem; + margin: 0 0.5rem 0 0; width: 1.75rem; height: 1.75rem; color: ${dt('tree.toggle.color')}; @@ -67,6 +67,7 @@ export default { border-radius: 50%; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; outline-color: transparent; + padding: 0; } .p-tree-node-toggle-button:enabled:hover {