@re-flex/ui
Version:
Re-Flex ui library
51 lines (50 loc) • 1.98 kB
JavaScript
import { styled } from "@re-flex/styles";
import { convertUnit2Rem } from "@re-flex/utils";
import { Box } from "..";
export const StepWrapperBase = styled(Box)(({ direction, theme }) => ({
position: "relative",
transition: `height ${theme.transitions.duration.complex} ${theme.transitions.easing.linear}, padding-bottom ${theme.transitions.duration.complex} ${theme.transitions.easing.linear}`,
display: "flex",
flexDirection: direction === "vertical" ? "row" : "column",
}));
export const StepHeaderBase = styled(Box)(({ direction, theme }) => ({
display: "flex",
alignItems: "center",
flexDirection: direction === "horizontal" ? "row" : "column",
alignSelf: direction === "vertical" ? "flex-start" : undefined,
}));
export const StepHeaderBaseDivider = styled("div")(({ direction, theme }) => ({
flex: "1 1 auto",
display: "flex",
flexDirection: direction === "horizontal" ? "row" : "column",
marginLeft: convertUnit2Rem(theme.space),
marginRight: convertUnit2Rem(theme.space),
"& span": {
width: "100%",
height: convertUnit2Rem(theme.space / 4),
backgroundColor: "var(--typography-color)",
opacity: "0.2",
},
}));
export const StepInner = styled("div")(({ direction, theme }) => ({
overflowX: "hidden",
flexDirection: direction === "horizontal" ? "row" : "column",
boxSizing: "content-box",
}));
export const StepContentBase = styled("div")(({ direction, theme }) => ({
position: "relative",
display: "flex",
direction: "ltr",
flexDirection: "row",
willChange: "transform",
transition: `transform ${theme.transitions.duration.complex}ms cubic-bezier(0.42, 0.57, 0.76, 0.88) 0s`,
}));
export const StepContentItemBase = styled("div")(({ direction, theme }) => ({
flexShrink: "0",
width: "100%",
}));
export const StepFooterBase = styled("div")(({ direction }) => ({
display: "flex",
alignItems: "center",
flexDirection: "row",
}));