Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-10 14:20:58 +09:00
parent 01d5e385ec
commit 17fa5667b8
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/frontend/src/components/MkTooltip.vue
View file

@ -1,6 +1,12 @@
<template> <template>
<Transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')"> <Transition
<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }"> :enter-active-class="$store.state.animation ? $style.transition_tooltip_enterActive : ''"
:leave-active-class="$store.state.animation ? $style.transition_tooltip_leaveActive : ''"
:enter-from-class="$store.state.animation ? $style.transition_tooltip_enterFrom : ''"
:leave-to-class="$store.state.animation ? $style.transition_tooltip_leaveTo : ''"
appear @after-leave="emit('closed')"
>
<div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot> <slot>
<Mfm v-if="asMfm" :text="text"/> <Mfm v-if="asMfm" :text="text"/>
<span v-else>{{ text }}</span> <span v-else>{{ text }}</span>
@ -74,20 +80,20 @@ onUnmounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.tooltip-enter-active, .transition_tooltip_enterActive,
.tooltip-leave-active { .transition_tooltip_leaveActive {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
} }
.tooltip-enter-from, .transition_tooltip_enterFrom,
.tooltip-leave-active { .transition_tooltip_leaveTo {
opacity: 0; opacity: 0;
transform: scale(0.75); transform: scale(0.75);
} }
.buebdbiu { .root {
position: absolute; position: absolute;
font-size: 0.8em; font-size: 0.8em;
padding: 8px 12px; padding: 8px 12px;