Skip to content

Commit f98b8a1

Browse files
Melissa Thompsonpfulton
authored andcommitted
fix(tooltip): custom animation distance overrides overlay value
1 parent ee4a017 commit f98b8a1

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

components/tooltip/index.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ governing permissions and limitations under the License.
122122
}
123123

124124
&.is-open {
125+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
125126
@inherit: %spectrum-overlay--open;
126127
}
127128

@@ -399,6 +400,7 @@ governing permissions and limitations under the License.
399400

400401
/* tooltip animates upward ⬆ */
401402
&.is-open {
403+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
402404
@inherit: %spectrum-overlay--top--open;
403405
}
404406
}
@@ -414,6 +416,7 @@ governing permissions and limitations under the License.
414416

415417
/* Tooltip animates downward ⬇ */
416418
&.is-open {
419+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
417420
@inherit: %spectrum-overlay--bottom--open;
418421
}
419422
}
@@ -427,6 +430,7 @@ governing permissions and limitations under the License.
427430

428431
/* Tooltip animates to right ⮕ */
429432
&.is-open {
433+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
430434
@inherit: %spectrum-overlay--right--open;
431435
}
432436
}
@@ -440,6 +444,7 @@ governing permissions and limitations under the License.
440444

441445
/* Tooltip animates to left ⬅ */
442446
&.is-open {
447+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
443448
@inherit: %spectrum-overlay--left--open;
444449
}
445450
}
@@ -453,12 +458,14 @@ governing permissions and limitations under the License.
453458

454459
/* LTR read, tooltip animates towards left ⬅ */
455460
&.is-open {
461+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
456462
@inherit: %spectrum-overlay--left--open;
457463
}
458464

459465
/* RTL read, tooltip animates towards right ⮕ */
460466
[dir="rtl"] & {
461467
&.is-open {
468+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
462469
@inherit: %spectrum-overlay--right--open;
463470
}
464471
}
@@ -473,12 +480,14 @@ governing permissions and limitations under the License.
473480

474481
/* LTR read, tooltip animates towards right ⮕ */
475482
&.is-open {
483+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
476484
@inherit: %spectrum-overlay--right--open;
477485
}
478486

479487
/* RTL read, tooltip animates towards left ⬅ */
480488
[dir="rtl"] & {
481489
&.is-open {
490+
--spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance));
482491
@inherit: %spectrum-overlay--left--open;
483492
}
484493
}

0 commit comments

Comments
 (0)