Skip to content

Commit e6a1ca5

Browse files
paulpopuspaulpopus
authored
fix(ui): add missing styles under the payload-default css layer (#8723)
1 parent 6d0676a commit e6a1ca5

File tree

26 files changed

+1062
-1010
lines changed

26 files changed

+1062
-1010
lines changed

‎packages/next/src/elements/DocumentHeader/Tabs/Tab/index.scss

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,95 @@
11
@import '../../../../scss/styles.scss';
22

3-
.doc-tab {
4-
@extend %h5;
5-
position: relative;
3+
@layer payload-default {
4+
.doc-tab {
5+
@extend %h5;
6+
position: relative;
67

7-
&__link {
8-
text-decoration: none;
9-
display: flex;
10-
justify-content: center;
11-
align-items: center;
12-
white-space: nowrap;
8+
&__link {
9+
text-decoration: none;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
white-space: nowrap;
1314

14-
// Use a pseudo element for the accessability so that it doesn't take up DOM space
15-
// Also because the parent element has `overflow: hidden` which would clip an outline
16-
&:focus-visible::after {
17-
content: '';
18-
border: var(--accessibility-outline);
19-
position: absolute;
20-
top: 0;
21-
right: 0;
22-
bottom: 0;
23-
left: 0;
24-
pointer-events: none;
15+
// Use a pseudo element for the accessability so that it doesn't take up DOM space
16+
// Also because the parent element has `overflow: hidden` which would clip an outline
17+
&:focus-visible::after {
18+
content: '';
19+
border: var(--accessibility-outline);
20+
position: absolute;
21+
top: 0;
22+
right: 0;
23+
bottom: 0;
24+
left: 0;
25+
pointer-events: none;
26+
}
2527
}
26-
}
27-
28-
&:focus:not(:focus-visible) {
29-
opacity: 1;
30-
}
31-
32-
&::before {
33-
content: '';
34-
display: block;
35-
position: absolute;
36-
width: 100%;
37-
height: 100%;
38-
border-radius: var(--style-radius-s);
39-
background-color: var(--theme-elevation-50);
40-
opacity: 0;
41-
}
4228

43-
&:hover {
44-
&::before {
29+
&:focus:not(:focus-visible) {
4530
opacity: 1;
4631
}
4732

48-
.doc-tab__count {
49-
background-color: var(--theme-elevation-150);
50-
}
51-
}
52-
53-
&--active {
54-
font-weight: 600;
5533
&::before {
56-
opacity: 1;
57-
background-color: var(--theme-elevation-100);
34+
content: '';
35+
display: block;
36+
position: absolute;
37+
width: 100%;
38+
height: 100%;
39+
border-radius: var(--style-radius-s);
40+
background-color: var(--theme-elevation-50);
41+
opacity: 0;
5842
}
5943

60-
.doc-tab {
61-
&__count {
62-
background-color: var(--theme-elevation-250);
44+
&:hover {
45+
&::before {
46+
opacity: 1;
47+
}
48+
49+
.doc-tab__count {
50+
background-color: var(--theme-elevation-150);
6351
}
6452
}
6553

66-
&:hover {
54+
&--active {
55+
font-weight: 600;
56+
&::before {
57+
opacity: 1;
58+
background-color: var(--theme-elevation-100);
59+
}
60+
6761
.doc-tab {
6862
&__count {
6963
background-color: var(--theme-elevation-250);
7064
}
7165
}
66+
67+
&:hover {
68+
.doc-tab {
69+
&__count {
70+
background-color: var(--theme-elevation-250);
71+
}
72+
}
73+
}
7274
}
73-
}
7475

75-
&__label {
76-
display: flex;
77-
position: relative;
78-
align-items: center;
79-
gap: 4px;
80-
width: 100%;
81-
height: 100%;
82-
line-height: base(1.2);
83-
padding: base(0.2) base(0.6);
84-
}
76+
&__label {
77+
display: flex;
78+
position: relative;
79+
align-items: center;
80+
gap: 4px;
81+
width: 100%;
82+
height: 100%;
83+
line-height: base(1.2);
84+
padding: base(0.2) base(0.6);
85+
}
8586

86-
&__count {
87-
line-height: base(0.8);
88-
min-width: base(0.8);
89-
text-align: center;
90-
background-color: var(--theme-elevation-100);
91-
border-radius: var(--style-radius-s);
87+
&__count {
88+
line-height: base(0.8);
89+
min-width: base(0.8);
90+
text-align: center;
91+
background-color: var(--theme-elevation-100);
92+
border-radius: var(--style-radius-s);
93+
}
9294
}
9395
}

‎packages/next/src/elements/DocumentHeader/Tabs/index.scss

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,54 @@
11
@import '../../../scss/styles.scss';
22

3-
.doc-tabs {
4-
display: flex;
5-
6-
&__tabs {
3+
@layer payload-default {
4+
.doc-tabs {
75
display: flex;
8-
gap: calc(var(--base) / 2);
9-
list-style: none;
10-
align-items: center;
11-
margin: 0;
12-
padding-left: 0;
13-
}
14-
15-
@include mid-break {
16-
width: 100%;
17-
padding: 0;
18-
overflow: auto;
19-
20-
// this container has a gradient overlay as visual indication of `overflow: scroll`
21-
&::-webkit-scrollbar {
22-
display: none;
23-
}
246

25-
&::after {
26-
content: '';
27-
display: block;
28-
position: sticky;
29-
right: 0;
30-
width: calc(var(--base) * 2);
31-
height: calc(var(--base) * 2);
32-
background: linear-gradient(to right, transparent, var(--theme-bg));
33-
flex-shrink: 0;
34-
z-index: 1111;
35-
pointer-events: none;
7+
&__tabs {
8+
display: flex;
9+
gap: calc(var(--base) / 2);
10+
list-style: none;
11+
align-items: center;
12+
margin: 0;
13+
padding-left: 0;
3614
}
3715

38-
&__tabs {
16+
@include mid-break {
17+
width: 100%;
3918
padding: 0;
19+
overflow: auto;
20+
21+
// this container has a gradient overlay as visual indication of `overflow: scroll`
22+
&::-webkit-scrollbar {
23+
display: none;
24+
}
25+
26+
&::after {
27+
content: '';
28+
display: block;
29+
position: sticky;
30+
right: 0;
31+
width: calc(var(--base) * 2);
32+
height: calc(var(--base) * 2);
33+
background: linear-gradient(to right, transparent, var(--theme-bg));
34+
flex-shrink: 0;
35+
z-index: 1111;
36+
pointer-events: none;
37+
}
38+
39+
&__tabs {
40+
padding: 0;
41+
}
4042
}
41-
}
4243

43-
@include small-break {
44-
&__tabs-container {
45-
margin-right: var(--gutter-h);
46-
}
44+
@include small-break {
45+
&__tabs-container {
46+
margin-right: var(--gutter-h);
47+
}
4748

48-
&__tabs {
49-
gap: var(--gutter-h);
49+
&__tabs {
50+
gap: var(--gutter-h);
51+
}
5052
}
5153
}
5254
}

‎packages/next/src/elements/DocumentHeader/index.scss

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,54 @@
11
@import '../../scss/styles.scss';
22

3-
.doc-header {
4-
width: 100%;
5-
margin-top: base(0.4);
6-
padding-bottom: calc(var(--base) * 1.2);
7-
display: flex;
8-
align-items: center;
9-
position: relative;
10-
display: flex;
11-
gap: calc(var(--base) / 2);
12-
13-
&::after {
14-
content: '';
15-
display: block;
16-
position: absolute;
17-
height: 1px;
18-
background: var(--theme-elevation-100);
3+
@layer payload-default {
4+
.doc-header {
195
width: 100%;
20-
left: 0;
21-
top: calc(100% - 1px);
22-
}
23-
24-
&__title {
25-
flex-grow: 1;
26-
white-space: nowrap;
27-
overflow: hidden;
28-
text-overflow: ellipsis;
29-
margin: 0;
30-
padding-bottom: base(0.4);
31-
line-height: 1;
32-
vertical-align: top;
33-
}
34-
35-
@include mid-break {
36-
padding-left: 0;
37-
padding-right: 0;
38-
margin-top: base(0.25);
39-
padding-bottom: calc(var(--base) / 1.5);
40-
flex-direction: column;
6+
margin-top: base(0.4);
7+
padding-bottom: calc(var(--base) * 1.2);
8+
display: flex;
9+
align-items: center;
10+
position: relative;
11+
display: flex;
4112
gap: calc(var(--base) / 2);
42-
padding-bottom: calc(var(--base) / 2);
4313

44-
&__title {
14+
&::after {
15+
content: '';
16+
display: block;
17+
position: absolute;
18+
height: 1px;
19+
background: var(--theme-elevation-100);
4520
width: 100%;
21+
left: 0;
22+
top: calc(100% - 1px);
4623
}
47-
}
4824

49-
@include small-break {
50-
margin-top: 0;
25+
&__title {
26+
flex-grow: 1;
27+
white-space: nowrap;
28+
overflow: hidden;
29+
text-overflow: ellipsis;
30+
margin: 0;
31+
padding-bottom: base(0.4);
32+
line-height: 1;
33+
vertical-align: top;
34+
}
35+
36+
@include mid-break {
37+
padding-left: 0;
38+
padding-right: 0;
39+
margin-top: base(0.25);
40+
padding-bottom: calc(var(--base) / 1.5);
41+
flex-direction: column;
42+
gap: calc(var(--base) / 2);
43+
padding-bottom: calc(var(--base) / 2);
44+
45+
&__title {
46+
width: 100%;
47+
}
48+
}
49+
50+
@include small-break {
51+
margin-top: 0;
52+
}
5153
}
5254
}

0 commit comments

Comments
 (0)