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

Merge pull request #56 from adamwathan/zero-in-border-scale

Browse source 
Move zero values to border-width scale instead of hard-coding
This commit is contained in:
Adam Wathan 2017-08-04 14:21:27 -04:00 • committed by GitHub
commit c7cd703b1e
2 changed files with 53 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/generators/border-widths.less
View file

@ -1,7 +1,12 @@
.generate-border-width-utilities(@border-width-scale; @border-color; @i: 1) when (@i <= length(@border-width-scale)) {
@variant: extract(@border-width-scale, @i);
@border-width: extract(@variant, 2);
.generate-border-width-utility(@variant; 0; @border-color) {
.generate-utility-variant('border'; @variant; { border: 0; });
.generate-utility-variant('border-t'; @variant; { border-top: 0; });
.generate-utility-variant('border-r'; @variant; { border-right: 0; });
.generate-utility-variant('border-b'; @variant; { border-bottom: 0; });
.generate-utility-variant('border-l'; @variant; { border-left: 0; });
}
.generate-border-width-utility(@variant; @border-width; @border-color) when not (@border-width = 0) {
.generate-utility-variant('border'; @variant; {
border: @border-width solid @border-color;
});
@ -17,34 +22,52 @@
.generate-utility-variant('border-l'; @variant; {
border-left: @border-width solid @border-color;
});
.generate-border-width-utilities(@border-width-scale; @border-color; @i + 1);
}
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; @i: 1) when (@i <= length(@border-width-scale)) {
@prefix: ~"@{screen-name}\:";
.generate-border-width-utilities(@border-width-scale; @border-color; @i: 1) when (@i <= length(@border-width-scale)) {
@variant: extract(@border-width-scale, @i);
@border-width: extract(@variant, 2);
@media (min-width: @screen-width) {
.generate-utility-variant(~"@{prefix}border"; @variant; {
border: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-t"; @variant; {
border-top: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-r"; @variant; {
border-right: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-b"; @variant; {
border-bottom: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-l"; @variant; {
border-left: @border-width solid @border-color;
});
}
.generate-border-width-utility(@variant; @border-width; @border-color);
.generate-border-width-utilities(@border-width-scale; @border-color; @i + 1);
}
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; (@i + 1));
.generate-screen-border-width-utility(@variant; 0; @border-color; @screen-name) {
@prefix: ~"@{screen-name}\:";
.generate-utility-variant(~"@{prefix}border"; @variant; { border: 0; });
.generate-utility-variant(~"@{prefix}border-t"; @variant; { border-top: 0; });
.generate-utility-variant(~"@{prefix}border-r"; @variant; { border-right: 0; });
.generate-utility-variant(~"@{prefix}border-b"; @variant; { border-bottom: 0; });
.generate-utility-variant(~"@{prefix}border-l"; @variant; { border-left: 0; });
}
.generate-screen-border-width-utility(@variant; @border-width; @border-color; @screen-name) when not (@border-width = 0) {
@prefix: ~"@{screen-name}\:";
.generate-utility-variant(~"@{prefix}border"; @variant; {
border: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-t"; @variant; {
border-top: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-r"; @variant; {
border-right: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-b"; @variant; {
border-bottom: @border-width solid @border-color;
});
.generate-utility-variant(~"@{prefix}border-l"; @variant; {
border-left: @border-width solid @border-color;
});
}
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @i: 1) when (@i <= length(@border-width-scale)) {
@variant: extract(@border-width-scale, @i);
@border-width: extract(@variant, 2);
.generate-screen-border-width-utility(@variant; @border-width; @border-color; @screen-name);
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; (@i + 1));
}
.generate-responsive-border-width-utilities(@border-width-scale; @border-color; @i: 1) when (@i <= length(@screens)) {
@ -52,7 +75,10 @@
@screen-name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width);
@media (min-width: @screen-width) {
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name);
}
.generate-responsive-border-width-utilities(@border-width-scale; @border-color; @i + 1);
}

13
src/utilities/borders.less
View file

@ -23,6 +23,7 @@
'2' 2px,
'4' 4px,
'8' 8px,
'0' 0,
;
.define-border-widths(@border-width-scale; @default-border-color; @screens);
@ -43,13 +44,6 @@
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
// Disablers
.border-0 { border-style: none; }
.border-t-0 { border-top-style: none; }
.border-b-0 { border-bottom-style: none; }
.border-l-0 { border-left-style: none; }
.border-r-0 { border-right-style: none; }
// Radius
.rounded-sm { border-radius: @border-radius-1; }
.rounded-t-sm { border-top-left-radius: @border-radius-1; border-top-right-radius: @border-radius-1; }
@ -75,11 +69,6 @@
.responsive({
&border-dashed { .border-dashed; }
&border-dotted { .border-dotted; }
&border-0 { .border-0; }
&border-t-0 { .border-t-0; }
&border-b-0 { .border-b-0; }
&border-l-0 { .border-l-0; }
&border-r-0 { .border-r-0; }
&rounded-sm { .rounded-sm; }
&rounded-t-sm { .rounded-t-sm; }
&rounded-r-sm { .rounded-r-sm; }