Skip to content

Commit 3dbfa87

Browse files
g-cheishvilig-cheishvili
authored
feat(styles): icon tabs header horizon delta theming (#3301)
* fix(styles): fixed variables for colors and icon visibility * fix(styles): fixed overflow button styles * fix(styles,docs): fixed overflow button. fixed overflow example, it should have been process type tab header * fix(styles): removed unnecessary border from overflow button * fix(styles): fixed selection bar height on hcb and hcw themes * chore(styles): removed unnecessary styling [ci visual] * chore(styles): extracted variables into common files [ci visual] * fix(styles): fixed icon position [ci visual] * fix(styles): fixed icon color and removed unused variable [ci visual] * fix(styles): fixed label delta variables [ci visual] * fix(styles): fixed hc badge color [ci visual] * fix(styles): wip fixing labels * fix(styles): fixed font-weight of label * fix(styles): fixed focus styles [ci visual]
1 parent 02aec04 commit 3dbfa87

16 files changed

+231
-235
lines changed

‎src/styles/icon-tab-bar.scss‎

Lines changed: 103 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,46 +12,47 @@ $fd-icon-tab-bar-icon-circle-size-compact: 2rem !default;
1212
$fd-icon-tab-bar-multi-click-button-size: 1.5rem !default;
1313
$fd-icon-tab-bar-tablist-border: var(--sapContent_HeaderShadow);
1414
$fd-icon-tab-bar-filter-container-top-offset: 1.625rem !default;
15-
$fd-icon-tab-bar-overflow-button-border-radius: 0.75rem !default;
16-
$fd-icon-tab-bar-overflow-button-focus-offset: 0.125rem !default;
15+
$fd-icon-tab-bar-overflow-button-border-radius: var(--fdIcon_Tab_Bar_Overflow_Button_Border_Radius) !default;
16+
$fd-icon-tab-bar-overflow-button-focus-offset: var(--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset) !default;
1717
$fd-icon-tab-bar-filter-container-top-offset-compact: 1.375rem !default;
1818
$fd-icon-tab-bar-dnd-separator-bar-horizontal-offset: -0.5rem !default;
1919
$fd-icon-tab-bar-dnd-separator-bar-vertical-offset: 0.125rem !default;
2020
$fd-icon-tab-bar-dnd-separator-circle-horizontal-offset: -0.7rem !default;
2121
$fd-icon-tab-bar-dnd-separator-circle-vertical-offset: -0.0625rem !default;
2222
$fd-icon-tab-bar-dnd-separator-circle-size: 0.5rem !default;
23+
$fd-icon-tab-bar-focus-offset: var(--fdIcon_Tab_Bar_Focus_Offset) !default;
2324

2425
$fd-icon-tab-bar-responsive-paddings: (
25-
'sm': ('padding': 0 1rem),
26-
'md': ('padding': 0 2rem),
27-
'lg': ('padding': 0 2rem),
28-
'xl': ('padding': 0 3rem),
26+
'sm': ('padding': 0 1rem),
27+
'md': ('padding': 0 2rem),
28+
'lg': ('padding': 0 2rem),
29+
'xl': ('padding': 0 3rem),
2930
'xxl': ('padding': 0 3rem)
3031
);
3132

3233
$fd-icon-tab-bar-semantic-values: (
33-
'negative': (
34+
'negative': (
3435
'icon': '\e1ec',
3536
'iconColor': var(--sapNegativeElementColor),
3637
'color': var(--fdIcon_Tab_Bar_Semantic_Color_Negative),
3738
'badgeColor': var(--fdIcon_Tab_Bar_Semantic_Badge_Color_Negative),
3839
'backgroundColor': var(--fdIcon_Tab_Bar_Semantic_Background_Color_Negative)
3940
),
40-
'positive': (
41+
'positive': (
4142
'icon': '\e1c1',
4243
'iconColor': var(--sapPositiveElementColor),
4344
'color': var(--fdIcon_Tab_Bar_Semantic_Color_Positive),
4445
'badgeColor': var(--fdIcon_Tab_Bar_Semantic_Badge_Color_Positive),
4546
'backgroundColor': var(--fdIcon_Tab_Bar_Semantic_Background_Color_Positive)
4647
),
47-
'critical': (
48+
'critical': (
4849
'icon': '\e053',
4950
'iconColor': var(--sapCriticalElementColor),
5051
'color': var(--fdIcon_Tab_Bar_Semantic_Color_Critical),
5152
'badgeColor': var(--fdIcon_Tab_Bar_Semantic_Badge_Color_Critical),
5253
'backgroundColor': var(--fdIcon_Tab_Bar_Semantic_Background_Color_Critical)
5354
),
54-
'informative': (
55+
'informative': (
5556
'icon': '\e289',
5657
'iconColor': var(--sapInformativeElementColor),
5758
'color': var(--fdIcon_Tab_Bar_Semantic_Color_Informative),
@@ -137,13 +138,22 @@ $fd-icon-tab-bar-semantic-values: (
137138
}
138139
}
139140

140-
@mixin fd-tabs-focus($outlineColor: var(--sapContent_FocusColor), $offset: false) {
141-
outline-color: $outlineColor;
142-
outline-style: var(--sapContent_FocusStyle);
143-
outline-width: var(--sapContent_FocusWidth);
141+
@mixin fd-tabs-focus($outlineColor: var(--sapContent_FocusColor), $offset: false, $placement: "after") {
142+
&::#{$placement} {
143+
content: '';
144+
position: absolute;
145+
top: 0;
146+
left: 0;
147+
right: 0;
148+
bottom: 0;
149+
display: block;
150+
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) $outlineColor;
144151

145-
@if $offset {
146-
outline-offset: 0.0625rem;
152+
@if $offset {
153+
@include fd-set-equal-positions($fd-icon-tab-bar-focus-offset);
154+
}
155+
156+
@content;
147157
}
148158
}
149159

@@ -269,10 +279,6 @@ $fd-icon-tab-bar-semantic-values: (
269279
min-height: 2.75rem;
270280
position: relative;
271281
overflow-x: hidden;
272-
273-
&--left-offset {
274-
@include fd-set-padding-left(3.5rem);
275-
}
276282
}
277283

278284
&__panel {
@@ -292,6 +298,8 @@ $fd-icon-tab-bar-semantic-values: (
292298

293299
@include fd-focus() {
294300
.#{$block}__tab-container {
301+
position: relative;
302+
295303
@include fd-tabs-focus();
296304
}
297305

@@ -327,27 +335,6 @@ $fd-icon-tab-bar-semantic-values: (
327335
}
328336
}
329337

330-
&.#{$block}__item--overflow {
331-
position: absolute;
332-
top: 50%;
333-
transform: translateY(-50%);
334-
margin: 0;
335-
336-
&-left {
337-
@include fd-set-position-left(0);
338-
}
339-
340-
.#{$block}__popover {
341-
position: relative;
342-
343-
&-body {
344-
@include fd-set-margin-right(-0.25rem);
345-
346-
margin-top: 0.375rem;
347-
}
348-
}
349-
}
350-
351338
&--dnd-preview {
352339
@include fd-flex-center() {
353340
flex-direction: column;
@@ -497,14 +484,34 @@ $fd-icon-tab-bar-semantic-values: (
497484
}
498485
}
499486

487+
@include fd-hover() {
488+
.#{$block}__tag {
489+
color: var(--fdIcon_Tab_Bar_Label_Hover_Color);
490+
}
491+
}
492+
500493
@include fd-focus() {
501494
box-shadow: none;
502495
outline: none;
503496

504-
.#{$block}__tag,
505-
.#{$block}__icon,
497+
.#{$block}__icon {
498+
@include fd-tabs-focus(var(--sapContent_FocusColor), true) {
499+
border-radius: var(--fdIcon_Tab_Bar_Icon_Focus_Radius);
500+
501+
@include fd-set-equal-positions(var(--fdIcon_Tab_Bar_Icon_Focus_Offset));
502+
}
503+
}
504+
505+
.#{$block}__tag {
506+
@include fd-tabs-focus(var(--sapContent_FocusColor), true) {
507+
border-radius: var(--fdIcon_Tab_Bar_Text_Focus_Radius);
508+
};
509+
}
510+
506511
.#{$block}__container--filter {
507-
@include fd-tabs-focus();
512+
@include fd-tabs-focus(var(--sapContent_FocusColor), true, "before") {
513+
border-radius: var(--fdIcon_Tab_Bar_Text_Focus_Radius);
514+
};
508515
}
509516
}
510517

@@ -530,6 +537,11 @@ $fd-icon-tab-bar-semantic-values: (
530537

531538
&__tag {
532539
@extend %fd-icon-tab-bar-text;
540+
541+
position: relative;
542+
font-weight: var(--fdIcon_Tab_Bar_Label_Font_Weight);
543+
color: var(--fdIcon_Tab_Bar_Label_Color);
544+
font-size: var(--fdIcon_Tab_Bar_Label_Font_Size);
533545
}
534546

535547
&__counter {
@@ -546,11 +558,14 @@ $fd-icon-tab-bar-semantic-values: (
546558

547559
@include fd-icon-selector() {
548560
font-size: 1.25rem;
549-
color: var(--sapContent_IconColor);
561+
color: var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);
562+
563+
@include fd-inline-flex-center();
550564
}
551565

566+
position: relative;
552567
border-radius: 50%;
553-
border: $fd-icon-tab-bar-border-thickness solid var(--fdIcon_Tab_Bar_Icon_Border_Color);
568+
border: var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);
554569
}
555570

556571
&__details {
@@ -573,8 +588,9 @@ $fd-icon-tab-bar-semantic-values: (
573588
@include fd-ellipsis();
574589

575590
line-height: 0.875rem;
576-
font-size: var(--sapFontSmallSize);
577-
color: var(--sapContent_LabelColor);
591+
font-weight: var(--fdIcon_Tab_Bar_Label_Font_Weight);
592+
font-size: var(--fdIcon_Tab_Bar_Label_Font_Size);
593+
color: var(--fdIcon_Tab_Bar_Label_Color);
578594
}
579595

580596
&__separator {
@@ -668,6 +684,8 @@ $fd-icon-tab-bar-semantic-values: (
668684
var(--sapButton_Hover_TextColor),
669685
var(--sapButton_Hover_TextColor)
670686
);
687+
688+
box-shadow: var(--fdIcon_Tab_Bar_Overflow_Button_Hover_Box_Shadow);
671689
}
672690

673691
@include fd-active() {
@@ -844,6 +862,7 @@ $fd-icon-tab-bar-semantic-values: (
844862
}
845863

846864
height: $fd-icon-tab-bar-icon-separator-size;
865+
padding: 0 0.5rem;
847866

848867
[class*='sap-icon'] {
849868
width: $fd-icon-tab-bar-icon-separator-size;
@@ -1071,8 +1090,6 @@ $fd-icon-tab-bar-semantic-values: (
10711090
}
10721091

10731092
.#{$block}__label {
1074-
color: map_get($set-params, 'color');
1075-
10761093
&::before {
10771094
@extend %semantic-icon-base;
10781095

@@ -1202,6 +1219,12 @@ $fd-icon-tab-bar-semantic-values: (
12021219

12031220
.#{$block}__item {
12041221
color: var(--sapShell_Navigation_TextColor);
1222+
1223+
&--overflow {
1224+
.#{$block}__overflow {
1225+
border-color: transparent;
1226+
}
1227+
}
12051228
}
12061229

12071230
.#{$block}__tab {
@@ -1227,6 +1250,8 @@ $fd-icon-tab-bar-semantic-values: (
12271250

12281251
@include fd-focus() {
12291252
.#{$block}__tab-container {
1253+
position: relative;
1254+
12301255
@include fd-tabs-focus(var(--sapShell_Navigation_TextColor), true);
12311256

12321257
.#{$block}__tag {
@@ -1379,3 +1404,31 @@ $fd-icon-tab-bar-semantic-values: (
13791404
}
13801405
}
13811406
}
1407+
1408+
.#{$block},
1409+
.#{$block}--filter,
1410+
.#{$block}--icon,
1411+
.#{$block}--icon-only,
1412+
.#{$block}--navigation,
1413+
.#{$block}--navigation-flat,
1414+
.#{$block}--process {
1415+
.#{$block}__item {
1416+
&--overflow {
1417+
margin: 0;
1418+
1419+
&:last-of-type {
1420+
@include fd-set-margin-left(auto);
1421+
}
1422+
1423+
.#{$block}__popover {
1424+
position: relative;
1425+
1426+
&-body {
1427+
@include fd-set-margin-right(-0.25rem);
1428+
1429+
margin-top: 0.375rem;
1430+
}
1431+
}
1432+
}
1433+
}
1434+
}

‎src/styles/mixins/_mixins.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -620,6 +620,13 @@
620620
}
621621
}
622622

