angular2-boiler-plate
Version:
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
215 lines (196 loc) • 3.33 kB
text/less
@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%
}
}