mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #52 from adamwathan/border-width-generator
Generate border widths instead of hard-coding
This commit is contained in:
Adam Wathan
GitHub
commit
e5ec718e13
@ -4,6 +4,7 @@
|
||||
|
||||
@import "generators/backgrounds";
|
||||
@import "generators/border-colors";
|
||||
@import "generators/border-widths";
|
||||
@import "generators/constrain";
|
||||
@import "generators/grid";
|
||||
@import "generators/text-colors";
|
||||
|
||||
74
src/generators/border-widths.less
Normal file
74
src/generators/border-widths.less
Normal file
@ -0,0 +1,74 @@
|
||||
.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-utility-variant('border'; @variant; {
|
||||
border: @border-width solid @border-color;
|
||||
});
|
||||
.generate-utility-variant('border-t'; @variant; {
|
||||
border-top: @border-width solid @border-color;
|
||||
});
|
||||
.generate-utility-variant('border-r'; @variant; {
|
||||
border-right: @border-width solid @border-color;
|
||||
});
|
||||
.generate-utility-variant('border-b'; @variant; {
|
||||
border-bottom: @border-width solid @border-color;
|
||||
});
|
||||
.generate-utility-variant('border-l'; @variant; {
|
||||
border-left: @border-width solid @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)) {
|
||||
@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; {
|
||||
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));
|
||||
}
|
||||
|
||||
.generate-responsive-border-width-utilities(@border-width-scale; @border-color; @i: 1) when (@i <= length(@screens)) {
|
||||
@screen: extract(@screens, @i);
|
||||
@screen-name: extract(@screen, 1);
|
||||
@screen-width: extract(@screen, 2);
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.define-border-widths(@border-width-scale; @border-color) {
|
||||
& {
|
||||
.generate-border-width-utilities(@border-width-scale; @border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.define-border-widths(@border-width-scale; @border-color; none) {
|
||||
.define-border-widths(@border-width-scale; @border-color);
|
||||
}
|
||||
|
||||
.define-border-widths(@border-width-scale; @border-color; @screens) when not (@screens = none) {
|
||||
& {
|
||||
.generate-border-width-utilities(@border-width-scale; @border-color);
|
||||
.generate-responsive-border-width-utilities(@border-width-scale; @border-color);
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
@border-light-softer: hsl(0, 0%, 35%);
|
||||
|
||||
@border-default-color: @border-dark-soft;
|
||||
@default-border-color: @border-dark-soft;
|
||||
|
||||
@border-radius-1: .125rem;
|
||||
@border-radius-2: .25rem;
|
||||
@ -18,40 +19,13 @@
|
||||
@border-width-8: 8px;
|
||||
|
||||
// Base
|
||||
.border { border: @border-width-1 solid @border-default-color; }
|
||||
.border-t { border-top: @border-width-1 solid @border-default-color; }
|
||||
.border-b { border-bottom: @border-width-1 solid @border-default-color; }
|
||||
.border-l { border-left: @border-width-1 solid @border-default-color; }
|
||||
.border-r { border-right: @border-width-1 solid @border-default-color; }
|
||||
|
||||
.border-2 { border: @border-width-2 solid @border-default-color; }
|
||||
.border-t-2 { border-top: @border-width-2 solid @border-default-color; }
|
||||
.border-b-2 { border-bottom: @border-width-2 solid @border-default-color; }
|
||||
.border-l-2 { border-left: @border-width-2 solid @border-default-color; }
|
||||
.border-r-2 { border-right: @border-width-2 solid @border-default-color; }
|
||||
|
||||
.border-4 { border: @border-width-4 solid @border-default-color; }
|
||||
.border-t-4 { border-top: @border-width-4 solid @border-default-color; }
|
||||
.border-b-4 { border-bottom: @border-width-4 solid @border-default-color; }
|
||||
.border-l-4 { border-left: @border-width-4 solid @border-default-color; }
|
||||
.border-r-4 { border-right: @border-width-4 solid @border-default-color; }
|
||||
|
||||
.border-8 { border: @border-width-8 solid @border-default-color; }
|
||||
.border-t-8 { border-top: @border-width-8 solid @border-default-color; }
|
||||
.border-b-8 { border-bottom: @border-width-8 solid @border-default-color; }
|
||||
.border-l-8 { border-left: @border-width-8 solid @border-default-color; }
|
||||
.border-r-8 { border-right: @border-width-8 solid @border-default-color; }
|
||||
|
||||
// Styles
|
||||
.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; }
|
||||
@border-width-scale:
|
||||
default 1px,
|
||||
'2' 2px,
|
||||
'4' 4px,
|
||||
'8' 8px,
|
||||
;
|
||||
.define-border-widths(@border-width-scale; @default-border-color; @screens);
|
||||
|
||||
// Colors
|
||||
@border-colors:
|
||||
@ -63,8 +37,20 @@
|
||||
'light-soft' @border-light-soft,
|
||||
'light-softer' @border-light-softer,
|
||||
;
|
||||
|
||||
.define-border-colors(@border-colors; @screens);
|
||||
|
||||
// Styles
|
||||
.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; }
|
||||
@ -88,26 +74,6 @@
|
||||
|
||||
// Responsive
|
||||
.responsive({
|
||||
&border { .border; }
|
||||
&border-t { .border-t; }
|
||||
&border-b { .border-b; }
|
||||
&border-l { .border-l; }
|
||||
&border-r { .border-r; }
|
||||
&border-2 { .border-2; }
|
||||
&border-t-2 { .border-t-2; }
|
||||
&border-b-2 { .border-b-2; }
|
||||
&border-l-2 { .border-l-2; }
|
||||
&border-r-2 { .border-r-2; }
|
||||
&border-4 { .border-4; }
|
||||
&border-t-4 { .border-t-4; }
|
||||
&border-b-4 { .border-b-4; }
|
||||
&border-l-4 { .border-l-4; }
|
||||
&border-r-4 { .border-r-4; }
|
||||
&border-8 { .border-8; }
|
||||
&border-t-8 { .border-t-8; }
|
||||
&border-b-8 { .border-b-8; }
|
||||
&border-l-8 { .border-l-8; }
|
||||
&border-r-8 { .border-r-8; }
|
||||
&border-dashed { .border-dashed; }
|
||||
&border-dotted { .border-dotted; }
|
||||
&border-0 { .border-0; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user