Skip to content

Commit 5c2a056

Browse files
elenastoyanovaaelenastoyanovaa
authored
feat(ui5-table): implement SAP Horizon themes (#4992)
* feat(ui5-table): implement SAP Horizon themes * group header styles adjustments FIXES: #4938
1 parent 0137225 commit 5c2a056

31 files changed

+116
-39
lines changed

‎packages/main/src/themes/Table.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@ table {
2222
font-family: "72override", var(--sapFontFamily);
2323
font-size: var(--sapFontSize);
2424
font-weight: var(--ui5_table_header_row_font_weight);
25+
border-bottom: var(--ui5_table_header_row_border_width) solid var(--ui5_table_header_row_border_bottom_color);
2526
}
2627

2728
.ui5-table-header-row:focus {
2829
outline: var(--ui5_table_header_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
29-
outline-offset: -0.125rem;
30+
outline-offset: var(--ui5_table_focus_outline_offset);
3031
}
3132

3233
tr {

‎packages/main/src/themes/TableCell.css

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,9 @@ td {
1414
display: contents;
1515
}
1616

17-
.ui5-table-popin-row td {
18-
padding-left: 1rem;
19-
20-
}
21-
22-
:host([popined]) td {
17+
:host([popined]) {
2318
padding-left: 0;
19+
padding-top: .25rem;
2420
}
2521

2622
::slotted([ui5-label]) {

‎packages/main/src/themes/TableColumn.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@
44

55
th {
66
background: var(--sapList_HeaderBackground);
7-
border: none;
8-
border-bottom: 1px solid var(--sapList_BorderColor);
97
width: inherit;
108
font-weight: var(--ui5_table_header_row_font_weight);
119
font-size: var(--sapFontMediumSize);
12-
padding: 0.25rem;
10+
padding: 0.5rem;
1311
box-sizing: border-box;
1412
text-align: left;
1513
vertical-align: middle;

‎packages/main/src/themes/TableGroupRow.css

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,20 @@
88
}
99

1010
.ui5-table-group-row-root {
11-
height: 2rem;
12-
border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);
11+
height: var(--ui5_table_group_row_height);
12+
border-style: solid;
13+
border-color: var(--sapList_TableGroupHeaderBorderColor);
14+
border-width: var(--ui5_table_border_width);
1315
background-color: var(--sapList_TableGroupHeaderBackground);
1416
color: var(--sapList_TableGroupHeaderTextColor);
1517
font-family: "72override", var(--sapFontFamily);
1618
font-size: var(--sapFontSize);
17-
font-weight: normal;
19+
font-weight: var(--ui5_table_group_row_font-weight);
1820
}
1921

2022
.ui5-table-group-row-root:focus {
2123
outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
22-
outline-offset: -0.0625rem;
24+
outline-offset: var(--ui5_table_focus_outline_offset);
2325
}
2426

2527
td {

‎packages/main/src/themes/TableRow.css

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@
1111
background-color: var(--sapList_Background);
1212
color: var(--sapList_TextColor);
1313
border-top: 1px solid var(--sapList_BorderColor);
14+
height: var(--ui5_table_row_height);
1415
}
1516

1617
.ui5-table-row-root:focus {
1718
outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
18-
outline-offset: -0.0625rem;
19+
outline-offset: var(--ui5_table_focus_outline_offset);
1920
}
2021

2122
.ui5-table-popin-row {
@@ -27,10 +28,14 @@
2728
}
2829

2930
.ui5-table-popin-row td {
30-
padding: .25rem;
31+
padding-top: .5rem;
3132
padding-left: 1rem;
3233
}
3334

35+
.ui5-table-popin-row:last-child td {
36+
padding-bottom: .5rem;
37+
}
38+
3439
.ui5-table-row-popin-title {
3540
color: var(--sapContent_LabelColor);
3641
font-family: "72override", var(--sapFontFamily);
@@ -51,35 +56,38 @@
5156
cursor: pointer;
5257
}
5358

54-
:host([type="Active"]) .ui5-table-row-root:hover,
55-
:host([mode="SingleSelect"]) .ui5-table-row-root:hover,
56-
:host([mode="SingleSelect"]) .ui5-table-row-root:active {
57-
background-color: var(--sapList_Hover_Background);
59+
:host ::slotted([ui5-table-cell]:not([popined])) {
60+
padding: .25rem .5rem;
5861
}
5962

60-
:host([type="Active"][active]) .ui5-table-row-root,
61-
:host([selected][type="Active"][active]) .ui5-table-row-root:hover {
62-
background-color: var(--sapList_Active_Background);
63+
:host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
64+
padding-left: 1rem;
6365
}
6466

65-
:host([selected]) .ui5-table-row-root {
66-
background: var(--sapList_SelectionBackgroundColor);
67-
border-bottom: 1px solid var(--sapList_SelectionBorderColor);
67+
/** Hover **/
68+
:host([type="Active"]) .ui5-table-row-root:hover,
69+
:host([mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
70+
background-color: var(--sapList_Hover_Background);
6871
}
6972

70-
:host([selected][type="Active"]) .ui5-table-row-root:hover,
71-
:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover {
72-
background: var(--sapList_Hover_SelectionBackground);
73+
/** Down/Active **/
74+
:host([type="Active"]) .ui5-table-row-root:active,
75+
:host([selected][type="Active"]) .ui5-table-row-root:active {
76+
background-color: var(--sapList_Active_Background);
7377
}
7478

75-
:host([type="Active"][active]) .ui5-table-row-root ::slotted([ui5-table-cell]) {
79+
:host([type="Active"]) .ui5-table-row-root:active ::slotted([ui5-table-cell]) {
7680
color: var(--sapList_Active_TextColor);
7781
}
7882

79-
:host ::slotted([ui5-table-cell]) {
80-
padding: .5rem .25rem;
83+
/** Selected **/
84+
:host([selected]) .ui5-table-row-root:not(:active) {
85+
background-color: var(--sapList_SelectionBackgroundColor);
86+
border-bottom: 1px solid var(--sapList_SelectionBorderColor);
8187
}
8288

83-
:host ::slotted([ui5-table-cell]:first-child) {
84-
padding-left: 1rem;
89+
/** Hover on Selected **/
90+
:host([selected][type="Active"]) .ui5-table-row-root:hover:not(:active),
91+
:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
92+
background-color: var(--sapList_Hover_SelectionBackground);
8593
}

‎packages/main/src/themes/base/Table-parameters.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@
33
--ui5_table_header_row_outline_width: 1px;
44
--ui5_table_multiselect_column_width: 2.75rem;
55
--ui5_table_header_row_font_weight: normal;
6+
--ui5_table_header_row_border_bottom_color: var(--sapList_BorderColor);
7+
--ui5_table_header_row_border_width: 1px;
68
}

‎packages/main/src/themes/base/TableGroupRow-parameters.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:root {
2+
--ui5_table_group_row_font-weight: normal;
3+
--ui5_table_border_width: 0 0 1px 0;
4+
}

‎packages/main/src/themes/base/sizes-parameters.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,9 @@
109109
--_ui5_load_more_text_font_size: var(--sapFontMediumSize);
110110
--_ui5_load_more_desc_padding: 0.375rem 2rem 0.875rem 2rem;
111111
--ui5_table_header_row_height: 2.75rem;
112+
--ui5_table_row_height: 2.75rem;
113+
--ui5_table_focus_outline_offset: -0.125rem;
114+
--ui5_table_group_row_height: 2rem;
112115

113116
/* Tree */
114117
--_ui5-tree-indent-step: 1.5rem;
@@ -296,6 +299,7 @@
296299
--_ui5_load_more_text_font_size: var(--sapFontSize);
297300
--_ui5_load_more_desc_padding: 0 2rem 0.875rem 2rem;
298301
--ui5_table_header_row_height: 2rem;
302+
--ui5_table_row_height: 2rem;
299303

300304
/* Tree */
301305
--_ui5-tree-indent-step: 0.5rem;

‎packages/main/src/themes/sap_belize/TableRow-parameters.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../base/TableRow-parameters.css";
2+
3+
:root {
4+
--ui5_table_row_height: 3rem;
5+
}

‎packages/main/src/themes/sap_belize/parameters-bundle.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
@import "../base/Switch-parameters.css";
3131
@import "./TabContainer-parameters.css";
3232
@import "./Table-parameters.css";
33-
@import "../base/TableRow-parameters.css";
33+
@import "../base/TableColumn-parameters.css";
34+
@import "./TableRow-parameters.css";
35+
@import "../base/TableGroupRow-parameters.css";
3436
@import "../base/GrowingButton-parameters.css";
3537
@import "../base/TextArea-parameters.css";
3638
@import "./TimePicker-parameters.css";

0 commit comments

Comments
 (0)