refactor(frontend): use css module

packages/frontend/src/components/MkRadio.vue

@@ -1,8 +1,7 @@
 <template>
 <div
 	v-adaptive-border
-	class="novjtctn"
-	:class="{ disabled, checked }"
+	:class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked }]"
 	:aria-checked="checked"
 	:aria-disabled="disabled"
 	@click="toggle"
@@ -10,11 +9,12 @@
 	<input
 		type="radio"
 		:disabled="disabled"
+		:class="$style.input"
 	>
-	<span class="button">
+	<span :class="$style.button">
 		<span></span>
 	</span>
-	<span class="label"><slot></slot></span>
+	<span :class="$style.label"><slot></slot></span>
 </div>
 </template>
 
@@ -39,8 +39,8 @@ function toggle(): void {
 }
 </script>
 
-<style lang="scss" scoped>
-.novjtctn {
+<style lang="scss" module>
+.root {
 	position: relative;
 	display: inline-block;
 	text-align: left;
@@ -53,18 +53,12 @@ function toggle(): void {
 	border-radius: 6px;
 	font-size: 90%;
 	transition: all 0.2s;
-
-	> * {
 	user-select: none;
-	}
 
 	&.disabled {
 		opacity: 0.6;
-
-		&, * {
 		cursor: not-allowed !important;
 	}
-	}
 
 	&:hover {
 		border-color: var(--inputBorderHover) !important;
@@ -74,10 +68,7 @@ function toggle(): void {
 		background-color: var(--accentedBg) !important;
 		border-color: var(--accentedBg) !important;
 		color: var(--accent);
-
-		&, * {
 		cursor: default !important;
-		}
 
 		> .button {
 			border-color: var(--accent);
@@ -89,16 +80,17 @@ function toggle(): void {
 			}
 		}
 	}
+}
 
-	> input {
+.input {
 	position: absolute;
 	width: 0;
 	height: 0;
 	opacity: 0;
 	margin: 0;
-	}
+}
 
-	> .button {
+.button {
 	position: absolute;
 	width: 14px;
 	height: 14px;
@@ -120,13 +112,12 @@ function toggle(): void {
 		transform: scale(0);
 		transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 	}
-	}
+}
 
-	> .label {
+.label {
 	margin-left: 28px;
 	display: block;
 	line-height: 20px;
 	cursor: pointer;
-	}
 }
 </style>