Skip to content

Commit ba36da8

Browse files
simeonoffsimeonoff
authored
Merge pull request #8846 from IgniteUI/selcted-row-col-selected-cell-bg
Update the grid theme
2 parents e7d4999 + c808d14 commit ba36da8

File tree

3 files changed

+148
-37
lines changed

3 files changed

+148
-37
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

+25-31
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
/// @param {Color} $row-selected-background [null] - The selected row background color.
3838
/// @param {Color} $row-selected-hover-background [null] - The selected row hover background color.
3939
/// @param {Color} $row-selected-text-color [null] - The selected row text color.
40+
/// @param {Color} $row-selected-hover-text-color [null] - The selected row hover text color.
4041
/// @param {Color} $row-hover-background [null] - The hover row background color.
4142
/// @param {Color} $row-hover-text-color [null] - The hover row text color.
4243
/// @param {Color} $row-border-color [null] - The row bottom border color.
@@ -52,6 +53,8 @@
5253
/// @param {Color} $cell-edited-value-color [null] - The text color of a cell that has been edited.
5354
/// @param {Color} $cell-new-color [null] - The text color of a new, unedited cell. Used when adding new row in a grid.
5455
/// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell.
56+
/// @param {Color} $cell-selected-within-background [null] - The background of the selected cell inside a selected row/column.
57+
/// @param {Color} $cell-selected-within-text-color [null] - The color of the selected cell inside a selected row/column.
5558
///
5659
/// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.
5760
/// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line.
@@ -108,7 +111,6 @@
108111
/// @param {color} $row-drag-color [null] - The row drag handle color.
109112
/// @param {Color} $grid-border-color [null] - The color of the grid border.
110113
/// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.
111-
///
112114
/// @requires $default-palette
113115
/// @requires $light-schema
114116
/// @requires apply-palette
@@ -149,6 +151,7 @@
149151
$row-selected-background: null,
150152
$row-selected-hover-background: null,
151153
$row-selected-text-color: null,
154+
$row-selected-hover-text-color: null,
152155
$row-hover-background: null,
153156
$row-hover-text-color: null,
154157
$row-border-color: null,
@@ -220,6 +223,9 @@
220223
$drop-area-border-radius: null,
221224
$grid-border-color: null,
222225
$sortable-header-icon-hover-color: null,
226+
227+
$cell-selected-within-background: null,
228+
$cell-selected-within-text-color: null,
223229
) {
224230
$name: 'igx-grid';
225231
$grid-schema: ();
@@ -236,26 +242,11 @@
236242
if($drop-area-border-radius, $drop-area-border-radius, map-get($grid-schema, 'drop-area-border-radius')), 0, 16px
237243
);
238244

239-
240245
$tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
241246
$tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
242247

243-
$rs-bg: if(
244-
$row-selected-background,
245-
$row-selected-background,
246-
igx-color-from-var(
247-
map-get($theme, 'row-selected-background'), $palette
248-
)
249-
);
250-
251-
$row-selected-cell-background: null;
252-
253-
@if type-of($rs-bg) == 'color' {
254-
@if luminance($rs-bg) < .5 {
255-
$row-selected-cell-background: lighten-color($rs-bg, 8%);
256-
} @else {
257-
$row-selected-cell-background: darken-color($rs-bg, 8%);
258-
}
248+
@if not($cell-selected-within-text-color) and $cell-selected-within-background {
249+
$cell-selected-within-text-color: text-contrast($cell-selected-within-background);
259250
}
260251

261252
@if not($ghost-header-icon-color) and $ghost-header-background {
@@ -333,11 +324,11 @@
333324
}
334325

335326
@if not($row-selected-text-color) and $row-selected-background {
336-
$row-selected-text-color: $row-selected-background;
327+
$row-selected-text-color: text-contrast($row-selected-background);
337328
}
338329

339-
@if not($row-selected-text-color) and $row-selected-hover-background {
340-
$row-selected-text-color: $row-selected-hover-background;
330+
@if not($row-selected-hover-text-color) and $row-selected-hover-background {
331+
$row-selected-hover-text-color: text-contrast($row-selected-hover-background);
341332
}
342333

343334
@if not($row-border-color) and $content-background {
@@ -410,8 +401,6 @@
410401
$drop-area-background: text-contrast($grouparea-background);
411402
}
412403

413-
414-
415404
@if not($drop-area-on-drop-background) and $drop-area-background {
416405
$drop-area-on-drop-background: $drop-area-background;
417406
}
@@ -494,6 +483,7 @@
494483
row-selected-background: $row-selected-background,
495484
row-selected-hover-background: $row-selected-hover-background,
496485
row-selected-text-color: $row-selected-text-color,
486+
row-selected-hover-text-color: $row-selected-hover-text-color,
497487
row-hover-background: $row-hover-background,
498488
row-hover-text-color: $row-hover-text-color,
499489
row-border-color: $row-border-color,
@@ -561,7 +551,6 @@
561551
body-summaries-text-color: $body-summaries-text-color,
562552
root-summaries-background: $root-summaries-background,
563553
root-summaries-text-color: $root-summaries-text-color,
564-
row-selected-cell-background: $row-selected-cell-background,
565554

566555
row-highlight: $row-highlight,
567556
grid-shadow: $grid-shadow,
@@ -571,6 +560,9 @@
571560
drop-area-border-radius: $drop-area-border-radius,
572561
sortable-header-icon-hover-color: $sortable-header-icon-hover-color,
573562
grid-border-color: $grid-border-color,
563+
564+
cell-selected-within-background: $cell-selected-within-background,
565+
cell-selected-within-text-color: $cell-selected-within-text-color,
574566
));
575567
}
576568

