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

React JAM UI components

@import '../variables.styl';

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;
                }
            }
        }
    }
}

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)
            }
        }
    }
}