From 07025caee95f8b21411fb8d6089f15b87f9265ec Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 15 Jan 2023 14:03:28 +0900
Subject: refactor(client): use css modules

---
 packages/frontend/src/widgets/WidgetDigitalClock.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'packages/frontend/src/widgets/WidgetDigitalClock.vue')

diff --git a/packages/frontend/src/widgets/WidgetDigitalClock.vue b/packages/frontend/src/widgets/WidgetDigitalClock.vue
index d2bfd523f3..b70b2767b3 100644
--- a/packages/frontend/src/widgets/WidgetDigitalClock.vue
+++ b/packages/frontend/src/widgets/WidgetDigitalClock.vue
@@ -1,10 +1,10 @@
 <template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
-	<div class="time">
+<div class="_monospace" :class="[$style.root, { _panel: !widgetProps.transparent }]" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" :class="$style.label">{{ tzAbbrev }}</div>
+	<div>
 		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
 	</div>
-	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
+	<div v-if="widgetProps.showLabel" :class="$style.label">{{ tzOffsetLabel }}</div>
 </div>
 </template>
 
@@ -79,14 +79,14 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.mkw-digitalClock {
+<style lang="scss" module>
+.root {
 	padding: 16px 0;
 	text-align: center;
+}
 
-	> .label {
-		font-size: 65%;
-		opacity: 0.7;
-	}
+.label {
+	font-size: 65%;
+	opacity: 0.7;
 }
 </style>
-- 
cgit v1.2.3-freya