From 2e45fa3f91f36bbeefaa69f025711ef3119d1fa4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 4 Aug 2017 12:57:27 -0400 Subject: [PATCH 1/3] Move zero to border scale, don't include style/color in zero variants --- src/generators/border-widths.less | 39 ++++++++++++++++++++++++++----- src/utilities/borders.less | 13 +---------- 2 files changed, 34 insertions(+), 18 deletions(-) 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; } From a2ce542038aaf5ff9438035b58fe86af521d5812 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 4 Aug 2017 12:58:48 -0400 Subject: [PATCH 2/3] Consolidate some media queries --- src/generators/border-widths.less | 48 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/src/generators/border-widths.less b/src/generators/border-widths.less index e1dc031a7..4ad1a01b5 100644 --- a/src/generators/border-widths.less +++ b/src/generators/border-widths.less @@ -35,35 +35,31 @@ .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-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}\:"; - @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-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; @screen-width; @i: 1) when (@i <= length(@border-width-scale)) { @@ -79,7 +75,9 @@ @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; @screen-width); + } .generate-responsive-border-width-utilities(@border-width-scale; @border-color; @i + 1); } From 51bad776a560dbcec32466e8e7e8b9247d089db9 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 4 Aug 2017 13:00:51 -0400 Subject: [PATCH 3/3] Removed unused mixin parameters --- src/generators/border-widths.less | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/generators/border-widths.less b/src/generators/border-widths.less index 4ad1a01b5..743f40d20 100644 --- a/src/generators/border-widths.less +++ b/src/generators/border-widths.less @@ -32,7 +32,7 @@ .generate-border-width-utilities(@border-width-scale; @border-color; @i + 1); } -.generate-screen-border-width-utility(@variant; 0; @border-color; @screen-name; @screen-width) { +.generate-screen-border-width-utility(@variant; 0; @border-color; @screen-name) { @prefix: ~"@{screen-name}\:"; .generate-utility-variant(~"@{prefix}border"; @variant; { border: 0; }); @@ -42,7 +42,7 @@ .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) { +.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; { @@ -62,12 +62,12 @@ }); } -.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-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; @screen-width); - .generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; (@i + 1)); + .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)) { @@ -76,8 +76,9 @@ @screen-width: extract(@screen, 2); @media (min-width: @screen-width) { - .generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @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); }