diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-15 09:14:17 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-15 09:14:17 +0900 |
| commit | 9c6629d582e92bc713c58018c405a4410cff437d (patch) | |
| tree | df3bd17b4d3b941f9be89ab5add62d484788a23f /packages/frontend/src/components/MkContextMenu.vue | |
| parent | fix(client): Custom emojis in Inline emoji autocomplete(MkAutoComplete) is wa... (diff) | |
| download | misskey-9c6629d582e92bc713c58018c405a4410cff437d.tar.gz misskey-9c6629d582e92bc713c58018c405a4410cff437d.tar.bz2 misskey-9c6629d582e92bc713c58018c405a4410cff437d.zip | |
refactor(client): use css modules
Diffstat (limited to 'packages/frontend/src/components/MkContextMenu.vue')
| -rw-r--r-- | packages/frontend/src/components/MkContextMenu.vue | 27 |
1 files changed, 17 insertions, 10 deletions
diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue index bb4a716565..f0ea984c4e 100644 --- a/packages/frontend/src/components/MkContextMenu.vue +++ b/packages/frontend/src/components/MkContextMenu.vue @@ -1,6 +1,12 @@ <template> -<Transition :name="$store.state.animation ? 'fade' : ''" appear> - <div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}"> +<Transition + appear + :enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''" +> + <div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}"> <MkMenu :items="items" :align="'left'" @close="$emit('closed')"/> </div> </Transition> @@ -68,18 +74,19 @@ function onMousedown(evt: Event) { } </script> -<style lang="scss" scoped> -.nvlagfpb { - position: absolute; -} - -.fade-enter-active, .fade-leave-active { +<style lang="scss" module> +.transition_fade_enterActive, +.transition_fade_leaveActive { transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: left top; } - -.fade-enter-from, .fade-leave-to { +.transition_fade_enterFrom, +.transition_fade_leaveTo { opacity: 0; transform: scale(0.9); } + +.root { + position: absolute; +} </style> |