mirror of
https://github.com/facebook/sapling.git
synced 2024-10-26 19:11:50 +03:00
TopLevelToast: fine tune CSS
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:
parent
1db39538a7
commit
25d6b85bb2
@ -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;
|
||||
}
|
||||
|
@ -24,9 +24,5 @@ export function TopLevelToast() {
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="toast-container">
|
||||
<AnimatedReorderGroup>{toastDivs}</AnimatedReorderGroup>
|
||||
</div>
|
||||
);
|
||||
return <AnimatedReorderGroup className="toast-container">{toastDivs}</AnimatedReorderGroup>;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user