@@ -185,13 +185,16 @@ $popover-caret-height: custom-property.get-var(
185
185
.#{$prefix } --popover--bottom-left .#{$prefix } --popover-content {
186
186
bottom : 0 ;
187
187
left : 0 ;
188
- transform : translate (0 , calc (100% + $popover-offset ));
188
+ transform : translate (
189
+ calc (-1 * $popover-offset ),
190
+ calc (100% + $popover-offset )
191
+ );
189
192
}
190
193
191
194
.#{$prefix } --popover--bottom-right .#{$prefix } --popover-content {
192
195
right : 0 ;
193
196
bottom : 0 ;
194
- transform : translate (0 , calc (100% + $popover-offset ));
197
+ transform : translate ($popover-offset , calc (100% + $popover-offset ));
195
198
}
196
199
197
200
// Popover hover area placement
@@ -231,13 +234,16 @@ $popover-caret-height: custom-property.get-var(
231
234
.#{$prefix } --popover--top-left .#{$prefix } --popover-content {
232
235
top : 0 ;
233
236
left : 0 ;
234
- transform : translate (0 , calc (-100% - $popover-offset ));
237
+ transform : translate (
238
+ calc (-1 * $popover-offset ),
239
+ calc (-100% - $popover-offset )
240
+ );
235
241
}
236
242
237
243
.#{$prefix } --popover--top-right .#{$prefix } --popover-content {
238
244
top : 0 ;
239
245
right : 0 ;
240
- transform : translate (0 , calc (-100% - $popover-offset ));
246
+ transform : translate ($popover-offset , calc (-100% - $popover-offset ));
241
247
}
242
248
243
249
// Popover hover area placement
@@ -277,15 +283,18 @@ $popover-caret-height: custom-property.get-var(
277
283
}
278
284
279
285
.#{$prefix } --popover--right-top .#{$prefix } --popover-content {
280
- top : 0 ;
286
+ top : 50 % ;
281
287
left : 100% ;
282
- transform : translate ($popover-offset , 0 );
288
+ transform : translate (
289
+ $popover-offset ,
290
+ calc (0.5 * $popover-offset * -1 - 16px )
291
+ );
283
292
}
284
293
285
294
.#{$prefix } --popover--right-bottom .#{$prefix } --popover-content {
286
- bottom : 0 ;
295
+ bottom : 50 % ;
287
296
left : 100% ;
288
- transform : translate ($popover-offset , 0 );
297
+ transform : translate ($popover-offset , calc ( 0.5 * $popover-offset + 16 px ) );
289
298
}
290
299
291
300
// Popover hover area placement
@@ -325,19 +334,25 @@ $popover-caret-height: custom-property.get-var(
325
334
}
326
335
327
336
.#{$prefix } --popover--left-top .#{$prefix } --popover-content {
328
- top : 0 ;
337
+ top : -50 % ;
329
338
right : 100% ;
330
339
// Add in 0.1px to prevent rounding errors where the content is
331
340
// 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
+ );
333
345
}
334
346
335
347
.#{$prefix } --popover--left-bottom .#{$prefix } --popover-content {
336
348
right : 100% ;
337
- bottom : 0 ;
349
+ bottom : -50 % ;
338
350
// Add in 0.1px to prevent rounding errors where the content is
339
351
// 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
+ );
341
356
}
342
357
343
358
// Popover hover area placement
0 commit comments