refactor(frontend): use css modules

1 files changed, 49 insertions, 48 deletions

diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index ad7dc4da11..63c55b904a 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -1,15 +1,15 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-	<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }" @keydown="onKeydown">
-		<div ref="headerEl" class="header">
-			<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
-			<span class="title">
+	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }" @keydown="onKeydown">
+		<div ref="headerEl" :class="$style.header">
+			<button v-if="withOkButton" :class="$style.headerButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
+			<span :class="$style.title">
 				<slot name="header"></slot>
 			</span>
-			<button v-if="!withOkButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button>
-			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
+			<button v-if="!withOkButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
-		<div class="body">
+		<div :class="$style.body">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
 		</div>
 	</div>
@@ -81,8 +81,8 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.ebkgoccj {
+<style lang="scss" module>
+.root {
 	margin: auto;
 	overflow: hidden;
 	display: flex;
@@ -96,51 +96,52 @@ defineExpose({
 		--root-margin: 16px;
 	}
 
-	> .header {
-		$height: 46px;
-		$height-narrow: 42px;
-		display: flex;
-		flex-shrink: 0;
-		background: var(--windowHeader);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
+	--headerHeight: 46px;
+	--headerHeightNarrow: 42px;
+}
 
-		> button {
-			height: $height;
-			width: $height;
+.header {
+	display: flex;
+	flex-shrink: 0;
+	background: var(--windowHeader);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+}
 
-			@media (max-width: 500px) {
-				height: $height-narrow;
-				width: $height-narrow;
-			}
-		}
+.headerButton {
+	height: var(--headerHeight);
+	width: var(--headerHeight);
 
-		> .title {
-			flex: 1;
-			line-height: $height;
-			padding-left: 32px;
-			font-weight: bold;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			pointer-events: none;
+	@media (max-width: 500px) {
+		height: var(--headerHeightNarrow);
+		width: var(--headerHeightNarrow);
+	}
+}
 
-			@media (max-width: 500px) {
-				line-height: $height-narrow;
-				padding-left: 16px;
-			}
-		}
+.title {
+	flex: 1;
+	line-height: var(--headerHeight);
+	padding-left: 32px;
+	font-weight: bold;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	pointer-events: none;
 
-		> button + .title {
-			padding-left: 0;
-		}
+	@media (max-width: 500px) {
+		line-height: var(--headerHeightNarrow);
+		padding-left: 16px;
 	}
+}
 
-	> .body {
-		flex: 1;
-		overflow: auto;
-		background: var(--panel);
-		container-type: size;
-	}
+.headerButton + .title {
+	padding-left: 0;
+}
+
+.body {
+	flex: 1;
+	overflow: auto;
+	background: var(--panel);
+	container-type: size;
 }
 </style>