Skip to content

Commit 0b90287

Browse files
GerganaKremenskailhan007
GerganaKremenska
and
ilhan007
authored
feat(ui5-tabcontainer): implement SAP Horizon theme family (#4981)
* Horizon theme implemented * fixed coments * fix colors and px to rems * single click are hover icon and neutral tab selected are fixed * focus is fixed * fix(ui5-tab-container): hover in quartz Co-authored-by: ilhan orhan <ilhan.myumyun@sap.com>
1 parent a4e53d0 commit 0b90287

File tree

9 files changed

+136
-58
lines changed

9 files changed

+136
-58
lines changed

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,15 @@
4848
}
4949

5050
.ui5-tc__separator:focus {
51-
outline: none;
51+
outline: none;
5252
}
5353

5454
.ui5-tc__overflow {
5555
flex: 0 0 0;
56-
margin: 0 0.25rem;
56+
}
57+
58+
.ui5-tc__overflow.ui5-tc__overflow--end {
59+
padding-left: 0.188rem;
5760
}
5861

5962
.ui5-tc__overflow[hidden] {
@@ -66,6 +69,10 @@
6669
height: 1.5rem;
6770
}
6871

72+
.ui5-tc__overflow > [ui5-button][focused] {
73+
outline-offset: 0.125rem;
74+
}
75+
6976
.ui5-tc-root.ui5-tc--textOnly .ui5-tc__content {
7077
height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */
7178
}
@@ -108,14 +115,19 @@
108115
min-width: 1.5rem;
109116
margin-top: 0.25rem;
110117
margin-left: 0.625rem;
118+
color: var(--_ui5_tc_headerItem_color);
111119
}
112-
.ui5-tab-single-click-icon {
113-
margin-left: 0.625rem;
114-
float: right;
120+
121+
.ui5-tab-strip-item--selected .ui5-tab-expand-button > [ui5-button] {
122+
color: var(--_ui5_tc_headeritem_text_selected_color);
115123
}
116124

117-
.ui5-tab-strip-item--singleClickArea {
118-
margin-top: 2px;
125+
.ui5-tab-expand-button > [ui5-button]:hover {
126+
color: var(--_ui5_tc_headeritem_text_selected_hover_color);
127+
}
128+
129+
.ui5-tab-single-click-icon {
130+
margin-left: 0.875rem;
119131
}
120132

121133
.ui5-tab-expand-button>[ui5-button]:hover {

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,11 @@
5959
display: none;
6060
}
6161

62-
.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {
63-
border-top-left-radius: var(--_ui5_tc_overflowItem_focus_border);
64-
border-top-right-radius: var(--_ui5_tc_overflowItem_focus_border);
65-
}
66-
67-
.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:last-child::part(native-li)::after {
68-
border-bottom-left-radius: var(--_ui5_tc_overflowItem_focus_border);
69-
border-bottom-right-radius: var(--_ui5_tc_overflowItem_focus_border);
62+
.ui5-tab-container-responsive-popover [ui5-li-custom][focused]::part(native-li)::after {
63+
top: var(--_ui5_tc_overflowItem_focus_offset);
64+
right: var(--_ui5_tc_overflowItem_focus_offset);
65+
bottom: var(--_ui5_tc_overflowItem_focus_offset);
66+
left: var(--_ui5_tc_overflowItem_focus_offset);
7067
}
7168

7269
.ui5-tab-container-responsive-popover::part(content) {

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

Lines changed: 66 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
}
1818

1919
.ui5-tab-strip-itemText {
20+
position: relative;
2021
white-space: nowrap;
2122
overflow: hidden;
2223
text-overflow: ellipsis;
@@ -44,24 +45,34 @@
4445
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
4546
color: var(--_ui5_tc_headeritem_text_selected_color);
4647
}
47-
.ui5-tab-strip-item--selected .ui5-tab-single-click-icon>[ui5-icon] {
48+
.ui5-tab-strip-item--selected.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon>[ui5-icon] {
4849
color: var(--_ui5_tc_headeritem_text_selected_color);
4950
}
5051

51-
.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected).ui5-tab-strip-item--textOnly {
52+
.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText {
53+
display: flex;
54+
align-items: center;
55+
}
56+
57+
.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon {
58+
display: flex;
59+
}
60+
61+
.ui5-tab-strip-item--singleClickArea .ui5-tab-strip-itemText .ui5-tab-single-click-icon>[ui5-icon] {
62+
color: var(--_ui5_tc_headerItem_color);
63+
}
64+
.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected):not(ui5-tab-strip-item--negative).ui5-tab-strip-item--textOnly,
65+
.ui5-tab-strip-item--singleClickArea.ui5-tab-strip-item:hover:not(.ui5-tab-strip-item--selected) .ui5-tab-single-click-icon>[ui5-icon] {
5266
color: var(--_ui5_tc_headerItem_text_hover_color);
5367
}
5468

5569
/* the outline when hover or selected */
56-
.ui5-tab-strip-item--textOnly:hover .ui5-tab-strip-itemContent::after,
57-
.ui5-tab-strip-item--mixedMode:hover .ui5-tab-strip-itemContent::after,
58-
.ui5-tab-strip-item-icon-outer:hover .ui5-tab-strip-itemContent::after,
5970
.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
6071
.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
6172
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
6273
content: "";
6374
position: absolute;
64-
bottom: 1px;
75+
bottom: 0;
6576
left: 0;
6677
right: 0;
6778
border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
@@ -106,7 +117,7 @@
106117
}
107118

108119
.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
109-
bottom: -0.875rem;
120+
bottom: -0.9375rem;
110121
}
111122

112123
.ui5-tab-strip-item--disabled {
@@ -118,12 +129,29 @@
118129
outline: none;
119130
}
120131

121-
.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemText,
122-
.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
123-
.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
124-
outline: var(--_ui5_tc_headerItem_focus_border);
132+
.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before,
133+
.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before {
125134
border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
126-
outline-offset: var(--_ui5_tc_headerItem_focus_offset);
135+
content: "";
136+
pointer-events: none;
137+
position: absolute;
138+
border: var(--_ui5_tc_headerItem_focus_border);
139+
left: var(--_ui5_tc_headerItem_text_focus_border_offset_left);
140+
right: var(--_ui5_tc_headerItem_text_focus_border_offset_right);
141+
top: var(--_ui5_tc_headerItem_text_focus_border_offset_top);
142+
bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
143+
}
144+
145+
.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::before {
146+
border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
147+
content: "";
148+
pointer-events: none;
149+
position: absolute;
150+
border: var(--_ui5_tc_headerItem_focus_border);
151+
left: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_left);
152+
right: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right);
153+
top: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top);
154+
bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
127155
}
128156

