kspace-bludit-theme/scss/core/_columns.scss
2024-04-10 20:58:16 +02:00

72 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();
}
}
}