From 8c97c54cfacd201e480dffb73db3fd0124532edb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 14 May 2023 10:21:56 +0900
Subject: refactor(frontend): use css modules

---
 packages/frontend/src/components/MkRippleEffect.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

(limited to 'packages/frontend/src/components/MkRippleEffect.vue')

diff --git a/packages/frontend/src/components/MkRippleEffect.vue b/packages/frontend/src/components/MkRippleEffect.vue
index 9d93211d5f..60c3a47385 100644
--- a/packages/frontend/src/components/MkRippleEffect.vue
+++ b/packages/frontend/src/components/MkRippleEffect.vue
@@ -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>
-- 
cgit v1.2.3-freya