From 196245591cb8d4740faa26cc2e6027cc6718813b Mon Sep 17 00:00:00 2001 From: MPopov Date: Mon, 29 Jul 2019 14:09:32 +0300 Subject: [PATCH 1/2] fix(List): Allowing users to modify list-item styles by adding a custom CSS class. Closes #5504 --- .../styles/components/list/_list-theme.scss | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 954de72d9fe..e3cf6523cee 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -328,6 +328,41 @@ flex-flow: column wrap; justify-content: center; border-radius: --var($theme, 'item-border-radius'); + color: --var($theme, 'item-text-color'); + background: --var($theme, 'item-background'); + + &:hover { + color: --var($theme, 'item-text-color-hover'); + background: --var($theme, 'item-background-hover'); + + %igx-list__item-lines { + color: currentColor; + } + + %igx-list__item-line-title { + color: --var($theme, 'item-title-color-hover'); + } + + %igx-list__item-line-subtitle { + color: --var($theme, 'item-subtitle-color-hover'); + } + + %igx-list__item-actions { + color: --var($theme, 'item-action-color-hover'); + + %igx-icon-display { + color: --var($theme, 'item-action-color-hover') + } + } + + %igx-list__item-thumbnail { + color: --var($theme, 'item-thumbnail-color-hover'); + + %igx-icon-display { + color: --var($theme, 'item-thumbnail-color-hover') + } + } + } } %igx-list-item-pan { @@ -381,43 +416,8 @@ align-items: center; position: relative; padding: map-get($list-item-padding, 'comfortable'); - color: --var($theme, 'item-text-color'); - background: --var($theme, 'item-background'); border-radius: --var($theme, 'item-border-radius'); z-index: 2; - - &:hover { - color: --var($theme, 'item-text-color-hover'); - background: --var($theme, 'item-background-hover'); - - %igx-list__item-lines { - color: currentColor; - } - - %igx-list__item-line-title { - color: --var($theme, 'item-title-color-hover'); - } - - %igx-list__item-line-subtitle { - color: --var($theme, 'item-subtitle-color-hover'); - } - - %igx-list__item-actions { - color: --var($theme, 'item-action-color-hover'); - - %igx-icon-display { - color: --var($theme, 'item-action-color-hover') - } - } - - %igx-list__item-thumbnail { - color: --var($theme, 'item-thumbnail-color-hover'); - - %igx-icon-display { - color: --var($theme, 'item-thumbnail-color-hover') - } - } - } } %igx-list-item-content--compact { From 02584e8d161b1110c68186d2194aed57cebbbc09 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 29 Jul 2019 16:52:42 +0300 Subject: [PATCH 2/2] fix(list): item content doesn't have background on pan Ensure the inner container of the list item inherits the background and color from its wrapping parent --- .../src/lib/core/styles/components/list/_list-theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index e3cf6523cee..1b9b6dc8629 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -417,6 +417,7 @@ position: relative; padding: map-get($list-item-padding, 'comfortable'); border-radius: --var($theme, 'item-border-radius'); + background: inherit; z-index: 2; }