diff options
| author | Eric Bailey <git@esb.lol> | 2025-06-24 22:03:23 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-06-24 22:03:23 -0500 |
| commit | 4c1515169af81f5eb861e476d2bc07f17c8635fd (patch) | |
| tree | 37be0de4769da65b3afde1cd1f890afecde14f3b /src/style.css | |
| parent | cd820709b611a0381222a34d2bc6ff49fa380452 (diff) | |
| download | voidsky-4c1515169af81f5eb861e476d2bc07f17c8635fd.tar.zst | |
Tooltip (#8555)
* Working overlay, WIP * Ok working with no overlay and global gesture handler * Ok pretty good on native * Cleanup * Cleanup * add animation * add transform origin to animation * Some a11y * Improve colors * Explicitly wrap gesture handler * Add easier abstraction * Web * Fix animation * Cleanup and remove provider * Include demo for now * Ok diff interface to avoid collapsed views * Use dimensions hook * Adjust overlap, clarify intent of consts * Revert testing edits --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css index a4a2c455f..35ffe0d3a 100644 --- a/src/style.css +++ b/src/style.css @@ -334,3 +334,38 @@ input[type='range'][orient='vertical']::-moz-range-thumb { min-width: var(--radix-select-trigger-width); max-height: var(--radix-select-content-available-height); } + +/* + * #/components/Tooltip/index.web.tsx + */ +.radix-popover-content { + animation-duration: 300ms; + animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1); + will-change: transform, opacity; +} +.radix-popover-content[data-state='open'][data-side='top'] { + animation-name: radixPopoverSlideUpAndFade; +} +.radix-popover-content[data-state='open'][data-side='bottom'] { + animation-name: radixPopoverSlideDownAndFade; +} +@keyframes radixPopoverSlideUpAndFade { + from { + opacity: 0; + transform: translateY(2px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes radixPopoverSlideDownAndFade { + from { + opacity: 0; + transform: translateY(-2px); + } + to { + opacity: 1; + transform: translateY(0); + } +} |