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

22
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -2,12 +2,12 @@
<button
ref="buttonEl"
v-ripple="canToggle"
class="hkzvhatu _button"
:class="{ reacted: note.myReaction == reaction, canToggle }"
class="_button"
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
@click="toggleReaction()"
>
<MkReactionIcon class="icon" :reaction="reaction"/>
<span class="count">{{ count }}</span>
<MkReactionIcon :class="$style.icon" :reaction="reaction"/>
<span :class="$style.count">{{ count }}</span>
</button>
</template>
@ -92,8 +92,8 @@ useTooltip(buttonEl, async (showing) => {
}, 100);
</script>
<style lang="scss" scoped>
.hkzvhatu {
<style lang="scss" module>
.root {
display: inline-block;
height: 32px;
margin: 2px;
@ -127,11 +127,11 @@ useTooltip(buttonEl, async (showing) => {
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
}
}
> .count {
font-size: 0.9em;
line-height: 32px;
margin: 0 0 0 4px;
}
.count {
font-size: 0.9em;
line-height: 32px;
margin: 0 0 0 4px;
}
</style>