Skip to content

Commit c55f2fb

Browse files
Kirato77Kirato77
authored
fix(select): pop-up z-index to max (#75)
1 parent b8029ec commit c55f2fb

File tree

2 files changed

+104
-102
lines changed

2 files changed

+104
-102
lines changed

‎src/components/select/index.scss‎

Lines changed: 89 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,118 @@
11
.jdd.select {
2-
justify-content: space-between;
3-
transition: var(--jdd-transition-colors), height var(--jdd-transition-duration) var(--jdd-transition-function), width var(--jdd-transition-duration) var(--jdd-transition-function);
4-
5-
> .value {
6-
white-space: nowrap;
7-
text-overflow: ellipsis;
8-
overflow: hidden;
9-
}
10-
11-
> svg {
12-
display: inline-block;
13-
transform: rotate(-90deg);
14-
margin: 0 -.25rem 0 .25rem;
15-
}
16-
17-
&.tags {
2+
justify-content: space-between;
3+
transition: var(--jdd-transition-colors), height var(--jdd-transition-duration) var(--jdd-transition-function), width var(--jdd-transition-duration) var(--jdd-transition-function);
4+
185
> .value {
19-
display: flex;
20-
gap: .25rem;
21-
width: 100%;
22-
flex-wrap: wrap;
23-
text-overflow: initial;
24-
overflow: visible;
25-
position: relative;
26-
z-index: calc(2 + var(--jdd-overlay-zindex-increment));
6+
white-space: nowrap;
7+
text-overflow: ellipsis;
8+
overflow: hidden;
279
}
2810

29-
.jdd.tag {
30-
background: var(--jdd-gray-3);
31-
animation-duration: 0s;
11+
> svg {
12+
display: inline-block;
13+
transform: rotate(-90deg);
14+
margin: 0 -.25rem 0 .25rem;
15+
}
3216

33-
.jdd-dark & {
34-
background: var(--jdd-gray-11);
35-
}
17+
&.tags {
18+
> .value {
19+
display: flex;
20+
gap: .25rem;
21+
width: 100%;
22+
flex-wrap: wrap;
23+
text-overflow: initial;
24+
overflow: visible;
25+
position: relative;
26+
z-index: calc(2 + var(--jdd-overlay-zindex-increment));
27+
}
28+
29+
.jdd.tag {
30+
background: var(--jdd-gray-3);
31+
animation-duration: 0s;
32+
33+
.jdd-dark & {
34+
background: var(--jdd-gray-11);
35+
}
36+
}
3637
}
37-
}
3838

39-
&[data-invalid] {
40-
color: var(--jdd-red-6);
39+
&[data-invalid] {
40+
color: var(--jdd-red-6);
4141

42-
&:not(:focus-visible) {
43-
outline: solid var(--jdd-red-6) calc(var(--jdd-accessibility-outline-width) / 2);
42+
&:not(:focus-visible) {
43+
outline: solid var(--jdd-red-6) calc(var(--jdd-accessibility-outline-width) / 2);
44+
}
4445
}
45-
}
4646
}
4747

4848
.jdd.select-wrapper .select-label {
49-
margin-top: .2rem;
49+
margin-top: .2rem;
5050
}
5151

5252
.jdd.select-content {
53-
position: relative;
54-
z-index: calc(101 + var(--jdd-overlay-zindex-increment));
55-
animation-name: jdd-select-exit;
56-
animation-timing-function: var(--jdd-transition-function);
57-
animation-duration: var(--jdd-transition-duration);
58-
animation-fill-mode: forwards;
59-
transform-origin: var(--kb-select-menu-content-transform-origin);
60-
61-
&[data-expanded] {
62-
animation-name: jdd-select-enter;
63-
}
64-
65-
.content {
66-
padding: .25rem;
67-
68-
.select-list {
69-
outline: none !important;
53+
position: relative;
54+
z-index: var(--jdd-z-index-max);
55+
animation-name: jdd-select-exit;
56+
animation-timing-function: var(--jdd-transition-function);
57+
animation-duration: var(--jdd-transition-duration);
58+
animation-fill-mode: forwards;
59+
transform-origin: var(--kb-select-menu-content-transform-origin);
60+
61+
&[data-expanded] {
62+
animation-name: jdd-select-enter;
7063
}
71-
}
72-
73-
.item {
74-
padding: .25rem .75rem;
75-
border-radius: var(--jdd-border-radius);
76-
cursor: var(--jdd-button-cursor);
77-
display: flex;
78-
justify-content: space-between;
79-
align-items: center;
80-
user-select: none;
8164

82-
> .indicator {
83-
line-height: 1;
84-
margin-left: .5rem;
65+
.content {
66+
padding: .25rem;
8567

86-
> .icon {
87-
vertical-align: middle;
88-
}
68+
.select-list {
69+
outline: none !important;
70+
}
8971
}
9072

91-
&[data-highlighted] {
92-
outline: none;
93-
background: var(--jdd-blue-6);
94-
95-
> .label, > .indicator {
96-
color: var(--jdd-gray-1);
97-
}
73+
.item {
74+
padding: .25rem .75rem;
75+
border-radius: var(--jdd-border-radius);
76+
cursor: var(--jdd-button-cursor);
77+
display: flex;
78+
justify-content: space-between;
79+
align-items: center;
80+
user-select: none;
81+
82+
> .indicator {
83+
line-height: 1;
84+
margin-left: .5rem;
85+
86+
> .icon {
87+
vertical-align: middle;
88+
}
89+
}
90+
91+
&[data-highlighted] {
92+
outline: none;
93+
background: var(--jdd-blue-6);
94+
95+
> .label, > .indicator {
96+
color: var(--jdd-gray-1);
97+
}
98+
}
9899
}
99-
}
100100
}
101101

102102
@keyframes jdd-select-enter {
103-
from {
104-
opacity: 0;
105-
transform: scale(.96) translateY(-8px);
106-
}
103+
from {
104+
opacity: 0;
105+
transform: scale(.96) translateY(-8px);
106+
}
107107
to {
108-
opacity: 1;
109-
transform: scale(1);
110-
}
108+
opacity: 1;
109+
transform: scale(1);
110+
}
111111
}
112112

113113
@keyframes jdd-select-exit {
114-
to {
115-
opacity: 0;
116-
transform: scale(.96) translateY(-8px);
117-
}
114+
to {
115+
opacity: 0;
116+
transform: scale(.96) translateY(-8px);
117+
}
118118
}

‎src/components/style/variables.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
:root {
2-
--jdd-font-sans: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
3-
--jdd-font-mono: "JetBrains Mono", SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
2+
--jdd-font-sans: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
3+
--jdd-font-mono: "JetBrains Mono", SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
44

5-
--jdd-border-radius: .5rem;
6-
--jdd-border-radius-small: .3rem;
7-
--jdd-border-radius-large: .8rem;
5+
--jdd-border-radius: .5rem;
6+
--jdd-border-radius-small: .3rem;
7+
--jdd-border-radius-large: .8rem;
88

9-
--jdd-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
10-
--jdd-shadow-small: 0 .125rem .25rem rgba(0, 0, 0, .075);
11-
--jdd-shadow-large: 0 .5rem 1rem rgba(0, 0, 0, .175);
9+
--jdd-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
10+
--jdd-shadow-small: 0 .125rem .25rem rgba(0, 0, 0, .075);
11+
--jdd-shadow-large: 0 .5rem 1rem rgba(0, 0, 0, .175);
1212

13-
--jdd-transition-duration: .3s;
14-
--jdd-transition-function: cubic-bezier(.645,.045,.355,1);
15-
--jdd-transition-colors: color var(--jdd-transition-duration) var(--jdd-transition-function), background-color var(--jdd-transition-duration) var(--jdd-transition-function), border-color var(--jdd-transition-duration) var(--jdd-transition-function), text-decoration-color var(--jdd-transition-duration) var(--jdd-transition-function), fill var(--jdd-transition-duration) var(--jdd-transition-function), stroke var(--jdd-transition-duration) var(--jdd-transition-function);
13+
--jdd-transition-duration: .3s;
14+
--jdd-transition-function: cubic-bezier(.645, .045, .355, 1);
15+
--jdd-transition-colors: color var(--jdd-transition-duration) var(--jdd-transition-function), background-color var(--jdd-transition-duration) var(--jdd-transition-function), border-color var(--jdd-transition-duration) var(--jdd-transition-function), text-decoration-color var(--jdd-transition-duration) var(--jdd-transition-function), fill var(--jdd-transition-duration) var(--jdd-transition-function), stroke var(--jdd-transition-duration) var(--jdd-transition-function);
1616

17-
--jdd-accessibility-outline-width: 4px;
17+
--jdd-accessibility-outline-width: 4px;
1818

19-
--jdd-button-cursor: default;
19+
--jdd-button-cursor: default;
20+
21+
--jdd-z-index-max: 2147483647;
2022
}

0 commit comments

Comments
 (0)