@navinc/base-react-components
Version:
Nav's Pattern Library
32 lines • 1.37 kB
JavaScript
import { styled, css } from 'styled-components';
import { spaceKeyNumbers } from '../../themes/spacing.js';
const flexColumnMixin = css `
display: flex;
flex-direction: column;
`;
export const flexColumnCssMap = spaceKeyNumbers.reduce((acc, spaceKeyNumber) => {
acc[`space${spaceKeyNumber}`] = css `
${flexColumnMixin}
gap: ${({ theme }) => theme.spacing[`space${spaceKeyNumber}`]};
`;
return acc;
}, {});
const flexColumnFactory = (spacingToken) => styled.div `
${flexColumnCssMap[`space${spacingToken}`]}
`;
export const FlexColumn0 = flexColumnFactory(0);
export const FlexColumn25 = flexColumnFactory(25);
export const FlexColumn50 = flexColumnFactory(50);
export const FlexColumn75 = flexColumnFactory(75);
export const FlexColumn100 = flexColumnFactory(100);
export const FlexColumn150 = flexColumnFactory(150);
export const FlexColumn200 = flexColumnFactory(200);
export const FlexColumn250 = flexColumnFactory(250);
export const FlexColumn300 = flexColumnFactory(300);
export const FlexColumn350 = flexColumnFactory(350);
export const FlexColumn400 = flexColumnFactory(400);
export const FlexColumn500 = flexColumnFactory(500);
export const FlexColumn600 = flexColumnFactory(600);
export const FlexColumn800 = flexColumnFactory(800);
export const FlexColumn1000 = flexColumnFactory(1000);
//# sourceMappingURL=flex-column.js.map