wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Define mx-auto alongside scale variants to group media queries

Browse source
This commit is contained in:
Adam Wathan 2017-08-15 14:06:00 -04:00
parent ae9f134c97
commit d3e0facc13
2 changed files with 22 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/generators/spacing-margin.less
View file

@ -26,34 +26,32 @@
.generate-margin-utilities(@margin-scale; @i + 1);
}
.generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; @i: 1) when (@i <= length(@margin-scale)) {
.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);
@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;
});
}
.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-screen-margin-utilities(@margin-scale; @screen; (@i + 1));
}
.generate-responsive-margin-utilities(@margin-scale; @screens; @i: 1) when (@i <= length(@screens)) {
@ -61,17 +59,17 @@
@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-screen-margin-utilities(@margin-scale; @name);
}
.generate-responsive-margin-utilities(@margin-scale; @screens; @i + 1);
}
.define-margin-utilities(@margin-scale) {
.mx-auto { margin-left: auto; margin-right: auto; }
.generate-margin-utilities(@margin-scale);
}

5
src/utilities/spacing.less
View file

@ -16,8 +16,3 @@
.define-padding-utilities(@padding-scale; @screens);
.define-margin-utilities(@margin-scale; @screens);
.define-pull-utilities(@pull-scale; @screens);
.mx-auto { margin-left: auto; margin-right: auto; }
.responsive({
&mx-auto { .mx-auto; }
});