Skip to content

Commit de25095

Browse files
kdinevkdinev
authored
Merge pull request #16578 from IgniteUI/sivanova/list-styles
refactor(list): styling discrepancies
2 parents d2266d2 + ce4ac8a commit de25095

File tree

3 files changed

+172
-77
lines changed

3 files changed

+172
-77
lines changed

‎projects/igniteui-angular/src/lib/list/themes/_base.scss‎

Lines changed: 171 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -66,38 +66,6 @@ $theme: $base;
6666
--ig-size: 1;
6767
}
6868

69-
&:hover {
70-
@include e(lines) {
71-
color: currentColor;
72-
}
73-
74-
@include e(title) {
75-
color: var-get($theme, 'item-title-color-hover');
76-
}
77-
78-
@include e(subtitle) {
79-
color: var-get($theme, 'item-subtitle-color-hover');
80-
}
81-
82-
@include e(actions) {
83-
color: var-get($theme, 'item-action-color-hover');
84-
85-
igx-icon,
86-
igc-icon {
87-
color: var-get($theme, 'item-action-color-hover');
88-
}
89-
}
90-
91-
@include e(thumbnail) {
92-
color: var-get($theme, 'item-thumbnail-color-hover');
93-
94-
igx-icon,
95-
igc-icon {
96-
color: var-get($theme, 'item-thumbnail-color-hover');
97-
}
98-
}
99-
}
100-
10169
@include e(thumbnail) {
10270
display: flex;
10371
align-items: center;
@@ -112,6 +80,11 @@ $theme: $base;
11280
--component-size: var(--list-size);
11381
}
11482

83+
igx-avatar igx-icon,
84+
igx-avatar igc-icon {
85+
color: var-get($theme, 'item-thumbnail-color');
86+
}
87+
11588
&:empty {
11689
display: none;
11790
}
@@ -179,12 +152,6 @@ $theme: $base;
179152
border-radius: var-get($theme, 'item-border-radius');
180153
z-index: 2;
181154
gap: rem(16px);
182-
183-
&:hover,
184-
&:focus-within {
185-
color: var-get($theme, 'item-text-color-hover');
186-
background: var-get($theme, 'item-background-hover');
187-
}
188155
}
189156

