refactor(ui5-li): apply selection border color (#1063)

SAP · Dec 16, 2019 · 2b981e2 · 2b981e2
1 parent 7ad9de1
commit 2b981e2
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 0 deletions.
diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
@@ -12,6 +12,14 @@
 	border-bottom: var(--ui5-listitem-border-bottom);
 }
 
+:host([selected]) {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
+:host([selected][has-border]) {
+	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
+
 .ui5-li-root {
 	position: relative;
 	display: flex;

diff --git a/packages/main/src/themes/base/ListItemBase-parameters.css b/packages/main/src/themes/base/ListItemBase-parameters.css
@@ -1,5 +1,6 @@
 :root {
 	--ui5-listitem-background-color: var(--sapList_Background);
 	--ui5-listitem-border-bottom: 1px solid var(--sapList_BorderColor);
+	--ui5-listitem-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 	--_ui5_listitembase_focus_width: 1px;
 }
diff --git a/packages/theme-base/src/themes/sap_belize/base-parameters-vars.less b/packages/theme-base/src/themes/sap_belize/base-parameters-vars.less
@@ -195,6 +195,7 @@
   --sapList_FooterBackground: @sapList_FooterBackground;
   --sapList_FooterTextColor: @sapList_FooterTextColor;
   --sapList_GroupHeaderBorderColor: @sapList_GroupHeaderBorderColor;
+  --sapList_SelectionBorderColor: @sapList_SelectionBorderColor;
 
   --sapScrollBar_BorderColor: @sapScrollBar_BorderColor;
   --sapScrollBar_SymbolColor: @sapScrollBar_SymbolColor;

diff --git a/packages/theme-base/src/themes/sap_belize/base-parameters.less b/packages/theme-base/src/themes/sap_belize/base-parameters.less
@@ -207,6 +207,7 @@
 @sapList_SelectionBackgroundColor: lighten(desaturate(@sapSelectedColor, 2), 47);
 @sapList_FooterBackground: darken(@sapBaseColor, 9);
 @sapList_FooterTextColor: contrast(@sapList_FooterBackground, @sapList_TextColor, @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold);
+@sapList_SelectionBorderColor: @sapList_BorderColor;
 
 @sapPageHeader_Background: @sapBaseColor;
 @sapPageFooter_Background: @sapPrimary4;

diff --git a/packages/theme-base/src/themes/sap_belize_hcb/base-parameters-vars.less b/packages/theme-base/src/themes/sap_belize_hcb/base-parameters-vars.less
@@ -229,6 +229,7 @@
   --sapList_FooterBackground: @sapList_FooterBackground;
   --sapList_FooterTextColor: @sapList_FooterTextColor;
   --sapList_GroupHeaderBorderColor: @sapList_GroupHeaderBorderColor;
+  --sapList_SelectionBorderColor: @sapList_SelectionBorderColor;
 
   --sapScrollBar_FaceColor: @sapScrollBar_FaceColor;
   --sapScrollBar_TrackColor: @sapScrollBar_TrackColor;

diff --git a/packages/theme-base/src/themes/sap_belize_hcb/base-parameters.less b/packages/theme-base/src/themes/sap_belize_hcb/base-parameters.less
@@ -229,6 +229,7 @@
 @sapList_TableGroupHeaderTextColor: @sapList_GroupHeaderTextColor;
 @sapList_FooterBackground: @sapList_Background;
 @sapList_FooterTextColor: contrast(@sapList_FooterBackground, @sapTextColor, @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold);
+@sapList_SelectionBorderColor: @sapList_BorderColor;
 
 @sapScrollBar_FaceColor: @sapHC_ReducedAltForeground;
 @sapScrollBar_TrackColor: @sapBackgroundColor;

diff --git a/packages/theme-base/src/themes/sap_fiori_3/base-parameters-vars.less b/packages/theme-base/src/themes/sap_fiori_3/base-parameters-vars.less
@@ -240,6 +240,7 @@
   --sapList_TableGroupHeaderTextColor: @sapList_TableGroupHeaderTextColor;
   --sapList_FooterTextColor: @sapList_FooterTextColor;
   --sapList_GroupHeaderBorderColor: @sapList_GroupHeaderBorderColor;
+  --sapList_SelectionBorderColor: @sapList_SelectionBorderColor;
 
   --sapScrollBar_FaceColor: @sapScrollBar_FaceColor;
   --sapScrollBar_TrackColor: @sapScrollBar_TrackColor;

diff --git a/packages/theme-base/src/themes/sap_fiori_3/base-parameters.less b/packages/theme-base/src/themes/sap_fiori_3/base-parameters.less
@@ -237,6 +237,7 @@
 @sapList_TableGroupHeaderTextColor: contrast(@sapList_TableGroupHeaderBackground, @sapList_TextColor, @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold);
 @sapList_FooterTextColor: contrast(@sapList_FooterBackground, @sapTextColor, @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold);
 @sapList_GroupHeaderBorderColor: darken(@sapList_BorderColor, 4.9);
+@sapList_SelectionBorderColor: @sapSelectedColor;
 
 @sapScrollBar_FaceColor: darken(@sapBaseColor, 30);
 @sapScrollBar_TrackColor: lighten(@sapScrollBar_FaceColor, 30);

diff --git a/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters-vars.less b/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters-vars.less
@@ -243,6 +243,7 @@
   --sapList_TableGroupHeaderTextColor: @sapList_TableGroupHeaderTextColor;
   --sapList_FooterBackground: @sapList_FooterBackground;
   --sapList_GroupHeaderBorderColor: @sapList_GroupHeaderBorderColor;
+  --sapList_SelectionBorderColor: @sapList_SelectionBorderColor;
 
   --sapScrollBar_FaceColor: @sapScrollBar_FaceColor;
   --sapScrollBar_TrackColor: @sapScrollBar_TrackColor;

diff --git a/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters.less b/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters.less
@@ -192,6 +192,7 @@
 @sapList_Hover_Background: contrast(@sapList_Background, darken(@sapList_Background, 4), lighten(@sapList_Background, 3));
 @sapList_Hover_SelectionBackground: contrast(@sapList_SelectionBackgroundColor, darken(@sapList_SelectionBackgroundColor, 3), lighten(@sapList_SelectionBackgroundColor, 3));
 @sapList_GroupHeaderBorderColor: lighten(@sapList_BorderColor, 20);
+@sapList_SelectionBorderColor: @sapSelectedColor;
 
 @sapScrollBar_BorderColor: @sapScrollBar_FaceColor;
 @sapScrollBar_SymbolColor: @sapContent_IconColor;