diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js index f776ac24e..15cb226ab 100644 --- a/components/lib/datatable/style/DataTableStyle.js +++ b/components/lib/datatable/style/DataTableStyle.js @@ -10,7 +10,6 @@ const theme = ({ dt }) => ` width: 100%; } - .p-datatable-scrollable > .p-datatable-table-container { position: relative; } diff --git a/components/lib/themes/aura/treetable/index.js b/components/lib/themes/aura/treetable/index.js index 865f83357..63de6e6ab 100644 --- a/components/lib/themes/aura/treetable/index.js +++ b/components/lib/themes/aura/treetable/index.js @@ -7,8 +7,7 @@ export default { borderColor: '{treetable.border.color}', color: '{content.color}', borderWidth: '0 0 1px 0', - padding: '0.75rem 1rem', - fontWeight: '600' + padding: '0.75rem 1rem' }, headerCell: { background: '{content.background}', @@ -20,7 +19,6 @@ export default { selectedColor: '{highlight.color}', gap: '0.5rem', padding: '0.75rem 1rem', - fontWeight: '600', focusRing: { width: '{focus.ring.width}', style: '{focus.ring.style}', @@ -29,6 +27,9 @@ export default { shadow: '{focus.ring.shadow}' } }, + columnTitle: { + fontWeight: '600' + }, row: { background: '{content.background}', hoverBackground: '{content.hover.background}', @@ -53,7 +54,9 @@ export default { background: '{content.background}', borderColor: '{treetable.border.color}', color: '{content.color}', - padding: '0.75rem 1rem', + padding: '0.75rem 1rem' + }, + columnFooter: { fontWeight: '600' }, footer: { @@ -61,8 +64,7 @@ export default { borderColor: '{treetable.border.color}', color: '{content.color}', borderWidth: '0 0 1px 0', - padding: '0.75rem 1rem', - fontWeight: '600' + padding: '0.75rem 1rem' }, columnResizerWidth: '0.5rem', resizeIndicator: { diff --git a/components/lib/themes/lara/treetable/index.js b/components/lib/themes/lara/treetable/index.js index dc86d1c81..915e969c0 100644 --- a/components/lib/themes/lara/treetable/index.js +++ b/components/lib/themes/lara/treetable/index.js @@ -5,8 +5,7 @@ export default { header: { borderColor: '{treetable.border.color}', borderWidth: '1px 0 1px 0', - padding: '0.75rem 1rem', - fontWeight: '700' + padding: '0.75rem 1rem' }, headerCell: { selectedBackground: '{highlight.background}', @@ -15,7 +14,6 @@ export default { selectedColor: '{highlight.color}', gap: '0.5rem', padding: '0.75rem 1rem', - fontWeight: '700', focusRing: { width: '{focus.ring.width}', style: '{focus.ring.style}', @@ -24,6 +22,9 @@ export default { shadow: 'inset {focus.ring.shadow}' } }, + columnTitle: { + fontWeight: '700' + }, row: { background: '{content.background}', hoverBackground: '{content.hover.background}', @@ -46,14 +47,15 @@ export default { }, footerCell: { borderColor: '{treetable.border.color}', - padding: '0.75rem 1rem', + padding: '0.75rem 1rem' + }, + columnFooter: { fontWeight: '700' }, footer: { borderColor: '{treetable.border.color}', borderWidth: '0 0 1px 0', - padding: '0.75rem 1rem', - fontWeight: '700' + padding: '0.75rem 1rem' }, columnResizerWidth: '0.5rem', resizeIndicator: { diff --git a/components/lib/themes/nora/treetable/index.js b/components/lib/themes/nora/treetable/index.js index 786ad1cf2..c728c0758 100644 --- a/components/lib/themes/nora/treetable/index.js +++ b/components/lib/themes/nora/treetable/index.js @@ -7,8 +7,7 @@ export default { borderColor: '{treetable.border.color}', color: '{content.color}', borderWidth: '1px 0 1px 0', - padding: '0.75rem 1rem', - fontWeight: '700' + padding: '0.75rem 1rem' }, headerCell: { background: '{content.background}', @@ -20,7 +19,6 @@ export default { selectedColor: '{highlight.color}', gap: '0.5rem', padding: '0.75rem 1rem', - fontWeight: '700', focusRing: { width: '{focus.ring.width}', style: '{focus.ring.style}', @@ -29,6 +27,9 @@ export default { shadow: '{focus.ring.shadow}' } }, + columnTitle: { + fontWeight: '700' + }, row: { background: '{content.background}', hoverBackground: '{content.hover.background}', @@ -53,7 +54,9 @@ export default { background: '{content.background}', borderColor: '{treetable.border.color}', color: '{content.color}', - padding: '0.75rem 1rem', + padding: '0.75rem 1rem' + }, + columnFooter: { fontWeight: '700' }, footer: { @@ -61,8 +64,7 @@ export default { borderColor: '{treetable.border.color}', color: '{content.color}', borderWidth: '0 0 1px 0', - padding: '0.75rem 1rem', - fontWeight: '700' + padding: '0.75rem 1rem' }, columnResizerWidth: '0.5rem', resizeIndicator: { diff --git a/components/lib/treetable/FooterCell.vue b/components/lib/treetable/FooterCell.vue index 824ab4376..320fcd737 100644 --- a/components/lib/treetable/FooterCell.vue +++ b/components/lib/treetable/FooterCell.vue @@ -1,7 +1,7 @@ diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js index a2f373a2e..f0159accb 100644 --- a/components/lib/treetable/style/TreeTableStyle.js +++ b/components/lib/treetable/style/TreeTableStyle.js @@ -134,7 +134,6 @@ const theme = ({ dt }) => ` border-style: solid; border-width: ${dt('treetable.header.border.width')}; padding: ${dt('treetable.header.padding')}; - font-weight: ${dt('treetable.header.font.weight')}; } .p-treetable-footer { @@ -144,7 +143,6 @@ const theme = ({ dt }) => ` border-style: solid; border-width: ${dt('treetable.footer.border.width')}; padding: ${dt('treetable.footer.padding')}; - font-weight: ${dt('treetable.footer.font.weight')}; } .p-treetable-header-cell { @@ -154,15 +152,22 @@ const theme = ({ dt }) => ` border-style: solid; border-width: 0 0 1px 0; color: ${dt('treetable.header.cell.color')}; - font-weight: ${dt('treetable.header.font.weight')}; - transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')}; + font-weight: normal; + text-align: left; + transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, + outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')}; +} + +.p-treetable-column-title { + font-weight: ${dt('treetable.column.title.font.weight')}; } .p-treetable-tbody > tr { outline-color: transparent; background: ${dt('treetable.row.background')}; color: ${dt('treetable.row.color')}; - transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')}; + transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, + outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')}; } .p-treetable-tbody > tr > td { @@ -204,11 +209,13 @@ const theme = ({ dt }) => ` border-color: ${dt('treetable.footer.cell.border.color')}; border-style: solid; border-width: 0 0 1px 0; - font-weight: ${dt('treetable.footer.cell.font.weight')}; color: ${dt('treetable.footer.cell.color')}; background: ${dt('treetable.footer.cell.background')}; } +.p-treetable-column-footer { + font-weight: ${dt('treetable.column.footer.font.weight')}; +} .p-treetable-sortable-column { cursor: pointer; @@ -392,7 +399,8 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child > td { background: transparent; cursor: pointer; border-radius: ${dt('treetable.node.toggle.button.border.radius')}; - transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')}; + transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')}, + outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')}; outline-color: transparent; user-select: none; }