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

Add responsive constrain generator

Browse Source
This commit is contained in:
Adam Wathan 2017-08-03 11:49:24 -04:00
parent 99a218f92c
commit 4c93b3f1ce
2 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/generators/constrain.less
View File

@ -21,6 +21,49 @@
.generate-constrain-utilities(@size-variants; @i + 1);
}
.generate-screen-constrain-utility(@variant; @size; @screen-name; @screen-width) {
@media (min-width: @screen-width) {
.define-selector(~"@{screen-name}\:constrain-@{variant}"; {
max-width: @size;
flex-basis: @size;
});
}
}
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
@name: extract(@size-variants, 1);
@size: extract(@size-variants, 2);
.generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
}
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
@variant: extract(@size-variants, @i);
@name: extract(@variant, 1);
@size: extract(@variant, 2);
.generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i + 1);
}
.generate-responsive-constrain-utilities(@size-variants; @screens; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@screen-name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width);
.generate-responsive-constrain-utilities(@size-variants; @screens; @i + 1);
}
.define-constrains(@size-variants) {
.generate-constrain-utilities(@size-variants);
}
.define-constrains(@size-variants) when (@screens = none) {
.generate-constrain-utilities(@size-variants);
}
.define-constrains(@size-variants; @screens) {
.generate-constrain-utilities(@size-variants);
.generate-responsive-constrain-utilities(@size-variants; @screens);
}

14
src/utilities/constrain.less
View File

@ -19,16 +19,4 @@
'4xl' @constrain-4xl,
'5xl' @constrain-5xl;
.define-constrains(@constrain-scale);
.responsive({
&constrain-xs { .constrain-xs; }
&constrain-sm { .constrain-sm; }
&constrain-md { .constrain-md; }
&constrain-lg { .constrain-lg; }
&constrain-xl { .constrain-xl; }
&constrain-2xl { .constrain-2xl; }
&constrain-3xl { .constrain-3xl; }
&constrain-4xl { .constrain-4xl; }
&constrain-5xl { .constrain-5xl; }
});
.define-constrains(@constrain-scale; @screens);