129157
.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
@@ -138,15 +166,6 @@
138166
border-radius: var(--_ui5_tc_headerItemIcon_focus_border_radius);
139167
}
140168

141-
142-
/* focused */
143-
.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer .ui5-tab-strip-itemContent,
144-
.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemContent,
145-
.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
146-
.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
147-
border: var(--_ui5_tc_headerItemContent_focus_border);
148-
}
149-
150169
.ui5-tab-strip-item-semanticIcon::before {
151170
display: var(--_ui5_tc_headerItemSemanticIcon_display);
152171
font-family: "SAP-icons";
@@ -181,6 +200,7 @@
181200
height: var(--_ui5_tc_item_icon_circle_size);
182201
width: var(--_ui5_tc_item_icon_circle_size);
183202
pointer-events: none;
203+
background-color: var(--_ui5_tc_headerItemIcon_background_color);
184204
}
185205

186206
.ui5-tab-strip-item-icon {
@@ -224,7 +244,7 @@
224244
line-height: var(--_ui5_tc_item_text_line_height);
225245
}
226246

227-
.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--withAddionalText) .ui5-tab-strip-itemText {
247+
.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText {
228248
padding: 0 0.188rem;
229249
}
230250

@@ -252,8 +272,15 @@
252272
margin-right: 0.5rem;
253273
}
254274

275+
.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText {
276+
color: var(--_ui5_tc_mixedMode_itemText_color);
277+
font-family: var(--_ui5_tc_mixedMode_itemText_font_family);
278+
font-size: var(--_ui5_tc_mixedMode_itemText_font_size);
279+
font-weight: var(--_ui5_tc_mixedMode_itemText_font_weight);
280+
}
281+
255282
/*** Semantic states ***/
256-
.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly,
283+
.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
257284
.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer,
258285
.ui5-tab-strip-item-semanticIcon--positive::before {
259286
color: var(--sapPositiveColor);
@@ -273,13 +300,19 @@
273300
color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
274301
}
275302

