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

refactor(frontend): use css modules

Browse source
This commit is contained in:
syuilo 2023-05-14 10:21:56 +09:00
parent 89a3195dfd
commit 8c97c54cfa
40 changed files with 148 additions and 262 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/components/MkRippleEffect.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" cx="64" cy="64">
<circle fill="none" cx="64" cy="64" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.5s"
@ -22,7 +22,7 @@
/>
</circle>
<g fill="none" fill-rule="evenodd">
<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.8s"
@ -100,17 +100,11 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
.vswabwbm {
<style lang="scss" module>
.root {
pointer-events: none;
position: fixed;
width: 128px;
height: 128px;
> svg {
> circle {
stroke: var(--accent);
}
}
}
</style>