diff --git a/src/generators/border-widths.less b/src/generators/border-widths.less index 78ba15a98..e1dc031a7 100644 --- a/src/generators/border-widths.less +++ b/src/generators/border-widths.less @@ -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)); } diff --git a/src/utilities/borders.less b/src/utilities/borders.less index 2027d88db..b7e360023 100644 --- a/src/utilities/borders.less +++ b/src/utilities/borders.less @@ -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; }