@@ -1026,12 +1018,13 @@
10261018
color: --var($theme, 'row-hover-text-color');
10271019

10281020
%grid-cell--column-selected {
1021+
color: --var($theme, 'row-selected-hover-text-color');
10291022
background: --var($theme, 'row-selected-hover-background');
10301023
}
10311024

10321025
%grid-cell--cross-selected {
1033-
color: --var($theme, 'row-selected-text-color');
1034-
background: --var($theme, 'row-selected-cell-background');
1026+
color: --var($theme, 'cell-selected-within-text-color');
1027+
background: --var($theme, 'cell-selected-within-background');
10351028
}
10361029
}
10371030

@@ -1101,15 +1094,16 @@
11011094

11021095
%grid-cell--selected,
11031096
%grid-cell--pinned-selected {
1104-
background: --var($theme, 'row-selected-cell-background');
1097+
color: --var($theme, 'cell-selected-within-text-color');
1098+
background: --var($theme, 'cell-selected-within-background');
11051099
}
11061100

11071101
&:hover {
11081102
background: --var($theme, 'row-selected-hover-background');
1109-
color: --var($theme, 'row-selected-text-color');
1103+
color: --var($theme, 'row-selected-hover-text-color');
11101104

11111105
%grid-cell--column-selected {
1112-
color: --var($theme, 'row-selected-text-color');
1106+
color: --var($theme, 'row-selected-hover-text-color');
11131107
background: --var($theme, 'row-selected-hover-background');
11141108
}
11151109
}
@@ -1373,8 +1367,8 @@
13731367
}
13741368

13751369
%grid-cell--cross-selected {
1376-
color: --var($theme, 'row-selected-text-color');
1377-
background: --var($theme, 'row-selected-cell-background');
1370+
color: --var($theme, 'cell-selected-within-text-color');
1371+
background: --var($theme, 'cell-selected-within-background');
13781372
}
13791373

13801374
%igx-grid__td--new {

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss

+57-4
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@
3434
/// @prop {Map} root-summaries-text-color [igx-color: ('grays', 300), to-opaque: #222, text-contrast: ()] - The text color of the summary groups located the footer.
3535
/// @prop {Map} row-highlight [igx-color: ('secondary', 500)] - The highlight color of a row.
3636
/// @prop {Map} row-ghost-background [igx-color: ('primary', 900)] - The dragged row background color.
37+
/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 500), rgba: .8, to-opaque: #222] - The background of the selected cell inside a selected row/column.
38+
/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('secondary', 500)] - The color of the selected cell inside a selected row/column.
39+
/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('secondary', A700)] - The selected row hover text color.
40+
3741
$_base-dark-grid: (
3842
header-background: (
3943
igx-color: ('grays', 100),
@@ -74,13 +78,27 @@ $_base-dark-grid: (
7478
to-opaque: #222
7579
),
7680

81+
cell-selected-within-background: (
82+
igx-color: ('secondary', 500),
83+
rgba: .8,
84+
to-opaque: #222,
85+
),
86+
87+
cell-selected-within-text-color: (
88+
igx-contrast-color: ('secondary', 500)
89+
),
90+
7791
row-selected-hover-background: (
7892
igx-color: ('secondary', 'A700'),
7993
rgba: .24,
8094
to-opaque: #222,
8195
lighten-color: 5%
8296
),
8397

98+
row-selected-hover-text-color: (
99+
igx-contrast-color: ('secondary', 'A700'),
100+
),
101+
84102
row-selected-text-color: #fff,
85103

86104
ghost-header-background: #222,
@@ -159,6 +177,10 @@ $_dark-grid: extend($_light-grid, $_base-dark-grid);
159177
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), to-opaque: #222] - The hover row background color.
160178
/// @prop {Map} row-selected-background [igx-color: ('grays', 200), to-opaque: #222] - The selected row background color.
161179
/// @prop {Map} row-selected-hover-background [igx-color: ('grays', '300'), to-opaque: #222] - The selected row background color on hover.
180+
/// @prop {Map} cell-selected-within-background [igx-color: ('grays', 200), rgba: .2, to-opaque: #222] - The background of the selected cell inside a selected row/column.
181+
/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('grays', 200)] - The color of the selected cell inside a selected row/column.
182+
/// @prop {Map} row-selected-hover-text-color [igx-contrast-color: ('grays', 300)] - The selected row hover text color.
183+
///
162184
/// @requires {function} extend
163185
/// @requires $_fluent-grid
164186
/// @requires $_base-dark-grid
@@ -187,10 +209,24 @@ $_dark-fluent-grid: extend(
187209
to-opaque: #222
188210
),
189211

