From e3c39d4b5212150409c308abbcc02e3b86a0b6b8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 14 Jan 2023 12:45:20 +0900
Subject: [PATCH] refactor(client): use css modules

---
 .../src/components/MkDigitalClock.vue         | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MkDigitalClock.vue b/packages/frontend/src/components/MkDigitalClock.vue
index 9ed8d63d1..278dc8a5e 100644
--- a/packages/frontend/src/components/MkDigitalClock.vue
+++ b/packages/frontend/src/components/MkDigitalClock.vue
@@ -1,11 +1,11 @@
 <template>
-<span class="zjobosdg">
+<span>
 	<span v-text="hh"></span>
-	<span class="colon" :class="{ showColon }">:</span>
+	<span :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
 	<span v-text="mm"></span>
-	<span v-if="showS" class="colon" :class="{ showColon }">:</span>
+	<span v-if="showS" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
 	<span v-if="showS" v-text="ss"></span>
-	<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
+	<span v-if="showMs" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
 	<span v-if="showMs" v-text="ms"></span>
 </span>
 </template>
@@ -62,16 +62,14 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.zjobosdg {
-	> .colon {
-		opacity: 0;
-		transition: opacity 1s ease;
+<style lang="scss" module>
+.colon {
+	opacity: 0;
+	transition: opacity 1s ease;
 
-		&.showColon {
-			opacity: 1;
-			transition: opacity 0s;
-		}
+	&.showColon {
+		opacity: 1;
+		transition: opacity 0s;
 	}
 }
 </style>