refactor(client): use css module

1 files changed, 21 insertions, 21 deletions

diff --git a/packages/frontend/src/components/form/section.vue b/packages/frontend/src/components/form/section.vue
index a838164978..55308b9c80 100644
--- a/packages/frontend/src/components/form/section.vue
+++ b/packages/frontend/src/components/form/section.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="vrtktovh" :class="{ first }">
-	<div class="label"><slot name="label"></slot></div>
-	<div class="main">
+<div :class="[$style.root, { [$style.rootFirst]: first }]">
+	<div :class="[$style.label, { [$style.labelFirst]: first }]"><slot name="label"></slot></div>
+	<div :class="$style.main">
 		<slot></slot>
 	</div>
 </div>
@@ -13,31 +13,31 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.vrtktovh {
+<style lang="scss" module>
+.root {
 	border-top: solid 0.5px var(--divider);
 	//border-bottom: solid 0.5px var(--divider);
+}
 
-	> .label {
-		font-weight: bold;
-		padding: 1.5em 0 0 0;
-		margin: 0 0 16px 0;
+.rootFirst {
+	border-top: none;
+}
 
-		&:empty {
-			display: none;
-		}
-	}
+.label {
+	font-weight: bold;
+	padding: 1.5em 0 0 0;
+	margin: 0 0 16px 0;
 
-	> .main {
-		margin: 1.5em 0 0 0;
+	&:empty {
+		display: none;
 	}
+}
 
-	&.first {
-		border-top: none;
+.labelFirst {
+	padding-top: 0;
+}
 
-		> .label {
-			padding-top: 0;
-		}
-	}
+.main {
+	margin: 1.5em 0 0 0;
 }
 </style>