73 lines
1.1 KiB
SCSS
73 lines
1.1 KiB
SCSS
|
@mixin column($size) {
|
||
|
|
grid-column: span $size;
|
||
|
|
}
|
||
|
|
|
||
|
|
[class*=" col-"],
|
||
|
|
[class^=col-] {
|
||
|
|
width: 100%;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
&>*:last-child {
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin column-list() {
|
||
|
|
&-1 {@include column(1);}
|
||
|
|
&-2 {@include column(2);}
|
||
|
|
&-3 {@include column(3);}
|
||
|
|
&-4 {@include column(4);}
|
||
|
|
&-5 {@include column(5);}
|
||
|
|
&-6 {@include column(6);}
|
||
|
|
&-7 {@include column(7);}
|
||
|
|
&-8 {@include column(8);}
|
||
|
|
&-9 {@include column(9);}
|
||
|
|
&-10 {@include column(10);}
|
||
|
|
&-11 {@include column(11);}
|
||
|
|
&-12 {@include column(12);}
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns {
|
||
|
|
display:grid;
|
||
|
|
grid-gap:$lineheight;
|
||
|
|
grid-template-columns: repeat(12, 1fr);
|
||
|
|
grid-template-rows: auto;
|
||
|
|
padding:$lineheight;
|
||
|
|
&-nogap {
|
||
|
|
grid-gap:0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.column {
|
||
|
|
@include column(12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.col {
|
||
|
|
@include column-list();
|
||
|
|
&-sm {
|
||
|
|
@include sm() {
|
||
|
|
@include column-list();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-md {
|
||
|
|
@include md() {
|
||
|
|
@include column-list();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-lg {
|
||
|
|
@include lg() {
|
||
|
|
@include column-list();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-xl {
|
||
|
|
@include xl() {
|
||
|
|
@include column-list();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-xxl {
|
||
|
|
@include xxl() {
|
||
|
|
@include column-list();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|