terriajs
Version:
Geospatial data visualization platform.
38 lines (37 loc) • 1.4 kB
JavaScript
import { action } from "mobx";
import styled from "styled-components";
import { withViewState } from "../Context";
const SidePanelContainer = styled.div.attrs(({ viewState }) => ({
className: viewState.topElement === "SidePanel" ? "top-element" : "",
onClick: action(() => {
viewState.topElement = "SidePanel";
}),
onTransitionEnd: () => viewState.triggerResizeEvent()
})) `
display: flex;
flex-direction: column;
position: absolute;
left: ${(p) => p.theme.workbenchMargin}px;
top: ${(p) => p.theme.workbenchMargin}px;
height: calc(100% - 2 * ${(p) => p.theme.workbenchMargin}px);
z-index: 100;
background: ${(p) => p.theme.transparentDark};
backdrop-filter: ${(p) => p.theme.blur};
font-family: ${(p) => p.theme.fontPop}px;
width: ${(p) => p.theme.workbenchWidth}px;
flex-basis: ${(p) => p.theme.workbenchWidth}px;
max-width: ${(p) => p.theme.workbenchWidth}px;
box-sizing: border-box;
h1 {
margin: 0;
}
/* slide in/out animation */
transition: all 0.25s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
visibility: ${(p) => (p.show ? "visible" : "hidden")};
opacity: ${(p) => (p.show ? 1 : 0)};
margin-left: ${(p) => (p.show ? "0px" : `-${p.theme.workbenchWidth}px`)};
border-radius: ${(p) => p.theme.radiusXL};
`;
export default withViewState(SidePanelContainer);
//# sourceMappingURL=SidePanelContainer.js.map