refactor(client): use css modules

packages/frontend/src/ui/deck/column.vue

@@ -1,31 +1,28 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 <section
-	v-hotkey="keymap" class="dnpfarvg"
+	v-hotkey="keymap"
-	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
+	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.isStacked]: isStacked, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
 >
 	<header
-		:class="{ indicated }"
+		:class="[$style.header, { [$style.indicated]: indicated }]"
 		draggable="true"
 		@click="goTop"
 		@dragstart="onDragstart"
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
 	>
-		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
+		<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
 			<template v-if="active"><i class="ti ti-chevron-up"></i></template>
 			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
-		<div class="action">
+		<span :class="$style.title"><slot name="header"></slot></span>
-			<slot name="action"></slot>
+		<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
-		</div>
-		<span class="header"><slot name="header"></slot></span>
-		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
 	</header>
-	<div v-show="active" ref="body">
+	<div v-show="active" ref="body" :class="$style.body">
 		<slot></slot>
 	</div>
 </section>
@@ -245,8 +242,8 @@ function onDrop(ev) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.dnpfarvg {
+.root {
 	--root-margin: 10px;
 	--deckColumnHeaderHeight: 40px;
 
@@ -293,7 +290,7 @@ function onDrop(ev) {
 		flex-basis: var(--deckColumnHeaderHeight);
 		min-height: var(--deckColumnHeaderHeight);
 
-		> header.indicated {
+		> .header.indicated {
 			box-shadow: 4px 0px var(--accent) inset;
 		}
 	}
@@ -303,97 +300,82 @@ function onDrop(ev) {
 		-webkit-backdrop-filter: var(--blur, blur(10px));
 		backdrop-filter: var(--blur, blur(10px));
 
-		> header {
+		> .header {
 			background: transparent;
 			box-shadow: none;
-
+			color: var(--fg);
-			> button {
-				color: var(--fg);
-			}
 		}
 	}
 
 	&.paged {
 		background: var(--bg) !important;
 	}
+}
 
-	> header {
+.header {
-		position: relative;
+	position: relative;
-		display: flex;
+	display: flex;
-		z-index: 2;
+	z-index: 2;
-		line-height: var(--deckColumnHeaderHeight);
+	line-height: var(--deckColumnHeaderHeight);
-		height: var(--deckColumnHeaderHeight);
+	height: var(--deckColumnHeaderHeight);
-		padding: 0 16px;
+	padding: 0 16px;
-		font-size: 0.9em;
+	font-size: 0.9em;
-		color: var(--panelHeaderFg);
+	color: var(--panelHeaderFg);
-		background: var(--panelHeaderBg);
+	background: var(--panelHeaderBg);
-		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
+	box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
-		cursor: pointer;
+	cursor: pointer;
 
-		&, * {
+	&, * {
-			user-select: none;
+		user-select: none;
-		}
-
-		&.indicated {
-			box-shadow: 0 3px 0 0 var(--accent);
-		}
-
-		> .header {
-			display: inline-block;
-			align-items: center;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		> span:only-of-type {
-			width: 100%;
-		}
-
-		> .toggleActive,
-		> .action > ::v-deep(*),
-		> .menu {
-			z-index: 1;
-			width: var(--deckColumnHeaderHeight);
-			line-height: var(--deckColumnHeaderHeight);
-			color: var(--faceTextButton);
-
-			&:hover {
-				color: var(--faceTextButtonHover);
-			}
-
-			&:active {
-				color: var(--faceTextButtonActive);
-			}
-		}
-
-		> .toggleActive, > .action {
-			margin-left: -16px;
-		}
-
-		> .action {
-			z-index: 1;
-		}
-
-		> .action:empty {
-			display: none;
-		}
-
-		> .menu {
-			margin-left: auto;
-			margin-right: -16px;
-		}
 	}
 
-	> div {
+	&.indicated {
-		height: calc(100% - var(--deckColumnHeaderHeight));
+		box-shadow: 0 3px 0 0 var(--accent);
-		overflow-y: auto;
-		overflow-x: hidden; // Safari does not supports clip
-		overflow-x: clip;
-		-webkit-overflow-scrolling: touch;
-		box-sizing: border-box;
-		container-type: inline-size;
-		background-color: var(--bg);
 	}
 }
+
+.title {
+	display: inline-block;
+	align-items: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+}
+
+.toggleActive,
+.menu {
+	z-index: 1;
+	width: var(--deckColumnHeaderHeight);
+	line-height: var(--deckColumnHeaderHeight);
+	color: var(--faceTextButton);
+
+	&:hover {
+		color: var(--faceTextButtonHover);
+	}
+
+	&:active {
+		color: var(--faceTextButtonActive);
+	}
+}
+
+.toggleActive {
+	margin-left: -16px;
+}
+
+.menu {
+	margin-left: auto;
+	margin-right: -16px;
+}
+
+.body {
+	height: calc(100% - var(--deckColumnHeaderHeight));
+	overflow-y: auto;
+	overflow-x: hidden; // Safari does not supports clip
+	overflow-x: clip;
+	-webkit-overflow-scrolling: touch;
+	box-sizing: border-box;
+	container-type: inline-size;
+	background-color: var(--bg);
+}
 </style>