summaryrefslogtreecommitdiff
path: root/packages/frontend/src/components/MkReactionTooltip.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2023-01-14 17:23:49 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2023-01-14 17:23:49 +0900
commitc41879c542f0a1a5c3d5a92d5fbabca61b9b161c (patch)
tree25cfb23909dcb2da6085ba8b028862dc3bd46557 /packages/frontend/src/components/MkReactionTooltip.vue
parentUpdate CHANGELOG.md (diff)
downloadmisskey-c41879c542f0a1a5c3d5a92d5fbabca61b9b161c.tar.gz
misskey-c41879c542f0a1a5c3d5a92d5fbabca61b9b161c.tar.bz2
misskey-c41879c542f0a1a5c3d5a92d5fbabca61b9b161c.zip
refactor(client): use css modules
Diffstat (limited to 'packages/frontend/src/components/MkReactionTooltip.vue')
-rw-r--r--packages/frontend/src/components/MkReactionTooltip.vue30
1 files changed, 15 insertions, 15 deletions
diff --git a/packages/frontend/src/components/MkReactionTooltip.vue b/packages/frontend/src/components/MkReactionTooltip.vue
index 3b3c2c1a1d..4d67dc3da2 100644
--- a/packages/frontend/src/components/MkReactionTooltip.vue
+++ b/packages/frontend/src/components/MkReactionTooltip.vue
@@ -1,8 +1,8 @@
<template>
<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
- <div class="beeadbfb">
- <MkReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
- <div class="name">{{ reaction.replace('@.', '') }}</div>
+ <div :class="$style.root">
+ <MkReactionIcon :reaction="reaction" :class="$style.icon" :no-style="true"/>
+ <div :class="$style.name">{{ reaction.replace('@.', '') }}</div>
</div>
</MkTooltip>
</template>
@@ -23,20 +23,20 @@ const emit = defineEmits<{
}>();
</script>
-<style lang="scss" scoped>
-.beeadbfb {
+<style lang="scss" module>
+.root {
text-align: center;
+}
- > .icon {
- display: block;
- width: 60px;
- font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
- margin: 0 auto;
- object-fit: contain;
- }
+.icon {
+ display: block;
+ width: 60px;
+ font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+ margin: 0 auto;
+ object-fit: contain;
+}
- > .name {
- font-size: 0.9em;
- }
+.name {
+ font-size: 0.9em;
}
</style>