212+
cell-selected-within-background: (
213+
igx-color: ('grays', 200),
214+
rgba: .2,
215+
to-opaque: #222,
216+
),
217+
218+
cell-selected-within-text-color: (
219+
igx-contrast-color: ('grays', 200)
220+
),
221+
190222
row-selected-hover-background: (
191223
igx-color: ('grays', 300),
192224
to-opaque: #222
193225
),
226+
227+
row-selected-hover-text-color: (
228+
igx-contrast-color: ('grays', 300),
229+
),
194230
)
195231
);
196232

@@ -202,6 +238,7 @@ $_dark-fluent-grid: extend(
202238
/// @prop {Color} header-text-color [#fff] - The table header text color.
203239
/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222] - The table header background color when selected (ex. column selection).
204240
/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, to-opaque: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
241+
/// @prop {Map} cell-selected-within-background [igx-color: ('secondary', 500), rgba: .5, to-opaque: #222] - The background of the selected cell inside a selected row/column.
205242
///
206243
/// @requires {function} extend
207244
/// @requires $_bootstrap-grid
@@ -213,6 +250,12 @@ $_dark-bootstrap-grid: extend(
213250
header-background: #222,
214251
header-text-color: #fff,
215252

253+
cell-selected-within-background: (
254+
igx-color: ('secondary', 500),
255+
rgba: .5,
256+
to-opaque: #222,
257+
),
258+
216259
header-selected-background: (
217260
igx-color: ('secondary', 500),
218261
rgba: .24,
@@ -254,7 +297,7 @@ $_dark-bootstrap-grid: extend(
254297
/// @prop {Map} sorted-header-icon-color [igx-contrast-color: 'surface'] - The sorted table header icon color.
255298
/// @prop {Map} sortable-header-icon-hover-color [igx-contrast-color: 'surface'] - The icon color on hover in grid header when the column is sortable.
256299
///
257-
/// @prop {Map} row-selected-background [igx-color: 'primary'] - The selected row background color.
300+
/// @prop {Map} row-selected-background [igx-color: ('primary', 500)] - The selected row background color.
258301
/// @prop {Color} row-selected-text-color [igx-contrast-color: 'primary'] - The selected row text color.
259302
/// @prop {Color} row-selected-hover-text-color [igx-contrast-color: ('primary', 400)] - The selected row text color.
260303
/// @prop {Map} row-selected-hover-background [igx-color: ('primary', 400)] - The selected row hover background.
@@ -283,6 +326,8 @@ $_dark-bootstrap-grid: extend(
283326
/// @prop {Map} expand-icon-color [igx-color: ('grays', 600)] - The grid row expand icon color.
284327
/// @prop {Map} expand-icon-hover-color [igx-color: ('grays', 900)] - The grid row expand icon hover color.
285328
/// @prop {Color} filtering-row-background [igx-color: 'surface'] - The background color of the filtering row.
329+
/// @prop {Map} cell-selected-within-background [igx-color: ('primary', 400)] - The background of the selected cell inside a selected row/column.
330+
/// @prop {Map} cell-selected-within-text-color [igx-contrast-color: ('primary', 400)] - The color of the selected cell inside a selected row/column.
286331
///
287332
/// @requires {function} extend
288333
/// @requires $_indigo-grid
@@ -401,18 +446,26 @@ $_dark-indigo-grid: extend(
401446
igx-color: ('primary', 500),
402447
),
403448

404-
row-selected-hover-background: (
449+
cell-selected-within-background: (
405450
igx-color: ('primary', 400),
406451
),
407452

408-
row-selected-text-color: (
409-
igx-contrast-color: ('primary', 500),
453+
cell-selected-within-text-color: (
454+
igx-contrast-color: ('primary', 400)
455+
),
456+
457+
row-selected-hover-background: (
458+
igx-color: ('primary', 400),
410459
),
411460

412461
row-selected-hover-text-color: (
413462
igx-contrast-color: ('primary', 400),
414463
),
415464

465+
row-selected-text-color: (
466+
igx-contrast-color: ('primary', 500),
467+
),
468+
416469
group-row-background: (
417470
igx-color: 'surface',
418471
),

0 commit comments

Comments
 (0)