Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
border-color: ${colors.INDIGO_MILK_CAP};
.toggle {
border-color: ${colors.INDIGO_MILK_CAP};
left: 10px;
}
`;
}
if (!props.checked) {
return css`
border-color: ${colors.INDIGO_MILK_CAP};
`;
}
return css`
color: ${colors.INDIGO_MILK_CAP};
background-color: #ffffff;
border-color: ${colors.INDIGO_MILK_CAP};
`;
/* eslint-enable consistent-return */
};
import styled, { css } from "styled-components";
import { transparentize } from "polished";
import { colors } from "@crave/farmblocks-theme";
const hoverBgColor = transparentize(0.94, colors.INDIGO_MILK_CAP);
const hoverChildBgColor = transparentize(0.9, colors.BLUE_CORN);
// Equivalent to GREY_16 over white
// Semi-transparent borders don't work well with colSpan
const borderColor = "#d3dadc";
const border = `1px solid ${borderColor}`;
const borderTop = props =>
props.selectionHeaderVisible &&
css`
border-top: none;
`;
const stickyHeaderCss = ({ stickyHeader, stickyHeaderTopOffset }) =>
stickyHeader &&
css`
padding-right: 16px;
}
&.corner-icon {
position: relative;
padding-left: 40px;
}
/* corner icon for grouped rows */
&.corner-icon:before {
content: "";
float: left;
box-sizing: border-box;
width: 8px;
height: 8px;
border-left: 2px solid ${colors.INDIGO_MILK_CAP};
border-bottom: 2px solid ${colors.INDIGO_MILK_CAP};
position: absolute;
top: calc(50% - 3px);
left: 16px;
}
& .checkbox {
height: 16px;
label {
/* Increase the hit area of the checkbox
This is important for tables with onRowClick */
padding: 8px;
margin: -8px;
}
}
OFF_NEUTRAL,
} from "./buttonTypes";
export default {
[PRIMARY]: {
color: colorConstants.TANGERINE,
hoverColor: colorConstants.TANGERINE_2,
},
[NEUTRAL]: {
textColor: colorConstants.OYSTER,
iconColor: colorConstants.GREY_32,
textHoverColor: colorConstants.INDIGO_MILK_CAP,
color: "#FFFFFF",
},
[SECONDARY]: {
color: colorConstants.INDIGO_MILK_CAP,
hoverColor: colorConstants.BLUE_CORN,
},
[POSITIVE]: {
color: colorConstants.LETTUCE,
hoverColor: colorConstants.AVOCADO,
},
[NEGATIVE]: {
color: colorConstants.STRAWBERRY,
hoverColor: colorConstants.TOMATO,
},
[CLOSED]: {
color: colorConstants.GRAPE,
hoverColor: colorConstants.EGGPLANT,
},
[OFF_NEUTRAL]: {
color: colorConstants.GREY_16,
import { colors as colorConstants } from "@crave/farmblocks-theme";
import linkTypes from "./linkTypes";
export default {
[linkTypes.FEATURED]: colorConstants.BLUE_CORN,
[linkTypes.NEUTRAL]: colorConstants.INDIGO_MILK_CAP,
[linkTypes.NORMAL]: colorConstants.BLUE_CORN,
[linkTypes.WHITE]: colorConstants.WHITE_56,
};
SECONDARY,
POSITIVE,
NEGATIVE,
CLOSED,
OFF_NEUTRAL,
} from "./buttonTypes";
export default {
[PRIMARY]: {
color: colorConstants.TANGERINE,
hoverColor: colorConstants.TANGERINE_2,
},
[NEUTRAL]: {
textColor: colorConstants.OYSTER,
iconColor: colorConstants.GREY_32,
textHoverColor: colorConstants.INDIGO_MILK_CAP,
color: "#FFFFFF",
},
[SECONDARY]: {
color: colorConstants.INDIGO_MILK_CAP,
hoverColor: colorConstants.BLUE_CORN,
},
[POSITIVE]: {
color: colorConstants.LETTUCE,
hoverColor: colorConstants.AVOCADO,
},
[NEGATIVE]: {
color: colorConstants.STRAWBERRY,
hoverColor: colorConstants.TOMATO,
},
[CLOSED]: {
color: colorConstants.GRAPE,
import { colors as colorConstants } from "@crave/farmblocks-theme";
import AlertTypes from "./alertTypes";
export default {
[AlertTypes.NEWS]: colorConstants.INDIGO_MILK_CAP,
[AlertTypes.POSITIVE]: colorConstants.LETTUCE,
[AlertTypes.NEGATIVE]: colorConstants.STRAWBERRY,
[AlertTypes.ATTENTION]: colorConstants.CORN,
};
const StyledInfo = styled.div`
display: flex;
align-items: baseline;
.icon {
display: inline-block;
margin: 0 4px;
cursor: pointer;
color: ${colorConstants.OYSTER};
.farmblocks-icon {
font-size: 1.2em;
}
}
.icon:hover, .hovered {
color: ${colorConstants.INDIGO_MILK_CAP};
}
}`;
export default StyledInfo;
const enabledStyles = props =>
(props.disabled &&
css`
.visibleInput {
color: ${colors.GREY_16};
background: currentColor;
}
`) ||
css`
cursor: pointer;
&:hover .visibleInput,
& .hiddenInput:focus + .visibleInput {
color: ${colors.INDIGO_MILK_CAP};
border-width: 2px;
}
`;
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;
};