diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss index 1704040d..1c3d1873 100644 --- a/src/components/Popover/Popover.module.scss +++ b/src/components/Popover/Popover.module.scss @@ -51,36 +51,36 @@ // Sides .isRootAtTop { - bottom: 100%; + bottom: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap}); } .isRootAtBottom { - top: 100%; + top: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap}); } .isRootAtLeft { - right: 100%; + right: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap}); } .isRootAtRight { - left: 100%; + left: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap}); } // Arrows .isRootAtTop > .arrow { - top: calc(100% - #{theme.$arrow-gap}); + top: calc(100% - #{theme.$arrow-safe-rendering-overlap}); } .isRootAtBottom > .arrow { - bottom: calc(100% - #{theme.$arrow-gap}); + bottom: calc(100% - #{theme.$arrow-safe-rendering-overlap}); } .isRootAtLeft > .arrow { - left: calc(100% - #{theme.$arrow-gap}); + left: calc(100% - #{theme.$arrow-safe-rendering-overlap}); } .isRootAtRight > .arrow { - right: calc(100% - #{theme.$arrow-gap}); + right: calc(100% - #{theme.$arrow-safe-rendering-overlap}); } // Side alignments: top diff --git a/src/components/Popover/_theme.scss b/src/components/Popover/_theme.scss index 9057b6fa..59b40e54 100644 --- a/src/components/Popover/_theme.scss +++ b/src/components/Popover/_theme.scss @@ -13,6 +13,6 @@ $box-shadow: var(--rui-Popover__box-shadow); $arrow-safe-rendering-overlap: 1px; $arrow-gap: 1px; -$arrow-width: calc(1rem + #{$arrow-safe-rendering-overlap + ($arrow-gap * 2)}); +$arrow-width: calc(1rem + #{$arrow-safe-rendering-overlap * 2}); $arrow-height: calc($arrow-width / 2); // 1. $arrow-corner-offset: 0.75rem;