react-jam-ui/components/Grid/styles.styl

React JAM UI components

$default = json('default.json', { hash: true });
$layoutDefault = json('../Layout/default.json', { hash: true });
$custom = json('../../../../ui.config.json', { hash: true, optional: true });

$grid = typeof($custom) != 'null' ? $custom.$grid : $default.$grid;
$breakpoints = typeof($custom) != 'null' ? $custom.$breakpoints : $layoutDefault.$breakpoints;

make-cols($params) {
    
    [class*='col-'] {
        padding-left: $params.gap;
        padding-right: $params.gap;
        position: relative;
        min-height: 1px;
    }

    for name, params in $breakpoints {        
        @media screen and (min-width: params.breakpoint) {
            for num in (1..$params.cols) {
                .col-{name}-{num} {
                    width: (num/$params.cols) * 100%;
                    float: left;
                    margin: 0;
                }
            }
        }

        @media screen and (max-width: params.breakpoint - 1px) {
            .row > [class*={'col-' + name + '-'}] {
                margin-top: $params.gap;
                margin-bottom: $params.gap;
            }
        }
    }
}

make-row($params) {
    margin-left: -1 * $params.gap;
    margin-right: -1 * $params.gap;

    &:after {
        clear: both;
        content: '';
        display: block;
    }

    make-cols($params)
}

.row {
    for type, params in $grid {
        if (type == 'default') {
            & {
                make-row(params)
            }
        } else {
            &-{type} {
                make-row(params)
            }
        }
    }
}