From 9440876bc2dfc1aacaa1d6b23c73872288e5db05 Mon Sep 17 00:00:00 2001
From: cocopon <cocopon@me.com>
Date: Thu, 11 Jan 2024 17:46:37 +0900
Subject: [PATCH] Replace bottom/left/tight/top with inset

---
 packages/core/lib/sass/view/_checkbox.scss             |  5 +----
 packages/core/lib/sass/view/_color-picker.scss         | 10 ++--------
 packages/core/lib/sass/view/_color-swatch.scss         |  5 +----
 packages/core/lib/sass/view/_slider.scss               | 10 ++--------
 packages/core/lib/sass/view/_tab.scss                  |  5 +----
 packages/tweakpane/src/doc/sass/_pages.scss            |  5 +----
 .../src/doc/sass/components/_page-header.scss          |  5 +----
 .../src/doc/sass/components/_theme-builder.scss        | 10 ++--------
 8 files changed, 11 insertions(+), 44 deletions(-)

diff --git a/packages/core/lib/sass/view/_checkbox.scss b/packages/core/lib/sass/view/_checkbox.scss
index 12e8cc0b4..08445486f 100644
--- a/packages/core/lib/sass/view/_checkbox.scss
+++ b/packages/core/lib/sass/view/_checkbox.scss
@@ -23,15 +23,12 @@
 		width: tp.cssVar('container-unit-size');
 
 		svg {
-			bottom: 0;
 			display: block;
 			height: 16px;
-			left: 0;
+			inset: 0;
 			margin: auto;
 			opacity: 0;
 			position: absolute;
-			right: 0;
-			top: 0;
 			width: 16px;
 
 			path {
diff --git a/packages/core/lib/sass/view/_color-picker.scss b/packages/core/lib/sass/view/_color-picker.scss
index b2e21fb90..b4fb6155e 100644
--- a/packages/core/lib/sass/view/_color-picker.scss
+++ b/packages/core/lib/sass/view/_color-picker.scss
@@ -162,11 +162,8 @@ $track-width: 4px;
 		width: 100%;
 	}
 	&_c {
-		bottom: 0;
-		left: 0;
+		inset: 0;
 		position: absolute;
-		right: 0;
-		top: 0;
 	}
 	&_m {
 		@include color.checkerboard(tp.$slider-knob-size);
@@ -187,11 +184,8 @@ $track-width: 4px;
 		border-radius: tp.cssVar('blade-border-radius');
 		border: $marker-border-color solid 2px;
 		box-sizing: border-box;
-		bottom: 0;
-		left: 0;
+		inset: 0;
 		position: absolute;
-		right: 0;
-		top: 0;
 	}
 	&:focus &_p {
 		border-color: $marker-border-color-focus;
diff --git a/packages/core/lib/sass/view/_color-swatch.scss b/packages/core/lib/sass/view/_color-swatch.scss
index 15a257773..9b44541a0 100644
--- a/packages/core/lib/sass/view/_color-swatch.scss
+++ b/packages/core/lib/sass/view/_color-swatch.scss
@@ -30,13 +30,10 @@
 		&:focus::after {
 			border: rgba(white, 0.75) solid 2px;
 			border-radius: tp.cssVar('blade-border-radius');
-			bottom: 0;
 			content: '';
 			display: block;
-			left: 0;
+			inset: 0;
 			position: absolute;
-			right: 0;
-			top: 0;
 		}
 	}
 }
diff --git a/packages/core/lib/sass/view/_slider.scss b/packages/core/lib/sass/view/_slider.scss
index f4993eb2e..ab3c66ffd 100644
--- a/packages/core/lib/sass/view/_slider.scss
+++ b/packages/core/lib/sass/view/_slider.scss
@@ -17,15 +17,12 @@
 		&::before {
 			background-color: tp.cssVar('input-bg');
 			border-radius: 1px;
-			bottom: 0;
 			content: '';
 			display: block;
 			height: 2px;
-			left: 0;
+			inset: 0;
 			margin: auto;
 			position: absolute;
-			right: 0;
-			top: 0;
 		}
 	}
 	&_k {
@@ -37,16 +34,13 @@
 		&::before {
 			background-color: tp.cssVar('input-fg');
 			border-radius: 1px;
-			bottom: 0;
 			content: '';
 			display: block;
 			height: 2px;
-			left: 0;
+			inset: 0;
 			margin-bottom: auto;
 			margin-top: auto;
 			position: absolute;
-			right: 0;
-			top: 0;
 		}
 		&::after {
 			background-color: tp.cssVar('button-bg');
diff --git a/packages/core/lib/sass/view/_tab.scss b/packages/core/lib/sass/view/_tab.scss
index 12f8dec8d..1250d46e3 100644
--- a/packages/core/lib/sass/view/_tab.scss
+++ b/packages/core/lib/sass/view/_tab.scss
@@ -111,13 +111,10 @@
 
 		&::before {
 			background-color: tp.cssVar('container-bg');
-			bottom: 2px;
 			content: '';
-			left: 0;
+			inset: 0 0 2px;
 			pointer-events: none;
 			position: absolute;
-			right: 0;
-			top: 0;
 		}
 		&:hover::before {
 			background-color: tp.cssVar('container-bg-hover');
diff --git a/packages/tweakpane/src/doc/sass/_pages.scss b/packages/tweakpane/src/doc/sass/_pages.scss
index 2679a9eb9..ed541b2d3 100644
--- a/packages/tweakpane/src/doc/sass/_pages.scss
+++ b/packages/tweakpane/src/doc/sass/_pages.scss
@@ -45,12 +45,9 @@
 			);
 			background-position: center;
 			background-size: 16px 16px;
-			bottom: 0;
 			content: '';
-			left: 0;
+			inset: 0;
 			position: absolute;
-			right: 0;
-			top: 0;
 		}
 
 		.paneContainer {
diff --git a/packages/tweakpane/src/doc/sass/components/_page-header.scss b/packages/tweakpane/src/doc/sass/components/_page-header.scss
index 3bfb5e355..027b31f46 100644
--- a/packages/tweakpane/src/doc/sass/components/_page-header.scss
+++ b/packages/tweakpane/src/doc/sass/components/_page-header.scss
@@ -14,12 +14,9 @@
 		}
 	}
 	&_sketchContainer {
-		bottom: 0;
-		left: 0;
+		inset: 0;
 		overflow: hidden;
 		position: absolute;
-		right: 0;
-		top: 0;
 
 		svg {
 			display: block;
diff --git a/packages/tweakpane/src/doc/sass/components/_theme-builder.scss b/packages/tweakpane/src/doc/sass/components/_theme-builder.scss
index 4af38ecf5..034c0b064 100644
--- a/packages/tweakpane/src/doc/sass/components/_theme-builder.scss
+++ b/packages/tweakpane/src/doc/sass/components/_theme-builder.scss
@@ -46,11 +46,8 @@
 		background: url(https://source.unsplash.com/74ft3aciAY0/900x1600) no-repeat
 			center;
 		background-size: cover;
-		bottom: -16px;
-		left: -16px;
+		inset: -16px;
 		position: absolute;
-		right: -16px;
-		top: -16px;
 
 		&::before {
 			background-image: radial-gradient(
@@ -59,12 +56,9 @@
 			);
 			background-position: center;
 			background-size: 16px 16px;
-			bottom: 0;
 			content: '';
-			left: 0;
+			inset: 0;
 			position: absolute;
-			right: 0;
-			top: 0;
 		}
 	}
 }