From fede4eeb89fff2c29a6498f02a0033d8f52ec1c6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 28 Nov 2020 12:19:57 +0900
Subject: [PATCH] wip

---
 src/client/components/ui/modal.vue |  4 ++--
 src/client/ui/_common_/header.vue  | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue
index ad3beee73..5a3e0f66a 100644
--- a/src/client/components/ui/modal.vue
+++ b/src/client/components/ui/modal.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none' }">
+<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 	<transition :name="$store.state.device.animation ? 'modal-bg' : ''" appear>
 		<div class="bg _modalBg" v-if="showing" @click="onBgClick"></div>
 	</transition>
@@ -153,7 +153,7 @@ export default defineComponent({
 <style>
 .modal-popup-content-enter-active, .modal-popup-content-leave-active,
 .modal-content-enter-from, .modal-content-leave-to {
-  transform-origin: v-bind(transformOrigin);
+  transform-origin: var(--transformOrigin);
 }
 </style>
 
diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index c58f2841f..25f1c5f00 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb">
+<div class="fdidabkb" :style="`--height:${height};`">
 	<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
 		<button class="_button back" v-if="withBack && canBack" @click.stop="back()"><Fa :icon="faChevronLeft"/></button>
 	</transition>
@@ -79,24 +79,24 @@ export default defineComponent({
 	text-align: center;
 
 	> .back {
-		height: v-bind(height);
-		width: v-bind(height);
+		height: var(--height);
+		width: var(--height);
 	}
 
 	> .action {
-		height: v-bind(height);
-		width: v-bind(height);
+		height: var(--height);
+		width: var(--height);
 	}
 
 	> .titleContainer {
-		width: calc(100% - (v-bind(height) * 2));
+		width: calc(100% - (var(--height) * 2));
 
 		> .title {
-			height: v-bind(height);
+			height: var(--height);
 
 			> .avatar {
 				$size: 32px;
-				margin: calc((v-bind(height) - #{$size}) / 2) 8px calc((v-bind(height) - #{$size}) / 2) 0;
+				margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
 				pointer-events: none;
 			}
 		}