623+
@mixin fd-set-equal-positions($value) {
624+
top: $value;
625+
right: $value;
626+
bottom: $value;
627+
left: $value;
628+
}
629+
623630
/* Fully expanded pseudo element. Requires parent to have specified position */
624631
@mixin fd-pseudo-expand($position: "before") {
625632
&::#{$position} {

‎src/styles/theming/common/icon-tab-bar/_sap_fiori.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
:root {
2+
--fdIcon_Tab_Bar_Selection_Bar_Height: 0.188rem;
3+
--fdIcon_Tab_Bar_Selection_Color: var(--sapSelectedColor);
4+
--fdIcon_Tab_Bar_Selection_Bar_Color: var(--sapSelectedColor);
5+
--fdIcon_Tab_Bar_Icon_Border_Color: var(--sapSelectedColor);
6+
--fdIcon_Tab_Bar_Semantic_Icon_Display: none;
7+
--fdIcon_Tab_Bar_Semantic_Color_Positive: var(--sapPositiveElementColor);
8+
--fdIcon_Tab_Bar_Semantic_Color_Negative: var(--sapNegativeElementColor);
9+
--fdIcon_Tab_Bar_Semantic_Color_Critical: var(--sapCriticalElementColor);
10+
--fdIcon_Tab_Bar_Semantic_Color_Informative: var(--sapInformativeElementColor);
11+
--fdIcon_Tab_Bar_Semantic_Background_Color_Positive: var(--sapPositiveElementColor);
12+
--fdIcon_Tab_Bar_Semantic_Background_Color_Negative: var(--sapNegativeElementColor);
13+
--fdIcon_Tab_Bar_Semantic_Background_Color_Critical: var(--sapCriticalElementColor);
14+
--fdIcon_Tab_Bar_Semantic_Background_Color_Informative: var(--sapInformativeElementColor);
15+
--fdIcon_Tab_Bar_Badge_Color: var(--sapContent_BadgeBackground);
16+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Positive: var(--sapPositiveElementColor);
17+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Negative: var(--sapNegativeElementColor);
18+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Critical: var(--sapCriticalElementColor);
19+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Informative: var(--sapInformativeElementColor);
20+
--fdIcon_Tab_Bar_Overflow_Button_Hover_Box_Shadow: none;
21+
--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset: 0.125rem;
22+
--fdIcon_Tab_Bar_Overflow_Button_Border_Radius: 0.75rem;
23+
--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color: var(--sapContent_IconColor);
24+
--fdIcon_Tab_Bar_Label_Color: var(--sapContent_LabelColor);
25+
--fdIcon_Tab_Bar_Label_Hover_Color: var(--sapContent_LabelColor);
26+
--fdIcon_Tab_Bar_Label_Font_Weight: 400;
27+
--fdIcon_Tab_Bar_Label_Font_Size: var(--sapFontSmallSize);
28+
--fdIcon_Tab_Bar_Text_Focus_Radius: 0;
29+
--fdIcon_Tab_Bar_Icon_Focus_Radius: 50%;
30+
--fdIcon_Tab_Bar_Focus_Offset: -0.0625rem;
31+
--fdIcon_Tab_Bar_Icon_Border_Weight: 0.0625rem;
32+
--fdIcon_Tab_Bar_Icon_Focus_Offset: -0.125rem;
33+
}

‎src/styles/theming/common/icon-tab-bar/_sap_fiori_hc.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
:root {
2+
--fdIcon_Tab_Bar_Selection_Bar_Height: 0.313rem;
3+
--fdIcon_Tab_Bar_Selection_Color: var(--sapGroup_TitleTextColor);
4+
--fdIcon_Tab_Bar_Selection_Bar_Color: var(--sapList_SelectionBorderColor);
5+
--fdIcon_Tab_Bar_Icon_Border_Color: var(--sapList_SelectionBorderColor);
6+
--fdIcon_Tab_Bar_Semantic_Icon_Display: inline;
7+
--fdIcon_Tab_Bar_Semantic_Color_Positive: var(--sapContent_LabelColor);
8+
--fdIcon_Tab_Bar_Semantic_Color_Negative: var(--sapContent_LabelColor);
9+
--fdIcon_Tab_Bar_Semantic_Color_Critical: var(--sapContent_LabelColor);
10+
--fdIcon_Tab_Bar_Semantic_Color_Informative: var(--sapContent_LabelColor);
11+
--fdIcon_Tab_Bar_Semantic_Background_Color_Positive: var(--sapSelectedColor);
12+
--fdIcon_Tab_Bar_Semantic_Background_Color_Negative: var(--sapSelectedColor);
13+
--fdIcon_Tab_Bar_Semantic_Background_Color_Critical: var(--sapSelectedColor);
14+
--fdIcon_Tab_Bar_Semantic_Background_Color_Informative: var(--sapSelectedColor);
15+
--fdIcon_Tab_Bar_Badge_Color: var(--sapContent_IconColor);
16+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Positive: var(--sapContent_IconColor);
17+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Negative: var(--sapContent_IconColor);
18+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Critical: var(--sapContent_IconColor);
19+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Informative: var(--sapContent_IconColor);
20+
}

‎src/styles/theming/common/icon-tab-bar/_sap_horizon.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
:root {
2+
--fdIcon_Tab_Bar_Selection_Bar_Height: 0.188rem;
3+
--fdIcon_Tab_Bar_Selection_Color: var(--sapContent_Selected_ForegroundColor);
4+
--fdIcon_Tab_Bar_Selection_Bar_Color: var(--sapContent_Selected_ForegroundColor);
5+
--fdIcon_Tab_Bar_Icon_Border_Color: var(--sapContent_Selected_ForegroundColor);
6+
--fdIcon_Tab_Bar_Semantic_Icon_Display: none;
7+
--fdIcon_Tab_Bar_Semantic_Color_Positive: var(--sapPositiveElementColor);
8+
--fdIcon_Tab_Bar_Semantic_Color_Negative: var(--sapNegativeElementColor);
9+
--fdIcon_Tab_Bar_Semantic_Color_Critical: var(--sapCriticalElementColor);
10+
--fdIcon_Tab_Bar_Semantic_Color_Informative: var(--sapInformativeElementColor);
11+
--fdIcon_Tab_Bar_Semantic_Background_Color_Positive: var(--sapPositiveElementColor);
12+
--fdIcon_Tab_Bar_Semantic_Background_Color_Negative: var(--sapNegativeElementColor);
13+
--fdIcon_Tab_Bar_Semantic_Background_Color_Critical: var(--sapCriticalElementColor);
14+
--fdIcon_Tab_Bar_Semantic_Background_Color_Informative: var(--sapInformativeElementColor);
15+
--fdIcon_Tab_Bar_Badge_Color: var(--sapContent_BadgeBackground);
16+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Positive: var(--sapPositiveElementColor);
17+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Negative: var(--sapNegativeElementColor);
18+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Critical: var(--sapCriticalElementColor);
19+
--fdIcon_Tab_Bar_Semantic_Badge_Color_Informative: var(--sapInformativeElementColor);
20+
--fdIcon_Tab_Bar_Overflow_Button_Hover_Box_Shadow: var(--sapContent_Interaction_Shadow);
21+
--fdIcon_Tab_Bar_Overflow_Button_Focus_Offset: -0.25rem;
22+
--fdIcon_Tab_Bar_Overflow_Button_Border_Radius: 1rem;
23+
--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color: var(--sapContent_Selected_ForegroundColor);
24+
--fdIcon_Tab_Bar_Label_Color: var(--sapTextColor);
25+
--fdIcon_Tab_Bar_Label_Hover_Color: var(--sapContent_Selected_ForegroundColor);
26+
--fdIcon_Tab_Bar_Label_Font_Weight: 800;
27+
--fdIcon_Tab_Bar_Label_Font_Size: var(--sapFontSmallSize);
28+
--fdIcon_Tab_Bar_Text_Focus_Radius: 0.375rem;
29+
--fdIcon_Tab_Bar_Icon_Focus_Radius: 50%;
30+
--fdIcon_Tab_Bar_Focus_Offset: -0.25rem;
31+
--fdIcon_Tab_Bar_Icon_Border_Weight: 0.125rem;
32+
--fdIcon_Tab_Bar_Icon_Focus_Offset: -0.3125rem;
33+
}

0 commit comments

Comments
 (0)