facebook/sapling
1
1
Fork 0
mirror of https://github.com/facebook/sapling.git synced 2024-08-17 06:20:24 +03:00
Code Issues Projects Releases Wiki Activity

TopLevelToast: fine tune CSS

Browse Source 
Summary:
Apply CSS to the `AnimatedReorderGroup` `div` directly so we can use flexbox
for layout. This seems nicer since `translate` might render at sub-pixel
(non-integer `px`) that looks blurry.

Reviewed By: evangrayk

Differential Revision: D52851255

fbshipit-source-id: 0f6753a00bc7f124f4acc33006335feca85616de
This commit is contained in:
Jun Wu 2024-01-17 17:52:10 -08:00 committed by Facebook GitHub Bot
parent 1db39538a7
commit 25d6b85bb2
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
addons/isl/src/TopLevelToast.css
View File

@ -7,15 +7,19 @@
.toast-container {
position: fixed;
display: flex;
bottom: calc(var(--pad) * 3);
left: 50%;
left: 0;
width: 100%;
z-index: 1001;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.tooltip.toast {
position: inherit;
position: relative;
margin-bottom: var(--pad);
transform: translateX(-50%);
cursor: default;
width: fit-content;
pointer-events: auto;
}

6
addons/isl/src/TopLevelToast.tsx
View File

@ -24,9 +24,5 @@ export function TopLevelToast() {
);
});
return (
<div className="toast-container">
<AnimatedReorderGroup>{toastDivs}</AnimatedReorderGroup>
</div>
);
return <AnimatedReorderGroup className="toast-container">{toastDivs}</AnimatedReorderGroup>;
}