Merge pull request #598 from cocopon/css-inset

Replace bottom/left/tight/top with inset
cocopon · Jan 11, 2024 · 5563102 · 5563102
2 parents 4b454f5 + 9440876
commit 5563102
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 		}
 	}
 }