From be4b9ad172bf30544a7142abb87bc70657292a3a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 10 Oct 2019 13:49:06 +0300 Subject: [PATCH] fix(grid): hovering selected row in dark theme is white Closes #5959 --- .../src/lib/core/styles/themes/schemas/dark/_grid.scss | 7 +++++++ .../src/lib/core/styles/themes/schemas/light/_grid.scss | 9 +++------ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss index baef7724404..3b336e03c23 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss @@ -13,6 +13,7 @@ /// @prop {Color} row-even-background [#222] - The background color of even rows. /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color. /// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover. /// @prop {Color} row-selected-text-color [#fff] - The selected row text color. /// @prop {Color} ghost-header-background [#222] - The dragged header background color. /// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode. @@ -52,6 +53,12 @@ $_base-dark-grid: ( hexrgba: #222 ), + row-selected-hover-background: ( + igx-color: ('secondary', 'A700'), + rgba: .24, + hexrgba: #222 + ), + row-selected-text-color: #fff, ghost-header-background: #222, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss index 039642195c5..3e225c45bb0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss @@ -27,9 +27,9 @@ /// @prop {Color} row-even-background [#fff] - The background color of even rows. /// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows. /// @prop {Color} row-even-text-color [inherit] - The text color of even rows. -/// @prop {Map} row-selected-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row background color. +/// @prop {Map} row-selected-background [igx-color: ('secondary', 50)] - The selected row background color. /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color. -/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row hover background. +/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50)] - The selected row hover background. /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color. /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color. /// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color. @@ -132,12 +132,10 @@ $_light-grid: extend( row-selected-background: ( igx-color: ('secondary', 50), - hexrgba: #fff ), row-selected-hover-background: ( igx-color: ('secondary', 50), - hexrgba: #fff ), row-selected-text-color: ( @@ -334,7 +332,7 @@ $_light-grid: extend( /// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected row hover background. /// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color. /// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border. -/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100), hexrgba: #fff] - The active(focused) cell border color. +/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100)] - The active(focused) cell border color. /// @prop {Map} cell-selected-background [igx-color: ('grays', 300), hexrgba: #fff] - The selected cell background color. /// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color. /// @prop {Map} group-row-background [igx-color: ('grays', 50), hexrgba: #fff] - The grid group row background color. @@ -385,7 +383,6 @@ $_fluent-grid: extend( cell-active-border-color: ( igx-color: ('primary', 100), - hexrgba: #fff ), cell-selected-background: (