style: Remove hardcoded size throughout

pmndrs · Jan 31, 2023 · 6a85d80 · 6a85d80
1 parent f5aa92b
commit 6a85d80
Showing 1 changed file with 19 additions and 18 deletions.
diff --git a/packages/leva/src/components/UI/StyledJoystick3d.ts b/packages/leva/src/components/UI/StyledJoystick3d.ts
@@ -37,28 +37,29 @@ export const StyledJoyCubeFace = styled(JoystickGrid, {
 })
 
 export const StyledJoyCube = styled('div', {
+  '--joycube-size': '80px',
+  '--joycube-half-size': 'calc(var(--joycube-size) / 2)',
+  '--joycube-half-size-negative': 'calc(var(--joycube-size) / -2)',
   '--joycube-opacity-mid': '0.5',
   '--joycube-opacity-rear': '0.3',
-  '--joycube-size': '80px',
-  '--joycube-half-size': '40px',
   position: 'absolute',
   width: 'var(--joycube-size)',
   height: 'var(--joycube-size)',
-  transformOrigin: '40px 40px -40px',
+  transformOrigin: 'var(--joycube-half-size) var(--joycube-half-size) var(--joycube-half-size-negative)',
   transformStyle: 'preserve-3d',
-  transform: 'rotateY( 0deg) translateZ( -40px)',
+  transform: 'rotateY( 0deg) translateZ(var(--joycube-half-size-negative))',
   variants: {
     top: {
-      true: { transform: 'rotateX(-90deg) translateZ( -40px)' },
+      true: { transform: 'rotateX(-90deg) translateZ(var(--joycube-half-size-negative))' },
     },
     right: {
-      true: { transform: 'rotateY(-90deg) translateZ( -40px)' },
+      true: { transform: 'rotateY(-90deg) translateZ(var(--joycube-half-size-negative))' },
     },
   },
   transition: 'transform 0.5s',
 
   '> .joycube-face--front': {
-    transform: 'rotateY(  0deg) translateZ(40px)',
+    transform: 'rotateY(  0deg) translateZ(var(--joycube-half-size))',
   },
 
   '> .joycube-face--front-mid': {
@@ -67,12 +68,12 @@ export const StyledJoyCube = styled('div', {
   },
 
   '> .joycube-face--front-rear': {
-    transform: 'rotateY(  0deg) translateZ(-40px)',
+    transform: 'rotateY(  0deg) translateZ(var(--joycube-half-size-negative))',
     opacity: 'var(--joycube-opacity-rear)',
   },
 
   '> .joycube-face--right': {
-    transform: 'rotateY( 90deg) translateZ(40px)',
+    transform: 'rotateY( 90deg) translateZ(var(--joycube-half-size))',
   },
 
   '> .joycube-face--right-mid': {
@@ -81,12 +82,12 @@ export const StyledJoyCube = styled('div', {
   },
 
   '> .joycube-face--right-rear': {
-    transform: 'rotateY( 90deg) translateZ(-40px)',
+    transform: 'rotateY( 90deg) translateZ(var(--joycube-half-size-negative))',
     opacity: 'var(--joycube-opacity-rear)',
   },
 
   '> .joycube-face--back': {
-    transform: 'rotateY(180deg) translateZ(40px)',
+    transform: 'rotateY(180deg) translateZ(var(--joycube-half-size))',
   },
 
   '> .joycube-face--back-mid': {
@@ -95,12 +96,12 @@ export const StyledJoyCube = styled('div', {
   },
 
   '> .joycube-face--back-rear': {
-    transform: 'rotateY(180deg) translateZ(-40px)',
+    transform: 'rotateY(180deg) translateZ(var(--joycube-half-size-negative))',
     opacity: 'var(--joycube-opacity-rear)',
   },
 
   '> .joycube-face--left': {
-    transform: 'rotateY(-90deg) translateZ(40px)',
+    transform: 'rotateY(-90deg) translateZ(var(--joycube-half-size))',
   },
 
   '> .joycube-face--left-mid': {
@@ -109,12 +110,12 @@ export const StyledJoyCube = styled('div', {
   },
 
   '> .joycube-face--left-rear': {
-    transform: 'rotateY(-90deg) translateZ(-40px)',
+    transform: 'rotateY(-90deg) translateZ(var(--joycube-half-size-negative))',
     opacity: 'var(--joycube-opacity-rear)',
   },
 
   '> .joycube-face--top': {
-    transform: 'rotateX( 90deg) translateZ(40px)',
+    transform: 'rotateX( 90deg) translateZ(var(--joycube-half-size))',
   },
 
   '> .joycube-face--top-mid': {
@@ -123,12 +124,12 @@ export const StyledJoyCube = styled('div', {
   },
 
   '> .joycube-face--top-rear': {
-    transform: 'rotateX( 90deg) translateZ(-40px)',
+    transform: 'rotateX( 90deg) translateZ(var(--joycube-half-size-negative))',
     opacity: 'var(--joycube-opacity-rear)',
   },
 
   '> .joycube-face--bottom': {
-    transform: 'rotateX(-90deg) translateZ(40px)',
+    transform: 'rotateX(-90deg) translateZ(var(--joycube-half-size))',
   },
 
   '> .joycube-face--bottom-mid': {
@@ -137,7 +138,7 @@ export const StyledJoyCube = styled('div', {
   },
 
   '> .joycube-face--bottom-rear': {
-    transform: 'rotateX(-90deg) translateZ(-40px)',
+    transform: 'rotateX(-90deg) translateZ(var(--joycube-half-size-negative))',
     opacity: 'var(--joycube-opacity-rear)',
   },
 })