diff --git a/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss b/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss index 8f7a080ae9..d5d5cd2589 100644 --- a/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss +++ b/src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss @@ -9,7 +9,10 @@ background: nb-theme(tree-grid-sort-header-button-background); border: nb-theme(tree-grid-sort-header-button-border); padding: nb-theme(tree-grid-sort-header-button-padding); - font-weight: nb-theme(tree-grid-sort-header-button-font-weight); - color: nb-theme(tree-grid-sort-header-button-color); + color: inherit; + font-size: inherit; + font-weight: inherit; + font-family: inherit; + line-height: inherit; } } diff --git a/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss b/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss index 0471cb8797..845076b469 100644 --- a/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss +++ b/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss @@ -19,25 +19,36 @@ border: $border-width $border-style $border-color; } - .nb-tree-grid-header-cell { - line-height: 1.5; - } - .nb-tree-grid-header-row { - background: nb-theme(tree-grid-header-bg); + background: nb-theme(tree-grid-header-background); + color: nb-theme(tree-grid-header-text-color); + font-family: nb-theme(tree-grid-header-text-font-family); + font-size: nb-theme(tree-grid-header-text-font-size); + font-weight: nb-theme(tree-grid-header-text-font-weight); + line-height: nb-theme(tree-grid-header-text-line-height); } .nb-tree-grid-footer-row { - background: nb-theme(tree-grid-footer-bg); + background: nb-theme(tree-grid-footer-background); + color: nb-theme(tree-grid-footer-text-color); + font-family: nb-theme(tree-grid-footer-text-font-family); + font-size: nb-theme(tree-grid-footer-text-font-size); + font-weight: nb-theme(tree-grid-footer-text-font-weight); + line-height: nb-theme(tree-grid-footer-text-line-height); } .nb-tree-grid-row { - background: nb-theme(tree-grid-row-bg); + background: nb-theme(tree-grid-row-background); + color: nb-theme(tree-grid-row-text-color); + font-family: nb-theme(tree-grid-row-text-font-family); + font-size: nb-theme(tree-grid-row-text-font-size); + font-weight: nb-theme(tree-grid-row-text-font-weight); + line-height: nb-theme(tree-grid-row-text-line-height); &:hover { - background: nb-theme(tree-grid-row-hover-bg); + background: nb-theme(tree-grid-row-hover-background); } &:nth-child(2n):not(:hover) { - background-color: nb-theme(tree-grid-row-bg-even); + background-color: nb-theme(tree-grid-row-even-background); } } @@ -51,7 +62,7 @@ nb-icon { font-size: inherit; vertical-align: middle; - color: nb-theme(tree-grid-icon-color); + color: currentColor; } } diff --git a/src/framework/theme/components/tree-grid/data-source/tree-grid-sort.service.ts b/src/framework/theme/components/tree-grid/data-source/tree-grid-sort.service.ts index 7e3ea14cb0..aa542c8047 100644 --- a/src/framework/theme/components/tree-grid/data-source/tree-grid-sort.service.ts +++ b/src/framework/theme/components/tree-grid/data-source/tree-grid-sort.service.ts @@ -23,7 +23,9 @@ export class NbTreeGridSortService { const sorted = data.sort((na, nb) => this.comparator(request, na, nb)); for (const node of data) { - node.children = this.sort(request, node.children); + if (node.children) { + node.children = this.sort(request, node.children); + } } return sorted; } diff --git a/src/framework/theme/components/tree-grid/tree-grid.component.ts b/src/framework/theme/components/tree-grid/tree-grid.component.ts index fb16b23e1f..98d9bf33b4 100644 --- a/src/framework/theme/components/tree-grid/tree-grid.component.ts +++ b/src/framework/theme/components/tree-grid/tree-grid.component.ts @@ -98,22 +98,34 @@ import { NbColumnsService } from './tree-grid-columns.service'; * * @styles * - * tree-grid-cell-border-width - * tree-grid-cell-border-style - * tree-grid-cell-border-color - * tree-grid-row-min-height - * tree-grid-cell-padding - * tree-grid-sort-header-button-background - * tree-grid-sort-header-button-border - * tree-grid-sort-header-button-padding - * tree-grid-sort-header-button-font-weight - * tree-grid-header-bg - * tree-grid-footer-bg - * tree-grid-row-bg - * tree-grid-row-bg-even - * tree-grid-row-hover-bg - * tree-grid-sort-header-button-color - * tree-grid-icon-color + * tree-grid-cell-border-width: + * tree-grid-cell-border-style: + * tree-grid-cell-border-color: + * tree-grid-row-min-height: + * tree-grid-cell-padding: + * tree-grid-header-background: + * tree-grid-header-text-color: + * tree-grid-header-text-font-family: + * tree-grid-header-text-font-size: + * tree-grid-header-text-font-weight: + * tree-grid-header-text-line-height: + * tree-grid-footer-background: + * tree-grid-footer-text-color: + * tree-grid-footer-text-font-family: + * tree-grid-footer-text-font-size: + * tree-grid-footer-text-font-weight: + * tree-grid-footer-text-line-height: + * tree-grid-row-background: + * tree-grid-row-even-background: + * tree-grid-row-hover-background: + * tree-grid-row-text-color: + * tree-grid-row-text-font-family: + * tree-grid-row-text-font-size: + * tree-grid-row-text-font-weight: + * tree-grid-row-text-line-height: + * tree-grid-sort-header-button-background: + * tree-grid-sort-header-button-border: + * tree-grid-sort-header-button-padding: */ @Component({ selector: 'table[nbTreeGrid]', diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index b1d95735de..2cb17b38bf 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1510,22 +1510,38 @@ $theme: ( radio-info-active-border-color: color-info-active, radio-info-active-inner-circle-color: color-info-active, - tree-grid-cell-border-width: 1px, + tree-grid-cell-border-width: 0.0625rem, tree-grid-cell-border-style: solid, - tree-grid-cell-border-color: separator, + tree-grid-cell-border-color: divider-color, tree-grid-row-min-height: 2rem, tree-grid-cell-padding: 0.875rem 1.25rem, + + tree-grid-header-background: color-white, + tree-grid-header-text-color: text-dark-color, + tree-grid-header-text-font-family: text-subtitle-font-family, + tree-grid-header-text-font-size: text-subtitle-font-size, + tree-grid-header-text-font-weight: text-subtitle-font-weight, + tree-grid-header-text-line-height: text-subtitle-line-height, + + tree-grid-footer-background: tree-grid-header-background, + tree-grid-footer-text-color: text-dark-color, + tree-grid-footer-text-font-family: tree-grid-header-text-font-family, + tree-grid-footer-text-font-size: tree-grid-header-text-font-size, + tree-grid-footer-text-font-weight: tree-grid-header-text-font-weight, + tree-grid-footer-text-line-height: tree-grid-header-text-line-height, + + tree-grid-row-background: color-white, + tree-grid-row-even-background: color-white, + tree-grid-row-hover-background: color-white, + tree-grid-row-text-color: text-dark-color, + tree-grid-row-text-font-family: text-paragraph-font-family, + tree-grid-row-text-font-size: text-paragraph-font-size, + tree-grid-row-text-font-weight: text-paragraph-font-weight, + tree-grid-row-text-line-height: text-paragraph-line-height, + tree-grid-sort-header-button-background: transparent, tree-grid-sort-header-button-border: none, tree-grid-sort-header-button-padding: 0, - tree-grid-sort-header-button-font-weight: bold, - tree-grid-header-bg: color-bg, - tree-grid-footer-bg: color-bg, - tree-grid-row-bg: color-bg, - tree-grid-row-bg-even: color-bg, - tree-grid-row-hover-bg: color-bg, - tree-grid-sort-header-button-color: color-fg-text, - tree-grid-icon-color: color-fg-text, icon-font-size: 1.25rem, icon-line-height: 1,