303+
.ui5-tab-strip-item.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
304+
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer::after {
305+
border-color: var(--_ui5_tc_headerItem_neutral_border_color);
306+
background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
307+
}
308+
276309
.ui5-tab-strip-item.ui5-tab-strip-item--positive .ui5-tab-strip-itemContent::after,
277310
.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after {
278311
border-color: var(--_ui5_tc_headerItem_positive_border_color);
279312
background-color: var(--_ui5_tc_headerItem_positive_border_bg);
280313
}
281314

282-
.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly,
315+
.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
283316
.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer,
284317
.ui5-tab-strip-item-semanticIcon--negative::before {
285318
color: var(--sapNegativeColor);
@@ -304,7 +337,7 @@
304337
background-color: var(--_ui5_tc_headerItem_negative_border_bg);
305338
}
306339

307-
.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly,
340+
.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
308341
.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer,
309342
.ui5-tab-strip-item-semanticIcon--critical::before {
310343
color: var(--sapCriticalColor);
@@ -329,7 +362,7 @@
329362
background-color: var(--_ui5_tc_headerItem_critical_border_bg);
330363
}
331364

332-
.ui5-tab-strip-item--nutral.ui5-tab-strip-item--textOnly,
365+
.ui5-tab-strip-item--neutral.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemText,
333366
.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
334367
color: var(--sapNeutralColor);
335368
border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
@@ -352,7 +385,14 @@
352385
border-color: var(--_ui5_tc_headerItem_neutral_border_color);
353386
background-color: var(--_ui5_tc_headerItem_neutral_border_bg);
354387
}
388+
389+
.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemContent .ui5-tab-strip-itemAdditionalText {
390+
padding: 0px;
391+
}
392+
355393
.ui5-tab-strip-item .ui5-tab-strip-itemAdditionalText {
394+
padding: 0px 0.188rem;
395+
color: var(--_ui5_tc_headeritem_additional_text_color);
356396
font-weight: var(--_ui5_tc_headeritem_additional_text_font_weight);
357397
}
358398
/*** RTL ***/
@@ -370,16 +410,4 @@
370410
[dir=rtl] .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
371411
margin-right: 0;
372412
margin-left: 0.5rem;
373-
}
374-
375-
.ui5-tab-strip-item--selected:not(.ui5-tab-strip-item--withIcon) .ui5-tab-expand-button>[ui5-button]::after {
376-
content: "";
377-
position: absolute;
378-
bottom: 1px;
379-
left: 12px;
380-
right: 16px;
381-
border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
382-
border-radius: var(--_ui5_tc_headerItemContent_border_radius);
383-
background-color: var(--_ui5_tc_headerItemContent_border_bg);
384-
height: var(--_ui5_tc_headerItemContent_border_height);
385413
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
/* Header Item */
1010
--_ui5_tc_headeritem_padding: 0 1rem;
1111
--_ui5_tc_headerItem_color: var(--sapContent_LabelColor);
12+
--_ui5_tc_headeritem_additional_text_color: var(--sapContent_LabelColor);
1213
--_ui5_tc_headerItem_text_hover_color: var(--_ui5_tc_headerItem_color);
1314
--_ui5_tc_headeritem_text_selected_color: var(--sapSelectedColor);
1415
--_ui5_tc_headeritem_text_selected_hover_color: var(--sapSelectedColor);
@@ -43,12 +44,24 @@
4344
--_ui5_tc_headerItemContent_offset: 1rem;
4445
--_ui5_tc_headerItemContent_focus_offset: 1rem;
4546
--_ui5_tc_headerItem_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
47+
--_ui5_tc_headerItem_text_focus_border_offset_left: 0px;
48+
--_ui5_tc_headerItem_text_focus_border_offset_right: 0px;
49+
--_ui5_tc_headerItem_text_focus_border_offset_top: 0px;
50+
--_ui5_tc_headerItem_text_focus_border_offset_bottom: 0px;
51+
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_left: 0.75rem;
52+
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_right: 0.625rem;
53+
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_top: 0.75rem;
54+
--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom: 0.75rem;
4655
--_ui5_tc_headerItemContent_padding: 0;
4756
--_ui5_tc_headerItemContent_focus_border: none;
4857
--_ui5_tc_headerItemContent_default_focus_border: none;
4958
--_ui5_tc_headerItemContent_focus_border_radius: 0;
5059
--_ui5_tc_headerItemSemanticIcon_display: none;
5160
--_ui5_tc_headerItem_focus_border_radius: 0px;
61+
--_ui5_tc_mixedMode_itemText_color: var(--sapContent_LabelColor);
62+
--_ui5_tc_mixedMode_itemText_font_family: var(--sapFontFamily);
63+
--_ui5_tc_mixedMode_itemText_font_size: var(--sapFontSmallSize);
64+
--_ui5_tc_mixedMode_itemText_font_weight: normal;
5265

5366
/* Overflow Item */
5467

@@ -57,6 +70,7 @@
5770
--_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor);
5871
--_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor);
5972
--_ui5_tc_overflowItem_focus_border: 0px;
73+
--_ui5_tc_overflowItem_focus_offset: 0.125rem;
6074

