diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-15 07:51:25 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-15 07:51:25 +0100 |
| commit | 581df7952916456f32ae87555c98f838899110c6 (patch) | |
| tree | a5f04ca2ce39041b7b611c5283a4c82b6778b172 /src | |
| parent | Update (diff) | |
| download | iro-design-581df7952916456f32ae87555c98f838899110c6.tar.gz iro-design-581df7952916456f32ae87555c98f838899110c6.tar.bz2 iro-design-581df7952916456f32ae87555c98f838899110c6.zip | |
Set action menu position with transform only
Diffstat (limited to 'src')
| -rw-r--r-- | src/objects/_action-menu.scss | 11 |
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') { |