mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #59 from adamwathan/radius-generators
Add rounded border generators
This commit is contained in:
Adam Wathan
GitHub
commit
6fb076f744
@ -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";
|
||||
|
||||
90
src/generators/border-radius.less
Normal file
90
src/generators/border-radius.less
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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; }
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user