6175
/* Header Item icons */
6276
--_ui5_tc_headerItemIcon_border: 1px solid var(--sapHighlightColor);
@@ -68,6 +82,7 @@
6882
--_ui5_tc_headerItemIcon_critical_selected_background: var(--sapCriticalColor);
6983
--_ui5_tc_headerItemIcon_neutral_selected_background: var(--sapNeutralColor);
7084
--_ui5_tc_headerItemIcon_semantic_selected_color: var(--sapGroup_ContentBackground);
85+
--_ui5_tc_headerItemIcon_background_color: transparent;
7186

7287
--_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor);
7388
--_ui5_tc_overflowItem_current_color: CurrentColor;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
--_ui5_tc_item_height: 4.75rem;
8484
--_ui5_tc_item_text_only_height: 2.75rem;
8585
--_ui5_tc_item_text_only_with_additional_text_height: 3.75rem;
86-
--_ui5_tc_item_text_line_height: normal;
86+
--_ui5_tc_item_text_line_height: 1.325rem;
8787
--_ui5_tc_item_icon_circle_size: 2.75rem;
8888
--_ui5_tc_item_icon_size: 1.25rem;
8989
--_ui5_tc_item_add_text_margin_top: 0.375rem;

‎packages/main/src/themes/sap_fiori_3/TabContainer-parameters.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
--_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor);
1010
--_ui5_tc_overflowItem_current_color: CurrentColor;
1111
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
12+
--_ui5_tc_headerItem_text_hover_color: #1a1c1f;
1213
}

‎packages/main/src/themes/sap_fiori_3_dark/TabContainer-parameters.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@
99
--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
1010
--_ui5_tc_overflowItem_current_color: CurrentColor;
1111
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
12+
--_ui5_tc_headerItem_text_hover_color: #fff;
1213
}

‎packages/main/src/themes/sap_horizon/TabContainer-parameters.css

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,29 @@
66
/* Header Item */
77
--_ui5_tc_headerItemContent_border_bottom: 0.1875rem solid var(--sapSelectedColor);
88
--_ui5_tc_headerItem_color: var(--sapTextColor);
9-
--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
9+
--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
1010
--_ui5_tc_overflowItem_current_color: CurrentColor;
1111
--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
1212

13+
/* Focus & Hover */
14+
--_ui5_tc_headerItem_focus_border: 0.125rem solid var(--sapContent_FocusColor);
1315
--_ui5_tc_headerItem_focus_border_offset: -5px;
1416
--_ui5_tc_headerItemIcon_focus_border_radius: 50%;
15-
--_ui5_tc_headerItem_focus_border_radius: 0.25rem;
17+
--_ui5_tc_headerItem_focus_border_radius: 0.375rem;
1618
--_ui5_tc_headeritem_text_font_weight: bold;
17-
--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
1819
--_ui5_tc_headerItem_focus_offset: 1px;
20+
--_ui5_tc_headerItem_text_hover_color: var(--sapContent_Selected_ForegroundColor);
1921

2022
/* Header Item icons */
21-
--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);
23+
--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapContent_Selected_ForegroundColor);
24+
--_ui5_tc_headerItemIcon_color: var(--sapContent_Selected_ForegroundColor);
25+
--_ui5_tc_headerItemIcon_selected_background: var(--sapContent_Selected_ForegroundColor);
26+
--_ui5_tc_headerItemIcon_background_color: var(--sapContent_Selected_Background);
27+
--_ui5_tc_headerItemIcon_selected_color: var(--sapContent_ContrastIconColor);
2228

2329
/* Overflow Item */
2430
--_ui5_tc_overflowItem_focus_border: 0.75rem;
31+
32+
/* Mixed Mode */
33+
--_ui5_tc_mixedMode_itemText_color: var(--sapTextColor);
2534
}

0 commit comments

Comments
 (0)