archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #78 from adamwathan/group-spacing-breakpoints

Browse Source 
Group media queries for padding and pull utilities
This commit is contained in:
Adam Wathan 2017-08-16 09:00:22 -04:00 committed by GitHub
commit 6e26f14d0a
2 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/generators/spacing-padding.less
View File

@ -26,34 +26,32 @@
.generate-padding-utilities(@padding-scale; @i + 1);
}
.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) {
.generate-screen-padding-utilities(@padding-scale; @screen; @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;
});
}
.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-screen-padding-utilities(@padding-scale; @screen; (@i + 1));
}
.generate-responsive-padding-utilities(@padding-scale; @screens; @i: 1) when (@i <= length(@screens)) {
@ -61,7 +59,10 @@
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-padding-utilities(@padding-scale; @name; @screen-width);
@media (min-width: @screen-width) {
.generate-screen-padding-utilities(@padding-scale; @name);
}
.generate-responsive-padding-utilities(@padding-scale; @screens; @i + 1);
}

47
src/generators/spacing-pull.less
View File

@ -26,34 +26,32 @@
.generate-pull-utilities(@pull-scale; @i + 1);
}
.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) {
.generate-screen-pull-utilities(@pull-scale; @screen; @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}";
});
}
.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-screen-pull-utilities(@pull-scale; @screen; (@i + 1));
}
.generate-responsive-pull-utilities(@pull-scale; @screens; @i: 1) when (@i <= length(@screens)) {
@ -61,7 +59,10 @@
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-pull-utilities(@pull-scale; @name; @screen-width);
@media (min-width: @screen-width) {
.generate-screen-pull-utilities(@pull-scale; @name);
}
.generate-responsive-pull-utilities(@pull-scale; @screens; @i + 1);
}