@navinc/base-react-components
Version:
Nav's Pattern Library
45 lines (42 loc) • 1.21 kB
JavaScript
import styled from 'styled-components';
import Copy from './copy';
import Icon from './icon.js';
const PlanTableIcon = styled(Copy) `
text-align: center;
`;
export const FeatureName = styled(Copy) ``;
export const FeatureIcon = styled(PlanTableIcon) `
& > ${Icon} {
fill: ${({ theme }) => theme.greenSheen400};
}
`;
export const MissingFeatureIcon = styled(PlanTableIcon) `
& > ${Icon} {
fill: ${({ theme }) => theme.copperRed200};
}
`;
export const StyledHR = styled.hr `
border-top: 1px solid ${({ theme }) => theme.neutral200};
`;
export const PlansTable = styled.div `
display: grid;
grid-template-columns: 3fr 1fr;
align-items: flex-end;
margin: 24px 0;
& > ${StyledHR} {
grid-column: 1 / -1;
}
& > ${FeatureIcon}, ${FeatureName}, ${MissingFeatureIcon} {
border-top: 1px solid ${({ theme }) => theme.neutral200};
align-self: flex-start;
}
& > ${FeatureIcon}, ${FeatureName}, ${MissingFeatureIcon} {
padding: 16px 0;
}
`;
PlansTable.Divider = StyledHR;
PlansTable.FeatureIcon = FeatureIcon;
PlansTable.MissingFeatureIcon = MissingFeatureIcon;
PlansTable.FeatureName = FeatureName;
export default PlansTable;
//# sourceMappingURL=plans-table.js.map