Hallo liebe Bastlergemeinde,
ich würde gerne in den Spaltenanzahl der Einkaufswelten anpassen für den Masonry-Effekt.
In der emotion.less gibt es gleich ganz oben die Festlegung wie viele Spalten beim Masonry-Effekt auf welchem Gerät generiert werden. Ich kann auch in der orginal Datei die Spaltenanzahl verändern und es funktioniert dann auch wie gewünscht.
Wenn ich aber in meinem eigenen Template in meiner emotion.less den entsprechenden Teil kopiere und anpasse gibt es einen Fehler, sodass das Theme nicht kompiliert wird.
Hat jemand eine Ahnung wie ich das hinbekomme oder wo das Problem liegt, dass ich keinen Override dafür erstellen kann ?!
Ansonsten wäre das die perfekte Lösung um mit dem Masonry-Effekt auf allen Devices die Ausgabe nach meinem Wunsch zu steuern.
Tausend Dank im Voraus
.createColumnSizes(@n, @i: 1) when (@i =< @n) {
&.emotion--mode-resize {
&.emotion--column-@{n} .column--@{i} {
width: (100% / @n * @i);
}
}
&.emotion--mode-masonry {
&.emotion--column-@{n} .column--@{i} {
width: 100%;
}
}
@media screen and(min-width: @phoneLandscapeViewportWidth) {
@columns: 2;
&.emotion--mode-masonry {
&.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
width: (100% / @columns * @i);
}
}
}
@media screen and(min-width: @tabletViewportWidth) {
@columns: 3;
&.emotion--mode-masonry {
&.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
width: (100% / @columns * @i);
}
}
}
@media screen and(min-width: @tabletLandscapeViewportWidth) {
@columns: 3;
&.emotion--mode-masonry {
&.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
width: (100% / @columns * @i);
}
}
}
@media screen and(min-width: @desktopViewportWidth) {
&.emotion--mode-masonry {
&.emotion--column-@{n} .column--@{i} {
width: (100% / @n * @i);
}
}
}
.createColumnSizes(@n, (@i + 1));
}