87 lines
2.6 KiB
Text
87 lines
2.6 KiB
Text
.generate-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@margin-scale)) {
|
|
@spacer: extract(@margin-scale, @i);
|
|
|
|
@n: extract(@spacer, 1);
|
|
@size: extract(@spacer, 2);
|
|
|
|
.define-class(~"mt-@{n}", { margin-top: @size; });
|
|
.define-class(~"mr-@{n}", { margin-right: @size; });
|
|
.define-class(~"mb-@{n}", { margin-bottom: @size; });
|
|
.define-class(~"ml-@{n}", { margin-left: @size; });
|
|
.define-class(~"my-@{n}", {
|
|
margin-top: @size;
|
|
margin-bottom: @size;
|
|
});
|
|
.define-class(~"mx-@{n}", {
|
|
margin-right: @size;
|
|
margin-left: @size;
|
|
});
|
|
.define-class(~"m-@{n}", {
|
|
margin-top: @size;
|
|
margin-right: @size;
|
|
margin-bottom: @size;
|
|
margin-left: @size;
|
|
});
|
|
|
|
.generate-margin-utilities(@margin-scale; @i + 1);
|
|
}
|
|
|
|
.generate-screen-margin-utilities(@margin-scale; @screen; @i: 1) when (@i <= length(@margin-scale)) {
|
|
@prefix: ~"@{screen}\:";
|
|
@spacer: extract(@margin-scale, @i);
|
|
@n: extract(@spacer, 1);
|
|
@size: extract(@spacer, 2);
|
|
|
|
.define-class(~"@{prefix}mt-@{n}", { margin-top: @size; });
|
|
.define-class(~"@{prefix}mr-@{n}", { margin-right: @size; });
|
|
.define-class(~"@{prefix}mb-@{n}", { margin-bottom: @size; });
|
|
.define-class(~"@{prefix}ml-@{n}", { margin-left: @size; });
|
|
.define-class(~"@{prefix}my-@{n}", {
|
|
margin-top: @size;
|
|
margin-bottom: @size;
|
|
});
|
|
.define-class(~"@{prefix}mx-@{n}", {
|
|
margin-right: @size;
|
|
margin-left: @size;
|
|
});
|
|
.define-class(~"@{prefix}m-@{n}", {
|
|
margin-top: @size;
|
|
margin-right: @size;
|
|
margin-bottom: @size;
|
|
margin-left: @size;
|
|
});
|
|
|
|
.generate-screen-margin-utilities(@margin-scale; @screen; (@i + 1));
|
|
}
|
|
|
|
.generate-responsive-margin-utilities(@margin-scale; @screens; @i: 1) when (@i <= length(@screens)) {
|
|
@screen: extract(@screens, @i);
|
|
@name: extract(@screen, 1);
|
|
@screen-width: extract(@screen, 2);
|
|
|
|
@media (min-width: @screen-width) {
|
|
@prefix: ~"@{name}\:";
|
|
.@{prefix}ml-auto { margin-left: auto; }
|
|
.@{prefix}mr-auto { margin-right: auto; }
|
|
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
|
|
.generate-screen-margin-utilities(@margin-scale; @name);
|
|
}
|
|
|
|
.generate-responsive-margin-utilities(@margin-scale; @screens; @i + 1);
|
|
}
|
|
|
|
.define-margin-utilities(@margin-scale) {
|
|
.ml-auto { margin-left: auto; }
|
|
.mr-auto { margin-right: auto; }
|
|
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
.generate-margin-utilities(@margin-scale);
|
|
}
|
|
|
|
.define-margin-utilities(@margin-scale; none) {
|
|
.define-margin-utilities(@margin-scale);
|
|
}
|
|
|
|
.define-margin-utilities(@margin-scale; @screens) when not (@screens = none) {
|
|
.define-margin-utilities(@margin-scale);
|
|
.generate-responsive-margin-utilities(@margin-scale; @screens);
|
|
}
|