Set action menu position with transform only

1 files changed, 6 insertions, 5 deletions

diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index f122417..f694867 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -50,9 +50,10 @@
     @include iro.bem-object(iro.props-namespace()) {
         position:         absolute;
         z-index:          10000;
-        top:              var(--y);
-        left:             var(--x);
+        top:              0;
+        left:             0;
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        transform:        translate(var(--x), var(--y));
         border:           fn.dim(--border) solid fn.color(--border);
         border-radius:    fn.dim(--rounding);
         background-color: fn.global-color(--bg);
@@ -60,15 +61,15 @@
         color:            fn.global-color(--fg);
 
         @include iro.bem-modifier('up-left') {
-            transform: translate(0, -100%);
+            transform: translate(var(--x), calc(var(--y) - 100%));
         }
 
         @include iro.bem-modifier('up-right') {
-            transform: translate(-100%, -100%);
+            transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
         }
 
         @include iro.bem-modifier('down-right') {
-            transform: translate(-100%, 0);
+            transform: translate(calc(var(--x) - 100%), var(--y));
         }
 
         @include iro.bem-elem('item') {