Skip to content

Commit 701e83b

Browse files
abottegaabottega
authored
Few small popover fixes (#327)
* Fixed a few more popover issues * 3.2.32
1 parent 2aad37b commit 701e83b

File tree

5 files changed

+30
-28
lines changed

5 files changed

+30
-28
lines changed

‎lib/components/Popover/index.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const StyledPopover = styled.div`
9292
border-width: 6px 6px 6px 0;
9393
border-color: transparent;
9494
border-right-color: ${themeGet("colors.white")};
95-
left: -5px;
95+
left: -6px;
9696
top: 50%;
9797
margin-top: -6px;
9898
position: absolute;
@@ -103,12 +103,12 @@ const StyledPopover = styled.div`
103103
z-index: 1;
104104
position: absolute;
105105
border-color: transparent;
106-
border-right-color: ${themeGet("colors.grey")};
106+
border-right-color: ${themeGet("colors.greyMid")};
107107
height: 0;
108108
width: 0;
109109
border-style: solid;
110110
border-width: 6px 6px 6px 0;
111-
left: -6px;
111+
left: -7px;
112112
top: 50%;
113113
margin-top: -6px;
114114
}
@@ -118,15 +118,15 @@ const StyledPopover = styled.div`
118118
left: 50%;
119119
top: auto;
120120
margin-top: 0;
121-
bottom: -8px;
121+
bottom: -9px;
122122
margin-left: -3px;
123123
transform: rotate(-90deg);
124124
}
125125
&:after {
126126
left: 50%;
127127
top: auto;
128128
margin-top: 0;
129-
bottom: -9px;
129+
bottom: -10px;
130130
margin-left: -3px;
131131
transform: rotate(-90deg);
132132
}
@@ -138,17 +138,17 @@ const StyledPopover = styled.div`
138138
left: 1px;
139139
top: auto;
140140
margin-top: 0;
141-
bottom: -4px;
142-
margin-left: -5px;
141+
bottom: -5px;
142+
margin-left: -6px;
143143
transform: rotate(-45deg);
144144
border-width: 5px 10px 5px 0;
145145
}
146146
&:after {
147147
left: 1px;
148148
top: auto;
149149
margin-top: 0;
150-
bottom: -5px;
151-
margin-left: -6px;
150+
bottom: -6px;
151+
margin-left: -7px;
152152
transform: rotate(-45deg);
153153
border-width: 5px 10px 5px 0;
154154
}
@@ -160,17 +160,17 @@ const StyledPopover = styled.div`
160160
left: 1px;
161161
bottom: auto;
162162
margin-top: 0;
163-
top: -4px;
164-
margin-left: -5px;
163+
top: -5px;
164+
margin-left: -6px;
165165
transform: rotate(45deg);
166166
border-width: 5px 10px 5px 0;
167167
}
168168
&:after {
169169
left: 1px;
170170
bottom: auto;
171171
margin-top: 0;
172-
top: -5px;
173-
margin-left: -6px;
172+
top: -6px;
173+
margin-left: -7px;
174174
transform: rotate(45deg);
175175
border-width: 5px 10px 5px 0;
176176
}
@@ -179,14 +179,14 @@ const StyledPopover = styled.div`
179179
&.bottom {
180180
&:before {
181181
left: 50%;
182-
top: -8px;
182+
top: -9px;
183183
margin-top: 0;
184184
margin-left: -3px;
185185
transform: rotate(90deg);
186186
}
187187
&:after {
188188
left: 50%;
189-
top: -9px;
189+
top: -10px;
190190
margin-top: 0;
191191
margin-left: -3px;
192192
transform: rotate(90deg);
@@ -200,8 +200,8 @@ const StyledPopover = styled.div`
200200
left: auto;
201201
bottom: auto;
202202
margin-top: 0;
203-
top: -4px;
204-
margin-right: -5px;
203+
top: -5px;
204+
margin-right: -6px;
205205
transform: rotate(135deg);
206206
border-width: 5px 10px 5px 0;
207207
}
@@ -210,8 +210,8 @@ const StyledPopover = styled.div`
210210
left: auto;
211211
bottom: auto;
212212
margin-top: 0;
213-
top: -5px;
214-
margin-right: -6px;
213+
top: -6px;
214+
margin-right: -7px;
215215
transform: rotate(135deg);
216216
border-width: 5px 10px 5px 0;
217217
}
@@ -220,12 +220,12 @@ const StyledPopover = styled.div`
220220
&.left {
221221
&:before {
222222
left: auto;
223-
right: -5px;
223+
right: -6px;
224224
transform: rotate(180deg);
225225
}
226226
&:after {
227227
left: auto;
228-
right: -6px;
228+
right: -7px;
229229
transform: rotate(180deg);
230230
top: 50%;
231231
margin-top: -6px;
@@ -239,8 +239,8 @@ const StyledPopover = styled.div`
239239
left: auto;
240240
top: auto;
241241
margin-top: 0;
242-
bottom: -4px;
243-
margin-right: -5px;
242+
bottom: -5px;
243+
margin-right: -6px;
244244
transform: rotate(225deg);
245245
border-width: 5px 10px 5px 0;
246246
}
@@ -249,8 +249,8 @@ const StyledPopover = styled.div`
249249
left: auto;
250250
top: auto;
251251
margin-top: 0;
252-
bottom: -5px;
253-
margin-right: -6px;
252+
bottom: -6px;
253+
margin-right: -7px;
254254
transform: rotate(225deg);
255255
border-width: 5px 10px 5px 0;
256256
}

‎lib/systemThemeCollapsed.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export const colors = {
111111
white20: rgba(white, 0.2),
112112
white10: rgba(white, 0.1),
113113
grey,
114+
greyMid: lighten(0.15, grey),
114115
greyLight: lighten(0.2, grey),
115116
greyLighter: lighten(0.3, grey),
116117
greyLightest: lighten(0.35, grey),

‎lib/systemtheme.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export const colors = {
110110
white20: rgba(white, 0.2),
111111
white10: rgba(white, 0.1),
112112
grey,
113+
greyMid: lighten(0.15, grey),
113114
greyLight: lighten(0.2, grey),
114115
greyLighter: lighten(0.3, grey),
115116
greyLightest: lighten(0.35, grey),

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "orcs-design-system",
3-
"version": "3.2.31",
3+
"version": "3.2.32",
44
"engines": {
55
"node": "20.12.2"
66
},

0 commit comments

Comments
 (0)