smart-react-components/grid/Column.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Div = require('../element/Div.js');

var RATIOS = [0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100];

const customKeys = {
    col: v => `
        flex: 0 0 ${RATIOS[v]}%;
        max-width: ${RATIOS[v]}%;
    `,
    offset: v => `left:${RATIOS[v]}%;`,
    push: v => `margin-left:${RATIOS[v]}%;`,
    pull: v => `margin-left:-${RATIOS[v]}%;`
};
var Column = styled__default(Div).attrs(({ theme, px }) => ({
    customKeys,
    px: typeof px === "undefined" ? theme.src.grid.columnGap : px
})) `
    position: relative;
    width: 100%;
    box-sizing: border-box;
`;

module.exports = Column;