190157
@include e(left) {
@@ -210,38 +177,118 @@ $theme: $base;
210177

211178
@include m(base) {
212179
border-radius: var-get($theme, 'item-border-radius');
213-
}
180+
border-bottom: var-get($theme, 'border-width') solid
181+
var-get($theme, 'border-color');
214182

215-
@include m(active) {
216-
@include e(content) {
217-
color: var-get($theme, 'item-text-color-active');
218-
background: var-get($theme, 'item-background-active');
219-
z-index: 3;
183+
&:last-of-type {
184+
border-bottom: none;
220185
}
221186

222-
@include e(thumbnail) {
223-
color: var-get($theme, 'item-thumbnail-color-active');
187+
&:hover {
188+
@include e(lines) {
189+
color: currentColor;
190+
}
224191

225-
igx-icon,
226-
igc-icon {
227-
color: var-get($theme, 'item-thumbnail-color-active');
192+
@include e(content) {
193+
color: var-get($theme, 'item-text-color-hover');
194+
background: var-get($theme, 'item-background-hover');
228195
}
229-
}
230196

231-
@include e(title) {
232-
color: var-get($theme, 'item-title-color-active');
197+
@include e(title) {
198+
color: var-get($theme, 'item-title-color-hover');
199+
}
200+
201+
@include e(subtitle) {
202+
color: var-get($theme, 'item-subtitle-color-hover');
203+
}
204+
205+
@include e(actions) {
206+
color: var-get($theme, 'item-action-color-hover');
207+
208+
igx-icon,
209+
igc-icon {
210+
color: var-get($theme, 'item-action-color-hover');
211+
}
212+
}
213+
214+
@include e(thumbnail) {
215+
color: var-get($theme, 'item-thumbnail-color-hover');
216+
217+
igx-icon,
218+
igc-icon {
219+
color: var-get($theme, 'item-thumbnail-color-hover');
220+
}
221+
}
233222
}
234223

235-
@include e(subtitle) {
236-
color: var-get($theme, 'item-subtitle-color-active');
224+
&:focus-within {
225+
@include e(lines) {
226+
color: currentColor;
227+
}
228+
229+
@include e(content) {
230+
color: var-get($theme, 'item-text-color-hover');
231+
background: var-get($theme, 'item-background-hover');
232+
}
233+
234+
@include e(title) {
235+
color: var-get($theme, 'item-title-color-hover');
236+
}
237+
238+
@include e(subtitle) {
239+
color: var-get($theme, 'item-subtitle-color-hover');
240+
}
241+
242+
@include e(actions) {
243+
color: var-get($theme, 'item-action-color-hover');
244+
245+
igx-icon,
246+
igc-icon {
247+
color: var-get($theme, 'item-action-color-hover');
248+
}
249+
}
250+
251+
@include e(thumbnail) {
252+
color: var-get($theme, 'item-thumbnail-color-hover');
253+
254+
igx-icon,
255+
igc-icon {
256+
color: var-get($theme, 'item-thumbnail-color-hover');
257+
}
258+
}
237259
}
238260

239-
@include e(actions) {
240-
color: var-get($theme, 'item-action-color-active');
261+
&:active {
262+
@include e(content) {
263+
color: var-get($theme, 'item-text-color-active');
264+
background: var-get($theme, 'item-background-active');
265+
z-index: 3;
266+
}
241267

242-
igx-icon,
243-
igc-icon {
268+
@include e(thumbnail) {
269+
color: var-get($theme, 'item-thumbnail-color-active');
270+
271+
igx-icon,
272+
igc-icon {
273+
color: var-get($theme, 'item-thumbnail-color-active');
274+
}
275+
}
276+
277+
@include e(title) {
278+
color: var-get($theme, 'item-title-color-active');
279+
}
280+
281+
@include e(subtitle) {
282+
color: var-get($theme, 'item-subtitle-color-active');
283+
}
284+
285+
@include e(actions) {
244286
color: var-get($theme, 'item-action-color-active');
287+
288+
igx-icon,
289+
igc-icon {
290+
color: var-get($theme, 'item-action-color-active');
291+
}
245292
}
246293
}
247294
}
@@ -278,6 +325,72 @@ $theme: $base;
278325
color: var-get($theme, 'item-action-color-selected');
279326
}
280327
}
328+
329+
&:hover {
330+
@include e(content) {
331+
color: var-get($theme, 'item-text-color-selected');
332+
background: var-get($theme, 'item-background-selected');
333+
}
334+
335+
@include e(thumbnail) {
336+
color: var-get($theme, 'item-thumbnail-color-selected');
337+
338+
igx-icon,
339+
igc-icon {
340+
color: var-get($theme, 'item-thumbnail-color-selected');
341+
}
342+
}
343+
344+
@include e(title) {
345+
color: var-get($theme, 'item-title-color-selected');
346+
}
347+
348+
@include e(subtitle) {
349+
color: var-get($theme, 'item-subtitle-color-selected');
350+
}
351+
352+
@include e(actions) {
353+
color: var-get($theme, 'item-action-color-selected');
354+
355+
igx-icon,
356+
igc-icon {
357+
color: var-get($theme, 'item-action-color-selected');
358+
}
359+
}
360+
}
361+
362+
&:focus-within {
363+
@include e(content) {
364+
color: var-get($theme, 'item-text-color-selected');
365+
background: var-get($theme, 'item-background-selected');
366+
}
367+
368+
@include e(thumbnail) {
369+
color: var-get($theme, 'item-thumbnail-color-selected');
370+
371+
igx-icon,
372+
igc-icon {
373+
color: var-get($theme, 'item-thumbnail-color-selected');
374+
}
375+
}
376+
377+
@include e(title) {
378+
color: var-get($theme, 'item-title-color-selected');
379+
}
380+
381+
@include e(subtitle) {
382+
color: var-get($theme, 'item-subtitle-color-selected');
383+
}
384+
385+
@include e(actions) {
386+
color: var-get($theme, 'item-action-color-selected');
387+
388+
igx-icon,
389+
igc-icon {
390+
color: var-get($theme, 'item-action-color-selected');
391+
}
392+
}
393+
}
281394
}
282395
}
283396
}

‎projects/igniteui-angular/src/lib/list/themes/shared/_bootstrap.scss‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
$_theme: $bootstrap;
77

88
@include themed-block(igx-list, bootstrap) {
9-
border: rem(1px) solid var-get($_theme, 'border-color');
9+
border: var-get($_theme, 'border-width') solid var-get($_theme, 'border-color');
1010
}
1111

1212
@include themed-block(igx-list-item, bootstrap) {
@@ -27,13 +27,4 @@ $_theme: $bootstrap;
2727
margin: 0;
2828
}
2929
}
30-
31-
@include m(base) {
32-
border-bottom: var-get($_theme, 'border-width') solid
33-
var-get($_theme, 'border-color');
34-
35-
&:last-of-type {
36-
border-bottom: none;
37-
}
38-
}
3930
}

‎projects/igniteui-angular/src/lib/list/themes/shared/_fluent.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,4 @@ $_theme: $fluent;
2323
margin: 0;
2424
}
2525
}
26-
27-
@include m(base) {
28-
border-bottom: var-get($_theme, 'border-width') solid
29-
var-get($_theme, 'border-color');
30-
31-
&:last-of-type {
32-
border-bottom: none;
33-
}
34-
}
3526
}

0 commit comments

Comments
 (0)