fix(tooltip): animation transform defined in tooltip instead of inher…

…ited
adobe · Nov 7, 2023 · 51f31f5 · 51f31f5
1 parent 36e25dc
commit 51f31f5
Showing 1 changed file with 8 additions and 17 deletions.
diff --git a/components/tooltip/index.css b/components/tooltip/index.css
@@ -122,7 +122,6 @@ governing permissions and limitations under the License.
   }
 
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
     @inherit: %spectrum-overlay--open;
   }
 
@@ -400,8 +399,7 @@ governing permissions and limitations under the License.
 
   /* tooltip animates upward ⬆ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--top--open;
+    transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
   }
 }
 
@@ -416,8 +414,7 @@ governing permissions and limitations under the License.
 
   /* Tooltip animates downward ⬇ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--bottom--open;
+    transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
   }
 }
 
@@ -430,8 +427,7 @@ governing permissions and limitations under the License.
 
   /* Tooltip animates to right ⮕ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--right--open;
+    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
   }
 }
 
@@ -444,8 +440,7 @@ governing permissions and limitations under the License.
 
   /* Tooltip animates to left ⬅ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--left--open;
+    transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
   }
 }
 
@@ -458,15 +453,13 @@ governing permissions and limitations under the License.
 
   /* LTR read, tooltip animates towards left ⬅ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--left--open;
+    transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
   }
 
   /* RTL read, tooltip animates towards right ⮕ */
   [dir="rtl"] & {
     &.is-open {
-      --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-      @inherit: %spectrum-overlay--right--open;
+      transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
     }
   }
 }
@@ -480,15 +473,13 @@ governing permissions and limitations under the License.
 
   /* LTR read, tooltip animates towards right ⮕ */
   &.is-open {
-    --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-    @inherit: %spectrum-overlay--right--open;
+    transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
   }
 
   /* RTL read, tooltip animates towards left ⬅ */
   [dir="rtl"] & {
     &.is-open {
-      --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
-      @inherit: %spectrum-overlay--left--open;
+      transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
     }
   }
 }