Skip to content

Commit 9bc8ad8

Browse files
dakahnkodiakhq[bot]
andauthoredFeb 16, 2022
fix(Popover): adjust popover content placement (#10539)
* fix(Popover): adjust popover content placement * fix(popover): revert changes * fix(Popover): add right and left popover caret offset stlyling * fix(popover): update offset styling * fix(popover): adjust left/right top and bottom calc Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 8a8a8f8 commit 9bc8ad8

File tree

1 file changed

+27
-12
lines changed

1 file changed

+27
-12
lines changed
 

‎packages/styles/scss/components/popover/_popover.scss

+27-12
Original file line numberDiff line numberDiff line change
@@ -185,13 +185,16 @@ $popover-caret-height: custom-property.get-var(
185185
.#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
186186
bottom: 0;
187187
left: 0;
188-
transform: translate(0, calc(100% + $popover-offset));
188+
transform: translate(
189+
calc(-1 * $popover-offset),
190+
calc(100% + $popover-offset)
191+
);
189192
}
190193

191194
.#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
192195
right: 0;
193196
bottom: 0;
194-
transform: translate(0, calc(100% + $popover-offset));
197+
transform: translate($popover-offset, calc(100% + $popover-offset));
195198
}
196199

197200
// Popover hover area placement
@@ -231,13 +234,16 @@ $popover-caret-height: custom-property.get-var(
231234
.#{$prefix}--popover--top-left .#{$prefix}--popover-content {
232235
top: 0;
233236
left: 0;
234-
transform: translate(0, calc(-100% - $popover-offset));
237+
transform: translate(
238+
calc(-1 * $popover-offset),
239+
calc(-100% - $popover-offset)
240+
);
235241
}
236242

237243
.#{$prefix}--popover--top-right .#{$prefix}--popover-content {
238244
top: 0;
239245
right: 0;
240-
transform: translate(0, calc(-100% - $popover-offset));
246+
transform: translate($popover-offset, calc(-100% - $popover-offset));
241247
}
242248

243249
// Popover hover area placement
@@ -277,15 +283,18 @@ $popover-caret-height: custom-property.get-var(
277283
}
278284

279285
.#{$prefix}--popover--right-top .#{$prefix}--popover-content {
280-
top: 0;
286+
top: 50%;
281287
left: 100%;
282-
transform: translate($popover-offset, 0);
288+
transform: translate(
289+
$popover-offset,
290+
calc(0.5 * $popover-offset * -1 - 16px)
291+
);
283292
}
284293

285294
.#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
286-
bottom: 0;
295+
bottom: 50%;
287296
left: 100%;
288-
transform: translate($popover-offset, 0);
297+
transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
289298
}
290299

291300
// Popover hover area placement
@@ -325,19 +334,25 @@ $popover-caret-height: custom-property.get-var(
325334
}
326335

327336
.#{$prefix}--popover--left-top .#{$prefix}--popover-content {
328-
top: 0;
337+
top: -50%;
329338
right: 100%;
330339
// Add in 0.1px to prevent rounding errors where the content is
331340
// moved farther than the caret
332-
transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
341+
transform: translate(
342+
calc(-1 * $popover-offset),
343+
calc(-1 * 0.5 * $popover-offset + 16px)
344+
);
333345
}
334346

335347
.#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
336348
right: 100%;
337-
bottom: 0;
349+
bottom: -50%;
338350
// Add in 0.1px to prevent rounding errors where the content is
339351
// moved farther than the caret
340-
transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
352+
transform: translate(
353+
calc(-1 * $popover-offset),
354+
calc(0.5 * $popover-offset - 16px)
355+
);
341356
}
342357

343358
// Popover hover area placement

0 commit comments

Comments
 (0)
Please sign in to comment.