From 96b9af4919e6f7eeeae1b5ae123f54bbbfad5a2f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 16 Mar 2022 10:46:30 +1100
Subject: Use outlines and pseudo-divs instead of borders

---
 src/components/Tile.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 92459b7..06d9899 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -52,7 +52,7 @@ export default defineComponent({
 		top: (center ? (center[1]-layoutNode.dims[1])/2 : layoutNode.pos[1]) + 'px',
 		width: layoutNode.dims[0]+'px', height: layoutNode.dims[1]+'px',
 		zIndex: zIdx, overflow: overFlow, transitionDuration: transitionDuration+'ms'}"
-	class="transition-[left,top,width,height] ease-out border border-stone-900 bg-white">
+	class="transition-[left,top,width,height] ease-out outline outline-1 bg-white">
 	<div v-if="layoutNode.children.length == 0"
 		:style="{backgroundImage: 'url(\'/img/' + name + '.jpg\')',
 			opacity: (layoutNode.tolNode.children.length > 0 ? 1 : 0.7)}"
@@ -75,11 +75,10 @@ export default defineComponent({
 					(layoutNode.sepSweptArea.dims[0]+(layoutNode.sepSweptArea.sweptLeft ? 1 : 0))+'px' : 0,
 				height: layoutNode.sepSweptArea ?
 					(layoutNode.sepSweptArea.dims[1]+(layoutNode.sepSweptArea.sweptLeft ? 0 : 1))+'px' : 0,
-				borderWidth: layoutNode.sepSweptArea ? '1px' : 0,
-				borderRightColor: (layoutNode.sepSweptArea && layoutNode.sepSweptArea.sweptLeft ? 'white' : 'currentColor'),
-				borderBottomColor: (layoutNode.sepSweptArea && layoutNode.sepSweptArea.sweptLeft ? 'currentColor' : 'white'),
 				transitionDuration: transitionDuration+'ms'}"
-			class="transition-[left,top,width,height] ease-out border-solid border-stone-900 bg-white">
+			class="transition-[left,top,width,height] ease-out bg-white
+				before:absolute before:bg-black before:-top-[1px] before:-left-[1px] before:w-full before:h-full before:-z-10
+				after:absolute after:bg-black after:-bottom-[1px] after:-left-[1px] after:w-full after:h-full after:-z-10">
 			<div v-if="layoutNode.sepSweptArea && !layoutNode.sepSweptArea.sweptLeft" :style="{height: headerSz+'px'}"
 				class="text-center overflow-hidden text-ellipsis hover:cursor-pointer bg-stone-300"
 				@click="onHeaderClick">
-- 
cgit v1.2.3