diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-14 17:23:49 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-01-14 17:23:49 +0900 |
| commit | c41879c542f0a1a5c3d5a92d5fbabca61b9b161c (patch) | |
| tree | 25cfb23909dcb2da6085ba8b028862dc3bd46557 /packages/frontend/src/components/MkReactionEffect.vue | |
| parent | Update CHANGELOG.md (diff) | |
| download | misskey-c41879c542f0a1a5c3d5a92d5fbabca61b9b161c.tar.gz misskey-c41879c542f0a1a5c3d5a92d5fbabca61b9b161c.tar.bz2 misskey-c41879c542f0a1a5c3d5a92d5fbabca61b9b161c.zip | |
refactor(client): use css modules
Diffstat (limited to 'packages/frontend/src/components/MkReactionEffect.vue')
| -rw-r--r-- | packages/frontend/src/components/MkReactionEffect.vue | 44 |
1 files changed, 21 insertions, 23 deletions
diff --git a/packages/frontend/src/components/MkReactionEffect.vue b/packages/frontend/src/components/MkReactionEffect.vue index ff2d18ed80..d037ecced8 100644 --- a/packages/frontend/src/components/MkReactionEffect.vue +++ b/packages/frontend/src/components/MkReactionEffect.vue @@ -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> |