Skip to content

Commit 5e1a4a0

Browse files
zdrawkuzdrawku
authored
Merge pull request #5169 from IgniteUI/enhance_list_theme
Enhance list theme
2 parents 4a24590 + feb26c7 commit 5e1a4a0

File tree

6 files changed

+233
-83
lines changed

6 files changed

+233
-83
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 160 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,39 @@
1111
/// @param {Color} $background [null] - The list background color.
1212
/// @param {Color} $header-background [null] - The list header background color.
1313
/// @param {Color} $header-text-color [null] - The list header text color.
14+
///
1415
/// @param {Color} $item-background [null] - The list item background color.
15-
/// @param {Color} $item-text-color [null] - The list item text color.
16+
/// @param {Color} $item-background-hover [null] - The list item hover background color.
1617
/// @param {Color} $item-background-active [null] - The active list item background color.
18+
//
19+
/// @param {Color} $item-text-color [null] - The list item text color.
20+
/// @param {Color} $item-text-color-hover [null] - The list item hover text color.
1721
/// @param {Color} $item-text-color-active [null] - The active list item text color.
1822
///
23+
/// @param {Color} $item-title-color [null] - The list item title color.
24+
/// @param {Color} $item-title-color-hover [null] - The list item hover title color.
25+
/// @param {Color} $item-title-color-active [null] - The active list item title color.
26+
///
27+
/// @param {Color} $item-subtitle-color [null] - The list item subtitle color.
28+
/// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color.
29+
/// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color.
30+
///
31+
/// @param {Color} $item-action-color [null] - The list item action color.
32+
/// @param {Color} $item-action-color-hover [null] - The list item hover action color.
33+
/// @param {Color} $item-action-color-active [null] - The active list item action color.
34+
///
35+
/// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color.
36+
/// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color.
37+
/// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color.
38+
///
1939
/// @param {border-radius} $border-radius [null] - The border radius used for list component.
2040
/// @param {border-radius} $item-border-radius [null] - The border radius used for list item.
2141
///
2242
/// @requires $default-palette
2343
/// @requires $light-schema
2444
/// @requires apply-palette
2545
/// @requires extend
46+
/// @requires hexrgba
2647
/// @requires text-contrast
2748
/// @requires round-borders
2849
///
@@ -45,9 +66,18 @@
4566
$item-text-color: null,
4667
$item-text-color-hover: null,
4768
$item-text-color-active: null,
69+
$item-title-color: null,
70+
$item-title-color-hover: null,
71+
$item-title-color-active: null,
4872
$item-subtitle-color: null,
4973
$item-subtitle-color-hover: null,
5074
$item-subtitle-color-active: null,
75+
$item-action-color: null,
76+
$item-action-color-hover: null,
77+
$item-action-color-active: null,
78+
$item-thumbnail-color: null,
79+
$item-thumbnail-color-hover: null,
80+
$item-thumbnail-color-active: null
5181
) {
5282
$name: 'igx-list';
5383
$list-schema: map-get($schema, $name);
@@ -78,11 +108,19 @@
78108
}
79109

80110
@if not($item-background-hover) and $item-background {
81-
$item-background-hover: rgba(text-contrast($item-background), .1);
111+
@if type-of($item-background) == 'color' and luminance($item-background) < .5 {
112+
$item-background-hover: lighten-color($item-background, 8%);
113+
} @else {
114+
$item-background-hover: darken-color($item-background, 8%);
115+
}
82116
}
83117

84118
@if not($item-background-active) and $item-background {
85-
$item-background-active: rgba(text-contrast($item-background), .1);
119+
@if type-of($item-background) == 'color' and luminance($item-background) < .5 {
120+
$item-background-active: lighten-color($item-background, 8%);
121+
} @else {
122+
$item-background-active: darken-color($item-background, 8%);
123+
}
86124
}
87125

88126
@if not($header-text-color) and $header-background {
@@ -93,38 +131,73 @@
93131
$item-text-color: text-contrast($item-background);
94132
}
95133

