angular2-boiler-plate/public/css/grid.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@import 'mixin.less';

.sui-content {
    max-width: 980px;
    margin: auto
}

.sui-row-padding,
.sui-row-padding>.sui-half,
.sui-row-padding>.sui-third,
.sui-row-padding>.sui-twothird,
.sui-row-padding>.sui-threequarter,
.sui-row-padding>.sui-quarter,
.sui-row-padding>.sui-col {
    padding: 0 8px
}

.sui-container {
    padding: 0.01em 16px
}

.sui-col,
.sui-half,
.sui-third,
.sui-twothird,
.sui-threequarter,
.sui-quarter {
    float: left;
    width: 100%
}

.sui-col.s1 {
    width: 8.33333%
}

.sui-col.s2 {
    width: 16.66666%
}

.sui-col.s3 {
    width: 24.99999%
}

.sui-col.s4 {
    width: 33.33333%
}

.sui-col.s5 {
    width: 41.66666%
}

.sui-col.s6 {
    width: 49.99999%
}

.sui-col.s7 {
    width: 58.33333%
}

.sui-col.s8 {
    width: 66.66666%
}

.sui-col.s9 {
    width: 74.99999%
}

.sui-col.s10 {
    width: 83.33333%
}

.sui-col.s11 {
    width: 91.66666%
}

.sui-col.s12,
.sui-half,
.sui-third,
.sui-twothird,
.sui-threequarter,
.sui-quarter {
    width: 99.99999%
}

@media @tablet {
    .sui-col.m1 {
        width: 8.33333%
    }
    .sui-col.m2 {
        width: 16.66666%
    }
    .sui-col.m3,
    .sui-quarter {
        width: 24.99999%
    }
    .sui-col.m4,
    .sui-third {
        width: 33.33333%
    }
    .sui-col.m5 {
        width: 41.66666%
    }
    .sui-col.m6,
    .sui-half {
        width: 49.99999%
    }
    .sui-col.m7 {
        width: 58.33333%
    }
    .sui-col.m8,
    .sui-twothird {
        width: 66.66666%
    }
    .sui-col.m9,
    .sui-threequarter {
        width: 74.99999%
    }
    .sui-col.m10 {
        width: 83.33333%
    }
    .sui-col.m11 {
        width: 91.66666%
    }
    .sui-col.m12 {
        width: 99.99999%
    }
}

@media @desktop {
    .sui-col.l1 {
        width: 8.33333%
    }
    .sui-col.l2 {
        width: 16.66666%
    }
    .sui-col.l3,
    .sui-quarter {
        width: 24.99999%
    }
    .sui-col.l4,
    .sui-third {
        width: 33.33333%
    }
    .sui-col.l5 {
        width: 41.66666%
    }
    .sui-col.l6,
    .sui-half {
        width: 49.99999%
    }
    .sui-col.l7 {
        width: 58.33333%
    }
    .sui-col.l8,
    .sui-twothird {
        width: 66.66666%
    }
    .sui-col.l9,
    .sui-threequarter {
        width: 74.99999%
    }
    .sui-col.l10 {
        width: 83.33333%
    }
    .sui-col.l11 {
        width: 91.66666%
    }
    .sui-col.l12 {
        width: 99.99999%
    }
}

@media @desktop-xl {
    .sui-col.xl1 {
        width: 8.33333%
    }
    .sui-col.xl2 {
        width: 16.66666%
    }
    .sui-col.xl3,
    .sui-quarter {
        width: 24.99999%
    }
    .sui-col.xl4,
    .sui-third {
        width: 33.33333%
    }
    .sui-col.xl5 {
        width: 41.66666%
    }
    .sui-col.xl6,
    .sui-half {
        width: 49.99999%
    }
    .sui-col.xl7 {
        width: 58.33333%
    }
    .sui-col.xl8,
    .sui-twothird {
        width: 66.66666%
    }
    .sui-col.xl9,
    .sui-threequarter {
        width: 74.99999%
    }
    .sui-col.xl10 {
        width: 83.33333%
    }
    .sui-col.xl11 {
        width: 91.66666%
    }
    .sui-col.xl12 {
        width: 99.99999%
    }
}