Merge pull request #53 from adamwathan/spacing-parameterized
Refactor spacing generators to take screens as a parameter
This commit is contained in:
Adam Wathan
GitHub
commit
d0e782c877
6 changed files with 250 additions and 214 deletions
|
|
@ -10,4 +10,6 @@
|
|||
@import "generators/text-colors";
|
||||
@import "generators/text-weights";
|
||||
@import "generators/text-sizes";
|
||||
@import "generators/spacing";
|
||||
@import "generators/spacing-padding";
|
||||
@import "generators/spacing-margin";
|
||||
@import "generators/spacing-pull";
|
||||
|
|
|
|||
85
src/generators/spacing-margin.less
Normal file
85
src/generators/spacing-margin.less
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
.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; @screen-width; @i: 1) when (@i <= length(@margin-scale)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@margin-scale, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.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; @screen-width; (@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);
|
||||
|
||||
.generate-screen-margin-utilities(@margin-scale; @name; @screen-width);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
@prefix: ~"@{name}\:";
|
||||
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
|
||||
}
|
||||
|
||||
.generate-responsive-margin-utilities(@margin-scale; @screens; @i + 1);
|
||||
}
|
||||
|
||||
.define-margin-utilities(@margin-scale) {
|
||||
.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);
|
||||
}
|
||||
79
src/generators/spacing-padding.less
Normal file
79
src/generators/spacing-padding.less
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.generate-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@padding-scale)) {
|
||||
@spacer: extract(@padding-scale, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.define-class(~"pt-@{n}", { padding-top: @size; });
|
||||
.define-class(~"pr-@{n}", { padding-right: @size; });
|
||||
.define-class(~"pb-@{n}", { padding-bottom: @size; });
|
||||
.define-class(~"pl-@{n}", { padding-left: @size; });
|
||||
.define-class(~"py-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
});
|
||||
.define-class(~"px-@{n}", {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
.define-class(~"p-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-right: @size;
|
||||
padding-bottom: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
|
||||
.generate-padding-utilities(@padding-scale; @i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@padding-scale, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.define-class(~"@{prefix}pt-@{n}", { padding-top: @size; });
|
||||
.define-class(~"@{prefix}pr-@{n}", { padding-right: @size; });
|
||||
.define-class(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
|
||||
.define-class(~"@{prefix}pl-@{n}", { padding-left: @size; });
|
||||
.define-class(~"@{prefix}py-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
});
|
||||
.define-class(~"@{prefix}px-@{n}", {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
.define-class(~"@{prefix}p-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-right: @size;
|
||||
padding-bottom: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
}
|
||||
|
||||
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-padding-utilities(@padding-scale; @screens; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 2);
|
||||
|
||||
.generate-screen-padding-utilities(@padding-scale; @name; @screen-width);
|
||||
.generate-responsive-padding-utilities(@padding-scale; @screens; @i + 1);
|
||||
}
|
||||
|
||||
.define-padding-utilities(@padding-scale) {
|
||||
.generate-padding-utilities(@padding-scale);
|
||||
}
|
||||
|
||||
.define-padding-utilities(@padding-scale; none) {
|
||||
.define-padding-utilities(@padding-scale);
|
||||
}
|
||||
|
||||
.define-padding-utilities(@padding-scale; @screens) when not (@screens = none) {
|
||||
.define-padding-utilities(@padding-scale);
|
||||
.generate-responsive-padding-utilities(@padding-scale; @screens);
|
||||
}
|
||||
79
src/generators/spacing-pull.less
Normal file
79
src/generators/spacing-pull.less
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.generate-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@pull-scale)) {
|
||||
@spacer: extract(@pull-scale, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.define-class(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
|
||||
.define-class(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
|
||||
.define-class(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
|
||||
.define-class(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
|
||||
.define-class(~"pull-y-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"pull-x-@{n}", {
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"pull-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-right: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
|
||||
.generate-pull-utilities(@pull-scale; @i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@pull-scale, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.define-class(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-y-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"@{prefix}pull-x-@{n}", {
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"@{prefix}pull-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-right: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
}
|
||||
|
||||
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-pull-utilities(@pull-scale; @screens; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 2);
|
||||
|
||||
.generate-screen-pull-utilities(@pull-scale; @name; @screen-width);
|
||||
.generate-responsive-pull-utilities(@pull-scale; @screens; @i + 1);
|
||||
}
|
||||
|
||||
.define-pull-utilities(@pull-scale) {
|
||||
.generate-pull-utilities(@pull-scale);
|
||||
}
|
||||
|
||||
.define-pull-utilities(@pull-scale; none) {
|
||||
.define-pull-utilities(@pull-scale);
|
||||
}
|
||||
|
||||
.define-pull-utilities(@pull-scale; @screens) when not (@screens = none) {
|
||||
.define-pull-utilities(@pull-scale);
|
||||
.generate-responsive-pull-utilities(@pull-scale; @screens);
|
||||
}
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
.generate-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@padding-scale)) {
|
||||
@spacer: extract(@padding-scale, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.define-class(~"pt-@{n}", { padding-top: @size; });
|
||||
.define-class(~"pr-@{n}", { padding-right: @size; });
|
||||
.define-class(~"pb-@{n}", { padding-bottom: @size; });
|
||||
.define-class(~"pl-@{n}", { padding-left: @size; });
|
||||
.define-class(~"py-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
});
|
||||
.define-class(~"px-@{n}", {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
.define-class(~"p-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-right: @size;
|
||||
padding-bottom: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
|
||||
.generate-padding-utilities(@padding-scale; @i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@padding-scale, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.define-class(~"@{prefix}pt-@{n}", { padding-top: @size; });
|
||||
.define-class(~"@{prefix}pr-@{n}", { padding-right: @size; });
|
||||
.define-class(~"@{prefix}pb-@{n}", { padding-bottom: @size; });
|
||||
.define-class(~"@{prefix}pl-@{n}", { padding-left: @size; });
|
||||
.define-class(~"@{prefix}py-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-bottom: @size;
|
||||
});
|
||||
.define-class(~"@{prefix}px-@{n}", {
|
||||
padding-right: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
.define-class(~"@{prefix}p-@{n}", {
|
||||
padding-top: @size;
|
||||
padding-right: @size;
|
||||
padding-bottom: @size;
|
||||
padding-left: @size;
|
||||
});
|
||||
}
|
||||
|
||||
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 2);
|
||||
|
||||
.generate-screen-padding-utilities(@padding-scale; @name; @screen-width);
|
||||
.generate-responsive-padding-utilities(@padding-scale; @i + 1);
|
||||
}
|
||||
|
||||
.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; @screen-width; @i: 1) when (@i <= length(@margin-scale)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@margin-scale, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.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; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 2);
|
||||
|
||||
.generate-screen-margin-utilities(@margin-scale; @name; @screen-width);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
@prefix: ~"@{name}\:";
|
||||
.@{prefix}mx-auto { margin-left: auto; margin-right: auto; }
|
||||
}
|
||||
|
||||
.generate-responsive-margin-utilities(@margin-scale; @i + 1);
|
||||
}
|
||||
|
||||
.generate-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@pull-scale)) {
|
||||
@spacer: extract(@pull-scale, @i);
|
||||
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
.define-class(~"pull-t-@{n}", { margin-top: ~"-@{size}"; });
|
||||
.define-class(~"pull-r-@{n}", { margin-right: ~"-@{size}"; });
|
||||
.define-class(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
|
||||
.define-class(~"pull-l-@{n}", { margin-left: ~"-@{size}"; });
|
||||
.define-class(~"pull-y-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"pull-x-@{n}", {
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"pull-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-right: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
|
||||
.generate-pull-utilities(@pull-scale; @i + 1);
|
||||
}
|
||||
|
||||
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) {
|
||||
@prefix: ~"@{screen}\:";
|
||||
@spacer: extract(@pull-scale, @i);
|
||||
@n: extract(@spacer, 1);
|
||||
@size: extract(@spacer, 2);
|
||||
|
||||
@media (min-width: @screen-width) {
|
||||
.define-class(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; });
|
||||
.define-class(~"@{prefix}pull-y-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"@{prefix}pull-x-@{n}", {
|
||||
margin-right: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
.define-class(~"@{prefix}pull-@{n}", {
|
||||
margin-top: ~"-@{size}";
|
||||
margin-right: ~"-@{size}";
|
||||
margin-bottom: ~"-@{size}";
|
||||
margin-left: ~"-@{size}";
|
||||
});
|
||||
}
|
||||
|
||||
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; (@i + 1));
|
||||
}
|
||||
|
||||
.generate-responsive-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 2);
|
||||
|
||||
.generate-screen-pull-utilities(@pull-scale; @name; @screen-width);
|
||||
.generate-responsive-pull-utilities(@pull-scale; @i + 1);
|
||||
}
|
||||
|
|
@ -22,14 +22,11 @@
|
|||
@margin-scale: @spacing-scale;
|
||||
@pull-scale: @spacing-scale;
|
||||
|
||||
.generate-padding-utilities(@padding-scale);
|
||||
.generate-margin-utilities(@margin-scale);
|
||||
.generate-pull-utilities(@pull-scale);
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
.define-padding-utilities(@padding-scale; @screens);
|
||||
.define-margin-utilities(@margin-scale; @screens);
|
||||
.define-pull-utilities(@pull-scale; @screens);
|
||||
|
||||
.generate-responsive-padding-utilities(@padding-scale);
|
||||
.generate-responsive-margin-utilities(@margin-scale);
|
||||
.generate-responsive-pull-utilities(@pull-scale);
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
.responsive({
|
||||
&mx-auto { .mx-auto; }
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue