Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
);
// story helper components
const TopNav = styled.div`
box-sizing: border-box;
display: flex;
align-items: center;
padding: 8px;
height: 56px;
box-shadow: 0px 1px 1px 0px ${colors.GREY_32};
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: white;
z-index: ${({ isPush }) => (!isPush ? 90 : 101)};
`;
const NavHeader = styled.div`
display: flex;
align-items: center;
padding: 8px;
min-height: 56px;
box-sizing: border-box;
overflow-x: hidden;
`;
const switchBackground = props => {
if (props.disabled) {
return colors.GREY_32;
}
if (props.checked) {
return colors.LETTUCE;
}
return colors.SUGAR;
};
import styled, { css } from "styled-components";
import { colors as colorConstants } from "@crave/farmblocks-theme";
import tagTypes from "../../constants/tagTypes";
const rightPadding = props => (props.removable ? "1px" : "8px");
const typeStyles = {
[tagTypes.SECONDARY]: css`
background-color: ${colorConstants.INDIGO_MILK_CAP};
color: white;
&:hover {
border-color: ${colorConstants.GREY_32};
background-color: ${colorConstants.BLUE_CORN};
}
&:hover .close-icon,
&:focus .close-icon {
color: white;
}
`,
[tagTypes.NEUTRAL]: css`
background-color: ${colorConstants.SUGAR};
color: ${colorConstants.OYSTER};
&:hover {
background-color: ${colorConstants.GREY_16};
}
`,
[FULLSCREEN]: fullScreenStyle,
[OVERLAY]: overlayStyle,
[PUSH]: pushStyle,
};
export const SideBar = styled.nav`
box-sizing: border-box;
position: fixed;
bottom: 0;
${({ position }) => position}: 0;
top: ${({ offsetTop }) => offsetTop};
overflow-x: hidden;
transition: width 0.25s, padding-right 0.25s, padding-left 0.25s;
transition-timing-function: ease-in-out;
background: ${({ backgroundColor }) => backgroundColor};
box-shadow: 0px 2px 2px 0px ${colors.GREY_32};
z-index: ${({ zIndex }) => zIndex};
${({ variant }) => variantsStyle[variant] || ""};
`;
SideBar.propTypes = {
backgroundColor: PropTypes.string.isRequired,
collapsedWidth: PropTypes.string.isRequired,
expandedWidth: PropTypes.string.isRequired,
variant: PropTypes.oneOf([PUSH, FULLSCREEN, OVERLAY]).isRequired,
render: PropTypes.func,
offsetTop: PropTypes.string,
expanded: PropTypes.bool,
highlightColor: PropTypes.string,
zIndex: PropTypes.number,
position: PropTypes.oneOf(["right", "left"]),
const labelColor = props => {
if (props.focused) {
return colors.INDIGO_MILK_CAP;
}
if (props.invalid) {
return colors.STRAWBERRY;
}
if (props.disabled && !props.protected) {
return colors.GREY_32;
}
return colors.CARBON;
};
left: 0;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
${space}
${flexbox}
`;
export const Overlay = styled.div`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: ${colors.GREY_32};
`;
export const CardWrapper = styled(animated.div)`
max-width: 100%;
max-height: 100%;
`;
export const ConstrainedCard = styled(Card)`
max-height: 100%;
max-width: 100%;
min-width: 200px;
position: relative;
display: flex;
flex-direction: column;
border: none;
overflow: hidden;
${props => -(props.activeItem * stepDistance(props))}px
);
transition: transform ${props => props.itemConfig.transitionTime}s;
will-change: transform;
li {
margin: ${props => props.itemConfig.margin}px;
min-width: ${props => props.itemConfig.width}px;
width: ${props => props.itemConfig.width}px;
height: ${props => props.itemConfig.height}px;
transition: all ${props => props.itemConfig.transitionTime}s;
will-change: transform;
.image {
box-shadow: 0 4px 40px 0 ${colors.GREY_32};
}
&.active {
transform: scale(${scale});
transform-origin: bottom;
margin: 0 ${activeItemMargin}px;
}
}
}
`;
export default Container;
color: ${props => (props.disabled ? colors.GREY_32 : colors.CARBON)};
background: none;
import styled, { css } from "styled-components";
import { colors } from "@crave/farmblocks-theme";
import { TOP, CENTER } from "./constants/positions";
const Container = styled.div`
position: relative;
z-index: ${props => props.zIndex};
@media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: ${colors.GREY_32};
position: fixed;
}
`;
const centerAlignment = css`
left: 50%;
transform: translateX(-50%);
`;
const positionXStyle = coordinate => ({ positionX }) => {
if (positionX === CENTER) {
return centerAlignment;
}
return css`
${positionX}: ${coordinate};
&.fade-enter-done {
transform: scale(1);
opacity: 1;
}
`;
const interactiveStyle = css`
cursor: pointer;
bottom: ${props => props.pinSize / 2 + 8}px;
color: ${colors.GREY_16};
&:active {
transform: translateY(2px);
color: ${colors.GREY_32};
}
`;
const Balloon = styled(Card).attrs({ overflow: "hidden", p: 0 })`
${props => props.animated && animation};
position: absolute;
bottom: ${props => props.pinSize + 8}px;
${props => alignStyles[props.align]};
height: ${props => props.balloonSize}px;
width: ${props => props.balloonSize}px;
padding: 0;
border-radius: ${props => props.borderRadius};
border: none;
box-shadow: 0 2px 16px 0 ${colors.GREY_16};