diff --git a/src/generators.less b/src/generators.less index fc6e321df..47816cbdd 100644 --- a/src/generators.less +++ b/src/generators.less @@ -5,6 +5,7 @@ @import "generators/backgrounds"; @import "generators/border-colors"; +@import "generators/border-radius"; @import "generators/border-widths"; @import "generators/constrain"; @import "generators/grid"; diff --git a/src/generators/border-radius.less b/src/generators/border-radius.less new file mode 100644 index 000000000..a3c7c7598 --- /dev/null +++ b/src/generators/border-radius.less @@ -0,0 +1,90 @@ +.generate-rounded-border-utility(@variant; @radius) { + .generate-utility-variant('rounded'; @variant; { + border-radius: @radius; + }); + .generate-utility-variant('rounded-t'; @variant; { + border-top-left-radius: @radius; + border-top-right-radius: @radius; + }); + .generate-utility-variant('rounded-r'; @variant; { + border-top-right-radius: @radius; + border-bottom-right-radius: @radius; + }); + .generate-utility-variant('rounded-b'; @variant; { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; + }); + .generate-utility-variant('rounded-l'; @variant; { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; + }); +} + +.generate-rounded-border-utilities(@rounded-border-scale; @i: 1) when (@i <= length(@rounded-border-scale)) { + @variant: extract(@rounded-border-scale, @i); + @radius: extract(@variant, 2); + + .generate-rounded-border-utility(@variant; @radius); + .generate-rounded-border-utilities(@rounded-border-scale; @i + 1); +} + +.generate-screen-rounded-border-utility(@variant; @radius; @screen-name) { + @prefix: ~"@{screen-name}\:"; + + .generate-utility-variant(~"@{prefix}rounded"; @variant; { + border-radius: @radius; + }); + .generate-utility-variant(~"@{prefix}rounded-t"; @variant; { + border-top-left-radius: @radius; + border-top-right-radius: @radius; + }); + .generate-utility-variant(~"@{prefix}rounded-r"; @variant; { + border-top-right-radius: @radius; + border-bottom-right-radius: @radius; + }); + .generate-utility-variant(~"@{prefix}rounded-b"; @variant; { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; + }); + .generate-utility-variant(~"@{prefix}rounded-l"; @variant; { + border-bottom-left-radius: @radius; + border-top-left-radius: @radius; + }); +} + +.generate-screen-rounded-border-utilities(@rounded-border-scale; @screen-name; @i: 1) when (@i <= length(@rounded-border-scale)) { + @variant: extract(@rounded-border-scale, @i); + @rounded-border: extract(@variant, 2); + + .generate-screen-rounded-border-utility(@variant; @rounded-border; @screen-name); + .generate-screen-rounded-border-utilities(@rounded-border-scale; @screen-name; (@i + 1)); +} + +.generate-responsive-rounded-border-utilities(@rounded-border-scale; @i: 1) when (@i <= length(@screens)) { + @screen: extract(@screens, @i); + @screen-name: extract(@screen, 1); + @screen-width: extract(@screen, 2); + + @media (min-width: @screen-width) { + .generate-screen-rounded-border-utilities(@rounded-border-scale; @screen-name); + } + + .generate-responsive-rounded-border-utilities(@rounded-border-scale; @i + 1); +} + +.define-rounded-borders(@rounded-border-scale) { + & { + .generate-rounded-border-utilities(@rounded-border-scale); + } +} + +.define-rounded-borders(@rounded-border-scale; none) { + .define-rounded-borders(@rounded-border-scale); +} + +.define-rounded-borders(@rounded-border-scale; @screens) when not (@screens = none) { + & { + .generate-rounded-border-utilities(@rounded-border-scale); + .generate-responsive-rounded-border-utilities(@rounded-border-scale); + } +} diff --git a/src/utilities/borders.less b/src/utilities/borders.less index 7353953f4..5f1a88604 100644 --- a/src/utilities/borders.less +++ b/src/utilities/borders.less @@ -1,3 +1,13 @@ +// Widths +@border-width-scale: + default 1px, + '2' 2px, + '4' 4px, + '8' 8px, + '0' 0, +; + +// Colors @border-dark: hsl(0, 0%, 82%); @border-dark-soft: hsl(0, 0%, 90%); @border-dark-softer: hsl(0, 0%, 96%); @@ -8,10 +18,6 @@ @default-border-color: @border-dark-soft; -@border-radius-1: .125rem; -@border-radius-2: .25rem; -@border-radius-3: .5rem; - // Base @border-width-scale: '0' 0, @@ -33,51 +39,26 @@ 'light-softer' @border-light-softer, ; +// Radius +@border-radiuses: + 'sm' .125rem, + default .25rem, + 'lg' .5rem, +; + +.define-border-widths(@border-width-scale; @default-border-color; @screens); .define-border-colors(@border-colors; @screens); +.define-rounded-borders(@border-radiuses; @screens); // Styles .border-dashed { border-style: dashed; } .border-dotted { border-style: dotted; } -// 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; } -.rounded-r-sm { border-top-right-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; } -.rounded-b-sm { border-bottom-left-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; } -.rounded-l-sm { border-top-left-radius: @border-radius-1; border-bottom-left-radius: @border-radius-1; } - -.rounded { border-radius: @border-radius-2; } -.rounded-t { border-top-left-radius: @border-radius-2; border-top-right-radius: @border-radius-2; } -.rounded-r { border-top-right-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; } -.rounded-b { border-bottom-left-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; } -.rounded-l { border-top-left-radius: @border-radius-2; border-bottom-left-radius: @border-radius-2; } - -.rounded-lg { border-radius: @border-radius-3; } -.rounded-t-lg { border-top-left-radius: @border-radius-3; border-top-right-radius: @border-radius-3; } -.rounded-r-lg { border-top-right-radius: @border-radius-3; border-bottom-right-radius: @border-radius-3; } -.rounded-b-lg { border-bottom-left-radius: @border-radius-3; border-bottom-right-radius: @border-radius-3; } -.rounded-l-lg { border-top-left-radius: @border-radius-3; border-bottom-left-radius: @border-radius-3; } - .pill { border-radius: 9999px; } // Responsive .responsive({ &border-dashed { .border-dashed; } &border-dotted { .border-dotted; } - &rounded-sm { .rounded-sm; } - &rounded-t-sm { .rounded-t-sm; } - &rounded-r-sm { .rounded-r-sm; } - &rounded-b-sm { .rounded-b-sm; } - &rounded-l-sm { .rounded-l-sm; } - &rounded { .rounded; } - &rounded-t { .rounded-t; } - &rounded-r { .rounded-r; } - &rounded-b { .rounded-b; } - &rounded-l { .rounded-l; } - &rounded-lg { .rounded-lg; } - &rounded-t-lg { .rounded-t-lg; } - &rounded-r-lg { .rounded-r-lg; } - &rounded-b-lg { .rounded-b-lg; } - &rounded-l-lg { .rounded-l-lg; } &pill { .pill; } });