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/MkSparkle.vue
View file

@ -1,6 +1,6 @@
<template>
<span class="mk-sparkle">
<span ref="el">
<span :class="$style.root">
<span ref="el" style="display: inline-block;">
<slot></slot>
</span>
<!-- なぜか path に対する key が機能しないため
@ -32,7 +32,7 @@
</path>
</svg>
-->
<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -32px; left: -32px;">
<path
style="transform-origin: center; transform-box: fill-box;"
:transform="`translate(${particle.x} ${particle.y})`"
@ -111,20 +111,10 @@ onUnmounted(() => {
});
</script>
<style lang="scss" scoped>
.mk-sparkle {
<style lang="scss" module>
.root {
position: relative;
display: inline-block;
> span {
display: inline-block;
}
> svg {
position: absolute;
top: -32px;
left: -32px;
pointer-events: none;
}
pointer-events: none;
}
</style>