vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
119 lines (113 loc) • 2.38 kB
JavaScript
export default {
nav: ({
theme: {
colors: { grey1, grey8, grey6 },
nav
},
reverseOut,
textAlign
}) => ({
position: "relative",
display: "flex",
justifyContent: textAlign === "center" ? "center" : "flex-start",
zIndex: 10,
width: "100%",
background: reverseOut ? grey1 : grey8,
boxSizing: "border-box",
height: 55,
":before": {
content: "''",
display: "block",
background: reverseOut ? grey1 : grey6,
height: 1,
outline: "none",
position: "absolute",
left: 0,
right: 0,
zIndex: -1,
bottom: 0
},
...nav
}),
backButton: ({
theme: {
breakpoints,
colors: { grey1, white }
},
reverseOut,
showBackButtonOn = []
}) => ({
fontSize: 15,
padding: "17px 20px",
fontWeight: 200,
whiteSpace: "nowrap",
flexShrink: "0",
color: reverseOut ? white : grey1,
display: showBackButtonOn.some(size => size === "s") ? "inline" : "none",
"> svg": {
marginRight: 8
},
":hover > svg": {
transform: "translateX(-5px)"
},
[breakpoints.onlyM]: {
display: showBackButtonOn.some(size => size === "m") ? "inline" : "none"
},
[breakpoints.fromL]: {
display: showBackButtonOn.some(size => size === "l") ? "inline" : "none"
}
}),
backButtonText: ({ theme: { breakpoints } }) => ({
[breakpoints.onlyS]: {
display: "none"
}
}),
navItemGroup: ({ textAlign, isScrolling }) => ({
display: "flex",
justifyContent:
textAlign === "center" && !isScrolling ? "center" : "flex-start",
overflowX: "auto",
WebkitOverflowScrolling: "touch",
position: "relative",
overflowY: "hidden",
whiteSpace: "nowrap",
flexGrow: 0,
height: "100%",
padding: "0 0 40px 0px",
boxSizing: "border-box"
}),
navItemGroupInner: ({ showBackButton }) => ({
padding: `0 20px 0 ${showBackButton ? 0 : 20}px`
}),
centeredLayoutLeft: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
display: "flex",
alignItems: "center",
justifyContent: "flex-start"
},
centeredLayoutLeftInner: {
marginRight: "auto",
display: "flex",
height: "100%"
},
centeredLayoutRight: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
display: "flex"
},
centeredLayoutRightInner: {
marginLeft: "auto"
},
centeredLayoutCenter: {
display: "flex",
whiteSpace: "noWrap"
},
centeredLayoutCenterInner: {
overflowX: "auto",
WebkitOverflowScrolling: "touch",
overflowY: "hidden"
}
};