fix(Edge): Nested calc() with CSS Vars on shorthand props bug workaround

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17437983/
HHogg · Jun 18, 2018 · c686f35 · c686f35
1 parent 040e7a8
commit c686f35
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/Appear/Appear.css b/src/Appear/Appear.css
@@ -59,7 +59,7 @@
 .Appear--FadeSlideDown-enter,
 .Appear--FadeSlideDown-exit-active,
 .Appear--FadeSlideDown-exit-done {
-  transform: translateY(calc(var(--size--x4) * -1));
+  transform: translateY(- var(--size--x4));
   opacity: 0;
 }
 
@@ -94,7 +94,7 @@
 .Appear--FadeSlideRight-enter,
 .Appear--FadeSlideRight-exit-active,
 .Appear--FadeSlideRight-exit-done {
-  transform: translateX(calc(var(--size--x4) * -1));
+  transform: translateX(- var(--size--x4));
   opacity: 0;
 }
 

diff --git a/src/Tab/Tabs.css b/src/Tab/Tabs.css
@@ -1,6 +1,6 @@
 :root {
   --Tabs--space: var(--size--x2);
-  --Tabs--border: calc(var(--size--x1) * 0.5);
+  --Tabs--border: var(--border-size--x2);
 }
 
 .Tabs {

diff --git a/src/variables.css b/src/variables.css
@@ -1,16 +1,16 @@
 :root {
   --size--x1: 0.25rem;
-  --size--x2: calc(var(--size--x1) * 2);
-  --size--x3: calc(var(--size--x1) * 3);
-  --size--x4: calc(var(--size--x1) * 4);
-  --size--x6: calc(var(--size--x1) * 6);
-  --size--x8: calc(var(--size--x1) * 8);
-  --size--x10: calc(var(--size--x1) * 10);
-  --size--x12: calc(var(--size--x1) * 12);
-  --size--x16: calc(var(--size--x1) * 16);
+  --size--x2: 0.5rem;
+  --size--x3: 0.75rem;
+  --size--x4: 1rem;
+  --size--x6: 1.5rem;
+  --size--x8: 2rem;
+  --size--x10: 2.5rem;
+  --size--x12: 3rem;
+  --size--x16: 4rem;
 
-  --border-size--x1: calc(var(--size--x1) * 0.25);
-  --border-size--x2: calc(var(--size--x1) * 0.5);
+  --border-size--x1: 0.0625rem;
+  --border-size--x2: 0.125rem;
 
   --color-dark--shade-1: var(--oc-gray-9);
   --color-dark--shade-2: var(--oc-gray-8);