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

Add constrain generators

Browse source
This commit is contained in:
Adam Wathan 2017-08-03 10:42:58 -04:00
parent c5ece08691
commit 545ccde07e
3 changed files with 40 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/generators.less
View file

@ -25,6 +25,8 @@
@import "generators/border-colors";
@import "generators/constrain";
@import "generators/text-colors";
@import "generators/text-weights";
@import "generators/text-sizes";

26
src/generators/constrain.less Normal file
View file

@ -0,0 +1,26 @@
.generate-constrain-utility(@variant; @size) {
.define-selector(~"constrain-@{variant}"; {
max-width: @size;
flex-basis: @size;
});
}
.generate-constrain-utilities(@size-variants; @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-constrain-utility(@name; @size);
}
.generate-constrain-utilities(@size-variants; @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-constrain-utility(@name; @size);
.generate-constrain-utilities(@size-variants; @i + 1);
}
.define-constrains(@size-variants) {
.generate-constrain-utilities(@size-variants);
}

21
src/utilities/constrain.less
View file

@ -8,15 +8,18 @@
@constrain-4xl: 90rem;
@constrain-5xl: 100rem;
.constrain-xs { max-width: @constrain-xs; flex-basis: @constrain-xs; }
.constrain-sm { max-width: @constrain-sm; flex-basis: @constrain-sm; }
.constrain-md { max-width: @constrain-md; flex-basis: @constrain-md; }
.constrain-lg { max-width: @constrain-lg; flex-basis: @constrain-lg; }
.constrain-xl { max-width: @constrain-xl; flex-basis: @constrain-xl; }
.constrain-2xl { max-width: @constrain-2xl; flex-basis: @constrain-2xl; }
.constrain-3xl { max-width: @constrain-3xl; flex-basis: @constrain-3xl; }
.constrain-4xl { max-width: @constrain-4xl; flex-basis: @constrain-4xl; }
.constrain-5xl { max-width: @constrain-5xl; flex-basis: @constrain-5xl; }
@constrain-scale:
'xs' @constrain-xs,
'sm' @constrain-sm,
'md' @constrain-md,
'lg' @constrain-lg,
'xl' @constrain-xl,
'2xl' @constrain-2xl,
'3xl' @constrain-3xl,
'4xl' @constrain-4xl,
'5xl' @constrain-5xl;
.define-constrains(@constrain-scale);
.responsive({
&constrain-xs { .constrain-xs; }