summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-15 07:51:25 +0100
committerVolpeon <git@volpeon.ink>2022-02-15 07:51:25 +0100
commit581df7952916456f32ae87555c98f838899110c6 (patch)
treea5f04ca2ce39041b7b611c5283a4c82b6778b172
parentUpdate (diff)
downloadiro-design-581df7952916456f32ae87555c98f838899110c6.tar.gz
iro-design-581df7952916456f32ae87555c98f838899110c6.tar.bz2
iro-design-581df7952916456f32ae87555c98f838899110c6.zip
Set action menu position with transform only
-rw-r--r--src/objects/_action-menu.scss11
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 @@
50 @include iro.bem-object(iro.props-namespace()) { 50 @include iro.bem-object(iro.props-namespace()) {
51 position: absolute; 51 position: absolute;
52 z-index: 10000; 52 z-index: 10000;
53 top: var(--y); 53 top: 0;
54 left: var(--x); 54 left: 0;
55 padding: fn.dim(--pad-y) fn.dim(--pad-x); 55 padding: fn.dim(--pad-y) fn.dim(--pad-x);
56 transform: translate(var(--x), var(--y));
56 border: fn.dim(--border) solid fn.color(--border); 57 border: fn.dim(--border) solid fn.color(--border);
57 border-radius: fn.dim(--rounding); 58 border-radius: fn.dim(--rounding);
58 background-color: fn.global-color(--bg); 59 background-color: fn.global-color(--bg);
@@ -60,15 +61,15 @@
60 color: fn.global-color(--fg); 61 color: fn.global-color(--fg);
61 62
62 @include iro.bem-modifier('up-left') { 63 @include iro.bem-modifier('up-left') {
63 transform: translate(0, -100%); 64 transform: translate(var(--x), calc(var(--y) - 100%));
64 } 65 }
65 66
66 @include iro.bem-modifier('up-right') { 67 @include iro.bem-modifier('up-right') {
67 transform: translate(-100%, -100%); 68 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
68 } 69 }
69 70
70 @include iro.bem-modifier('down-right') { 71 @include iro.bem-modifier('down-right') {
71 transform: translate(-100%, 0); 72 transform: translate(calc(var(--x) - 100%), var(--y));
72 } 73 }
73 74
74 @include iro.bem-elem('item') { 75 @include iro.bem-elem('item') {