96-
@if not($item-text-color-hover) and $item-background {
97-
$item-text-color-hover: text-contrast($item-background);
134+
@if not($item-title-color) and $item-background {
135+
$item-title-color: text-contrast($item-background);
98136
}
99137

100-
@if not($item-text-color-hover) and $item-background-hover {
101-
$item-text-color-hover: text-contrast($item-background-hover);
138+
@if not($item-action-color) and $item-background {
139+
$item-action-color: text-contrast($item-background);
140+
}
141+
142+
@if not($item-thumbnail-color) and $item-background {
143+
$item-thumbnail-color: text-contrast($item-background);
102144
}
103145

104146
@if not($item-subtitle-color) and $item-background {
105147
$item-subtitle-color: rgba(text-contrast($item-background), .74);
106148
}
107149

108-
@if not($item-subtitle-color-hover) and $item-background {
109-
$item-subtitle-color-hover: rgba(text-contrast($item-background), .74);
150+
@if not($item-subtitle-color) and $item-text-color {
151+
$item-subtitle-color: $item-text-color;
110152
}
111153

112-
@if not($item-subtitle-color-hover) and $item-background-hover {
113-
$item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
154+
@if not($item-text-color-hover) and $item-background-hover {
155+
$item-text-color-hover: text-contrast($item-background-hover);
156+
}
157+
158+
@if not($item-title-color-hover) and $item-background-hover {
159+
$item-title-color-hover: text-contrast($item-background-hover);
160+
}
161+
162+
@if not($item-action-color-hover) and $item-background-hover {
163+
$item-action-color-hover: text-contrast($item-background-hover);
114164
}
115165

116-
@if not($item-subtitle-color-active) and $item-background {
117-
$item-subtitle-color-active: rgba(text-contrast($item-background), .74);
166+
@if not($item-thumbnail-color-hover) and $item-background-hover {
167+
$item-thumbnail-color-hover: text-contrast($item-background-hover);
118168
}
119169

120-
@if not($item-text-color-active) and $item-background {
121-
$item-text-color-active: text-contrast($item-background);
170+
@if not($item-subtitle-color-hover) and $item-background-hover {
171+
$item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
172+
}
173+
174+
@if not($item-subtitle-color-hover) and $item-text-color-hover {
175+
$item-subtitle-color-hover: $item-text-color-hover;
122176
}
123177

124178
@if not($item-text-color-active) and $item-background-active {
125179
$item-text-color-active: text-contrast($item-background-active);
126180
}
127181

182+
@if not($item-title-color-active) and $item-background-active {
183+
$item-title-color-active: text-contrast($item-background-active);
184+
}
185+
186+
@if not($item-action-color-active) and $item-background-active {
187+
$item-action-color-active: text-contrast($item-background-active);
188+
}
189+
190+
@if not($item-thumbnail-color-active) and $item-background-active {
191+
$item-thumbnail-color-active: text-contrast($item-background-active);
192+
}
193+
194+
@if not($item-subtitle-color-active) and $item-background-active {
195+
$item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
196+
}
197+
198+
@if not($item-subtitle-color-active) and $item-text-color-active {
199+
$item-subtitle-color-active: $item-text-color-active;
200+
}
128201

129202
@return extend($theme, (
130203
name: $name,
@@ -140,9 +213,18 @@
140213
item-text-color: $item-text-color,
141214
item-text-color-hover: $item-text-color-hover,
142215
item-text-color-active: $item-text-color-active,
216+
item-title-color:$item-title-color,
217+
item-title-color-hover:$item-title-color-hover,
218+
item-title-color-active:$item-title-color-active,
143219
item-subtitle-color: $item-subtitle-color,
144220
item-subtitle-color-hover: $item-subtitle-color-hover,
145221
item-subtitle-color-active: $item-subtitle-color-active,
222+
item-action-color: $item-action-color,
223+
item-action-color-hover: $item-action-color-hover,
224+
item-action-color-active: $item-action-color-active,
225+
item-thumbnail-color: $item-thumbnail-color,
226+
item-thumbnail-color-hover: $item-thumbnail-color-hover,
227+
item-thumbnail-color-active: $item-thumbnail-color-active
146228
));
147229
}
148230

@@ -255,8 +337,43 @@
255337
z-index: 1;
256338
}
257339

340+
%igx-list__item-lines {
341+
color: --var($theme, 'item-text-color');
342+
display: flex;
343+
flex-direction: column;
344+
flex: 1 0 0%;
345+
346+
&:empty {
347+
display: none;
348+
}
349+
}
350+
258351
%igx-list__item-line-subtitle {
259-
color: --var($theme, 'item-subtitle-color')
352+
color: --var($theme, 'item-subtitle-color');
353+
opacity: .74
354+
}
355+
356+
%igx-list__item-line-title {
357+
color: --var($theme, 'item-title-color');
358+
}
359+
360+
%igx-list__item-actions {
361+
display: flex;
362+
align-items: center;
363+
justify-content: center;
364+
color: --var($theme, 'item-action-color');
365+
366+
> * {
367+
margin-left: rem(8px);
368+
}
369+
370+
&:empty {
371+
display: none;
372+
}
373+
374+
%igx-icon-display {
375+
color: --var($theme, 'item-action-color')
376+
}
260377
}
261378

262379
%igx-list-item-content {
@@ -269,29 +386,35 @@
269386
border-radius: --var($theme, 'item-border-radius');
270387
z-index: 2;
271388

272-
%igx-list__item-line-title,
273-
%igx-list__item-lines {
274-
color: --var($theme, 'item-text-color');
275-
}
276-
277389
&:hover {
278390
color: --var($theme, 'item-text-color-hover');
279391
background: --var($theme, 'item-background-hover');
280392

281-
%igx-list__item-line-title,
282393
%igx-list__item-lines {
283-
color: --var($theme, 'item-text-color-hover');
394+
color: currentColor;
395+
}
396+
397+
%igx-list__item-line-title {
398+
color: --var($theme, 'item-title-color-hover');
284399
}
285400

286401
%igx-list__item-line-subtitle {
287402
color: --var($theme, 'item-subtitle-color-hover');
288403
}
289404

290405
%igx-list__item-actions {
291-
color: --var($theme, 'item-text-color-hover');
406+
color: --var($theme, 'item-action-color-hover');
407+
408+
%igx-icon-display {
409+
color: --var($theme, 'item-action-color-hover')
410+
}
411+
}
412+
413+
%igx-list__item-thumbnail {
414+
color: --var($theme, 'item-thumbnail-color-hover');
292415

293416
%igx-icon-display {
294-
color: --var($theme, 'item-text-color-hover')
417+
color: --var($theme, 'item-thumbnail-color-hover')
295418
}
296419
}
297420
}
@@ -305,16 +428,13 @@
305428
padding: map-get($list-item-padding, 'cosy');
306429
}
307430

308-
%igx-list__item-line-title {
309-
color: --var($theme, 'item-text-color')
310-
}
311-
312431
%igx-list__item-thumbnail {
313432
display: flex;
314433
align-items: center;
315434
justify-content: center;
316435
align-self: flex-start;
317436
padding: 0;
437+
color: --var($theme, 'item-thumbnail-color');
318438

319439
> %igx-icon-display {
320440
margin: map-get($list-icon-margin, 'comfortable');
@@ -355,25 +475,6 @@
355475
}
356476
}
357477

358-
%igx-list__item-actions {
359-
display: flex;
360-
align-items: center;
361-
justify-content: center;
362-
color: --var($theme, 'item-text-color');
363-
364-
> * {
365-
margin-left: rem(8px);
366-
}
367-
368-
&:empty {
369-
display: none;
370-
}
371-
372-
%igx-icon-display {
373-
color: --var($theme, 'item-text-color')
374-
}
375-
}
376-
377478
%igx-list__item-actions--cosy {
378479
> * {
379480
margin-left: rem(6px);
@@ -386,35 +487,32 @@
386487
}
387488
}
388489

389-
%igx-list__item-lines {
390-
color: --var($theme, 'item-text-color');
391-
display: flex;
392-
flex-direction: column;
393-
flex: 1 0 0%;
394-
395-
&:empty {
396-
display: none;
397-
}
398-
}
399-
400490
%igx-list__item-lines + %igx-list__item-actions {
401491
margin-left: rem(8px);
402492
}
403493

404494
%igx-list-item-content--active {
405495
%igx-list__item-line-title {
406-
color: --var($theme, 'item-text-color-active')
496+
color: --var($theme, 'item-title-color-active')
407497
}
408498

409499
%igx-list__item-line-subtitle {
410500
color: --var($theme, 'item-subtitle-color-active')
411501
}
412502

413503
%igx-list__item-actions {
414-
color: --var($theme, 'item-text-color-active');
504+
color: --var($theme, 'item-action-color-active');
505+
506+
%igx-icon-display {
507+
color: --var($theme, 'item-action-color-active')
508+
}
509+
}
510+
511+
%igx-list__item-thumbnail {
512+
color: --var($theme, 'item-thumbnail-color-active');
415513

416514
%igx-icon-display {
417-
color: --var($theme, 'item-text-color-active')
515+
color: --var($theme, 'item-thumbnail-color-active')
418516
}
419517
}
420518

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,19 @@
88

99
/// Generates a dark list schema.
1010
/// @type {Map}
11+
/// @property {Map} item-background-hover [igx-color: ('grays', 400), hexrgba: (#000)] - The list item hover background.
12+
/// @property {Map} item-background-active [igx-color: ('grays', 400), hexrgba: (#000)] - The active list item background color.
1113
/// @requires {function} extend
1214
/// @requires $_light-list
1315
/// @see $default-palette
14-
$_dark-list: extend($_light-list, ());
16+
$_dark-list: extend($_light-list, (
17+
item-background-hover: (
18+
igx-color: ('grays', 400),
19+
hexrgba: (#000)
20+
),
21+
22+
item-background-active: (
23+
igx-color: ('grays', 400),
24+
hexrgba: (#000)
25+
),
26+
));

0 commit comments

Comments
 (0)