Skip to content

Commit 004955e

Browse files
adrianptrvadrianptrv
authored
fix(tabs): fix non-working Sass theme parameters (#1929)
1 parent 8abfc0f commit 004955e

File tree

9 files changed

+75
-26
lines changed

9 files changed

+75
-26
lines changed

‎src/components/tabs/themes/shared/tab/tab.bootstrap.scss‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,25 @@ $theme: $bootstrap;
3131
}
3232

3333
[part='tab-header'] {
34+
border: none;
35+
3436
&:hover {
37+
border: none;
38+
background: var-get($theme, 'item-background');;
39+
3540
&::before {
3641
box-shadow:
3742
inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color--hover'), /* Top */
3843
inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color--hover'), /* Left */
39-
inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover'), /* Right */
44+
inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover'); /* Right */
45+
46+
background: var-get($theme, 'item-hover-background');
47+
}
48+
49+
&:hover:focus-within {
50+
&::before {
51+
box-shadow: none;
52+
}
4053
}
4154
}
4255

@@ -54,8 +67,7 @@ $theme: $bootstrap;
5467
position: absolute;
5568
width: 100%;
5669
height: 100%;
57-
box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
58-
border-radius: var-get($theme, 'border-radius');
70+
box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color');
5971
z-index: 2;
6072
}
6173
}
@@ -64,25 +76,47 @@ $theme: $bootstrap;
6476
:host([selected]) {
6577
[part='tab-header'] {
6678
position: relative;
79+
background: var-get($theme, 'item-background');
6780

6881
&::before {
6982
box-shadow:
7083
inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color'), /* Top */
7184
inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color'), /* Left */
72-
inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'), /* Right */
85+
inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'); /* Right */
86+
87+
background: var-get($theme, 'item-active-background');
88+
border-start-start-radius: var-get($theme, 'border-radius');
89+
border-start-end-radius: var-get($theme, 'border-radius');
7390
}
7491

7592
&:hover {
7693
border-top-color: var-get($theme, 'border-color');
7794
border-inline-color: var-get($theme, 'border-color');
7895
border-bottom-color: var-get($theme, 'item-background');
96+
background: var-get($theme, 'item-background');
97+
98+
&::before {
99+
background: var-get($theme, 'item-active-hover-background');
100+
}
79101
}
80102

81103
&:focus,
82-
&:focus-within
83-
{
84-
background: var-get($theme, 'item-hover-background');
85-
z-index: 1;
104+
&:focus-within {
105+
border: none;
106+
background: var-get($theme, 'item-background');
107+
108+
&::after{
109+
border-radius: var-get($theme, 'border-radius') var-get($theme, 'border-radius') rem(4px) rem(4px);
110+
}
111+
}
112+
113+
&:focus-within {
114+
&::before {
115+
box-shadow: none;
116+
border-bottom-left-radius: rem(4px);
117+
border-bottom-right-radius: rem(4px);
118+
background: var-get($theme, 'item-active-hover-background');
119+
}
86120
}
87121
}
88122
}

‎src/components/tabs/themes/shared/tab/tab.common.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ $theme: $material;
77
color: var-get($theme, 'item-text-color');
88
background: var-get($theme, 'item-background');
99
border-radius: var-get($theme, 'border-radius');
10+
border: rem(1px) solid var-get($theme, 'border-color');
1011

1112
::slotted(igc-icon) {
1213
color: var-get($theme, 'item-icon-color');
@@ -16,6 +17,7 @@ $theme: $material;
1617
&:focus-within {
1718
color: var-get($theme, 'item-hover-color');
1819
background: var-get($theme, 'item-hover-background');
20+
border: rem(1px) solid var-get($theme, 'border-color--hover');
1921

2022
::slotted(igc-icon) {
2123
color: var-get($theme, 'item-hover-icon-color');
@@ -26,17 +28,19 @@ $theme: $material;
2628
:host([selected]) {
2729
[part='tab-header'] {
2830
color: var-get($theme, 'item-active-color');
31+
background: var-get($theme, 'item-active-background');
2932

3033
::slotted(igc-icon) {
3134
color: var-get($theme, 'item-active-icon-color');
3235
}
3336

3437
&:hover,
3538
&:focus-within {
36-
color: var-get($theme, 'item-active-color');
39+
color: var-get($theme, 'item-active-hover-color');
40+
background: var-get($theme, 'item-active-hover-background');
3741

3842
::slotted(igc-icon) {
39-
color: var-get($theme, 'item-active-icon-color');
43+
color: var-get($theme, 'item-active-hover-icon-color');
4044
}
4145
}
4246
}

‎src/components/tabs/themes/shared/tab/tab.fluent.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,4 @@ $theme: $fluent;
1616
[part='content'] {
1717
font-weight: 700;
1818
}
19-
20-
[part='tab-header'] {
21-
&:hover,
22-
&:focus-within {
23-
color: var-get($theme, 'item-hover-color');
24-
25-
::slotted(igc-icon) {
26-
color: var-get($theme, 'item-hover-icon-color');
27-
}
28-
}
29-
}
3019
}

‎src/components/tabs/themes/shared/tab/tab.indigo.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,19 @@ $theme: $indigo;
1313

1414
[part='tab-header'] {
1515
padding: pad-block(rem(12px)) pad-inline(rem(16px));
16+
border-top: rem(1px) solid transparent;
17+
border-inline: none;
18+
19+
&:hover,
20+
&:focus-within {
21+
border-top: rem(1px) solid transparent;
22+
border-inline: none;
23+
border-bottom: rem(1px) solid var-get($theme, 'border-color--hover');
24+
}
1625
}
1726

1827
[part='content'] {
1928
@include type-style('subtitle-2');
2029

2130
text-transform: uppercase;
22-
}
31+
}

‎src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ $theme: $bootstrap;
77
--header-min-height: #{rem(48px)};
88
}
99

10+
[part~='inner'] {
11+
flex-grow: 1;
12+
}
13+
1014
:host([alignment='start']) {
1115
[part~='inner']:not([part~='scrollable']) {
1216
&::after {

‎src/components/tabs/themes/shared/tabs/tabs.common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $theme: $material;
1515
--active-background: #{var-get($theme, 'button-hover-background')};
1616
--border-color: #{var-get($theme, 'button-background')};
1717
--disabled-foreground: #{var-get($theme, 'button-disabled-color')};
18-
--disabled-background: #{var-get($theme, 'item-background')};
18+
--disabled-background: #{var-get($theme, 'button-background')};
1919

2020
[part~='base'] {
2121
transition: all 0ms;

‎src/components/tabs/themes/shared/tabs/tabs.indigo.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ $theme: $indigo;
88
:host {
99
--header-min-height: #{rem(40px)};
1010
--scroll-btn-size: #{rem(40px)};
11+
--nav-btn-border-color: #{var-get($theme, 'border-color')};
1112
}
1213

1314
[part='selected-indicator'] {
@@ -27,7 +28,6 @@ $theme: $indigo;
2728
position: absolute;
2829
width: 100%;
2930
height: $indicator-height;
30-
background-color: var-get($theme, 'border-color');
3131
inset-block-end: 100%;
3232
}
3333
}
@@ -45,11 +45,12 @@ $theme: $indigo;
4545
}
4646

4747
igc-icon-button:hover::part(base) {
48+
background-color: var-get($theme, 'button-hover-background');
49+
4850
&::after {
4951
content: '';
5052
position: absolute;
5153
inset: 0;
52-
background-color: var-get($theme, 'button-hover-background');
5354
z-index: 1;
5455
}
5556
}
@@ -58,6 +59,11 @@ igc-icon-button::part(base) {
5859
overflow: hidden;
5960
}
6061

62+
igc-icon-button[disabled]::part(base),
63+
igc-icon-button:disabled::part(base) {
64+
border-bottom: rem(1px) solid var(--nav-btn-border-color);
65+
}
66+
6167
igc-icon-button::part(icon) {
6268
--size: #{rem(16px)};
6369

‎src/components/tabs/themes/shared/tabs/tabs.material.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,7 @@ $theme: $material;
1818
background: var-get($theme, 'indicator-color');
1919
}
2020
}
21+
22+
igc-icon-button:hover::part(icon) {
23+
color: var(--hover-foreground);
24+
}

‎src/components/tabs/themes/tabs.base.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
grid-template-rows: minmax(var(--header-min-height), auto) auto 1fr;
4444
align-items: center;
4545
position: relative;
46-
flex-grow: 1;
4746

4847
::slotted(igc-tab) {
4948
display: contents;

0 commit comments

Comments
 (0)