oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 17:23:49 +09:00
parent 99bdb11d24
commit c41879c542
10 changed files with 139 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

44
packages/frontend/src/components/MkReactionEffect.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<span class="text" :class="{ up }">
<span :class="[$style.text, { [$style.up]: up }]">
<MkReactionIcon class="icon" :reaction="reaction"/>
</span>
</div>
@ -43,30 +43,28 @@ onMounted(() => {
position: fixed;
width: 128px;
height: 128px;
}
&:global {
> .text {
display: block;
height: 1em;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: var(--accent);
font-size: 18px;
font-weight: bold;
transform: translateY(-30px);
transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
will-change: opacity, transform;
.text {
display: block;
height: 1em;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
color: var(--accent);
font-size: 18px;
font-weight: bold;
transform: translateY(-30px);
transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
will-change: opacity, transform;
&.up {
opacity: 0;
transform: translateY(-50px) rotateZ(v-bind(angle));
}
}
&.up {
opacity: 0;
transform: translateY(-50px) rotateZ(v-bind(angle));
}
}
</style>