💄 Adjust grid stack

This commit is contained in:
Manuel Ruwe
2023-01-02 18:25:13 +01:00
parent 3ba90c87c6
commit ade1534005
5 changed files with 281 additions and 216 deletions

View File

@@ -18,19 +18,19 @@
.grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: ($i / 12) * 100 + "%" }
}
@for $i from 1 to 13 {
.grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: ($i / 12) * 100 + "%" }
@for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: $i * 64 + "px" }
.grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: $i * 64 + "px" }
.grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: $i * 64 + "px" }
}
@for $i from 1 to 96 {
@for $i from 1 to 13 {
.grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: ($i / 12) * 100 + "%" }
}
@for $i from 1 to 96 {
.grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: ($i / 12) * 100 + "%" }
.grid-stack>.grid-stack-item[gs-y="#{$i}"] { top: $i * 64 + "px" }
}
.grid-stack>.grid-stack-item>.grid-stack-item-content,
@@ -54,3 +54,19 @@
.grid-stack.grid-stack-animate {
transition: none;
}
@media screen and (max-width: 768px) {
@for $i from 1 to 7 {
.grid-stack>.grid-stack-item[gs-w="#{$i}"] { width: percentage(($i / 6)) !important }
.grid-stack>.grid-stack-item[gs-min-w="#{$i}"] { min-width: percentage(($i / 6)) !important }
.grid-stack>.grid-stack-item[gs-max-w="#{$i}"] { max-width: percentage(($i / 6)) !important }
}
@for $i from 1 to 7 {
.grid-stack>.grid-stack-item[gs-x="#{$i}"] { left: percentage(($i / 6)) }
}
.grid-stack>.grid-stack-item {
min-width: percentage(1/6) !important;
}
}