refactor: use css module at components/global/loading.vue (#8750)

* refactor: use css module at components/global/loading.vue

* rename class name to "root"

1 files changed, 33 insertions, 31 deletions

diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue
index fa2ce1800c..5a7e362fcf 100644
--- a/packages/client/src/components/global/loading.vue
+++ b/packages/client/src/components/global/loading.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="yxspomdl" :class="{ inline, colored, mini }">
-	<div class="container">
-		<svg class="spinner bg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
+<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
+	<div :class="$style.container">
+		<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
 			<g transform="matrix(1.125,0,0,1.125,12,12)">
 				<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
 			</g>
 		</svg>
-		<svg class="spinner fg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
+		<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
 			<g transform="matrix(1.125,0,0,1.125,12,12)">
 				<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
 			</g>
@@ -16,7 +16,9 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { useCssModule } from 'vue';
+
+useCssModule();
 
 const props = withDefaults(defineProps<{
 	inline?: boolean;
@@ -29,7 +31,7 @@ const props = withDefaults(defineProps<{
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 @keyframes spinner {
 	0% {
 		transform: rotate(0deg);
@@ -39,7 +41,7 @@ const props = withDefaults(defineProps<{
 	}
 }
 
-.yxspomdl {
+.root {
 	padding: 32px;
 	text-align: center;
 	cursor: wait;
@@ -60,33 +62,33 @@ const props = withDefaults(defineProps<{
 		padding: 16px;
 		--size: 32px;
 	}
+}
 
-	> .container {
-		position: relative;
-		width: var(--size);
-		height: var(--size);
-		margin: 0 auto;
+.container {
+	position: relative;
+	width: var(--size);
+	height: var(--size);
+	margin: 0 auto;
+}
 
-		> .spinner {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: var(--size);
-			height: var(--size);
-			fill-rule: evenodd;
-			clip-rule: evenodd;
-			stroke-linecap: round;
-			stroke-linejoin: round;
-			stroke-miterlimit: 1.5;
-		}
+.spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: var(--size);
+	height: var(--size);
+	fill-rule: evenodd;
+	clip-rule: evenodd;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-miterlimit: 1.5;
+}
 
-		> .bg {
-			opacity: 0.275;
-		}
+.bg {
+	opacity: 0.275;
+}
 
-		> .fg {
-			animation: spinner 0.5s linear infinite;
-		}
-	}
+.fg {
+	animation: spinner 0.5s linear infinite;
 }
 </style>