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

Move zero to border scale, don't include style/color in zero variants

Browse Source
This commit is contained in:
Adam Wathan 2017-08-04 12:57:27 -04:00
parent e4fde61c73
commit 2e45fa3f91
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
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,14 +22,30 @@
.generate-utility-variant('border-l'; @variant; {
border-left: @border-width solid @border-color;
});
}
.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; @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) when (@i <= length(@border-width-scale)) {
.generate-screen-border-width-utility(@variant; 0; @border-color; @screen-name; @screen-width) {
@prefix: ~"@{screen-name}\:";
@media (min-width: @screen-width) {
.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; @screen-width) when not (@border-width = 0) {
@prefix: ~"@{screen-name}\:";
@variant: extract(@border-width-scale, @i);
@border-width: extract(@variant, 2);
@media (min-width: @screen-width) {
.generate-utility-variant(~"@{prefix}border"; @variant; {
@ -43,7 +64,13 @@
border-left: @border-width solid @border-color;
});
}
}
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; @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; @screen-width);
.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; (@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; }