wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Start extracting generators

Browse source
This commit is contained in:
Adam Wathan 2017-08-01 18:59:26 -04:00
parent 8ae008951d
commit 5319c64822
6 changed files with 54 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/generators.less Normal file
View file

@ -0,0 +1,2 @@
@import "generators/backgrounds";
@import "generators/borders";

23
src/generators/backgrounds.less Normal file
View file

@ -0,0 +1,23 @@
.generate-bg-utility(@name; @variant; @color) when (@variant = none) {
.bg-@{name} { background-color: @color; }
}
.generate-bg-utility(@name; @variant; @color) when not (@variant = none) {
.bg-@{name}-@{variant} { background-color: @color; }
}
.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
@variant-name: extract(@color-variants, 1);
@variant-color: extract(@color-variants, 2);
.generate-bg-utility(@color-name; @variant-name; @variant-color);
}
.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
@variant: extract(@color-variants, @i);
@variant-name: extract(@variant, 1);
@variant-color: extract(@variant, 2);
.generate-bg-utility(@color-name; @variant-name; @variant-color);
.generate-backgrounds(@color-name; @color-variants; @i + 1);
}

27
src/generators/borders.less Normal file
View file

@ -0,0 +1,27 @@
.generate-border-color-utility(@name; @variant; @color) when (@variant = none) {
.border-@{name} {
border-color: @color;
}
}
.generate-border-color-utility(@name; @variant; @color) when not (@variant = none) {
.border-@{name}-@{variant} {
border-color: @color;
}
}
.generate-border-colors(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
@variant-name: extract(@color-variants, 1);
@variant-color: extract(@color-variants, 2);
.generate-border-color-utility(@color-name; @variant-name; @variant-color);
}
.generate-border-colors(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
@variant: extract(@color-variants, @i);
@variant-name: extract(@variant, 1);
@variant-color: extract(@variant, 2);
.generate-border-color-utility(@color-name; @variant-name; @variant-color);
.generate-border-colors(@color-name; @color-variants; @i + 1);
}

2
src/utilities.less
View file

@ -1,3 +1,5 @@
@import "generators";
@import "colors";
@import "utilities/backgrounds";

24
src/utilities/backgrounds.less
View file

@ -10,30 +10,6 @@
@bg-highlight: hsl(215, 99%, 63%);
.generate-bg-utility(@name; @variant; @color) when (@variant = none) {
.bg-@{name} { background-color: @color; }
}
.generate-bg-utility(@name; @variant; @color) when not (@variant = none) {
.bg-@{name}-@{variant} { background-color: @color; }
}
.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
@variant-name: extract(@color-variants, 1);
@variant-color: extract(@color-variants, 2);
.generate-bg-utility(@color-name; @variant-name; @variant-color);
}
.generate-backgrounds(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
@variant: extract(@color-variants, @i);
@variant-name: extract(@variant, 1);
@variant-color: extract(@variant, 2);
.generate-bg-utility(@color-name; @variant-name; @variant-color);
.generate-backgrounds(@color-name; @color-variants; @i + 1);
}
.bg-light { background-color: @bg-light; }
.bg-light-soft { background-color: @bg-light-soft; }
.bg-light-softer { background-color: @bg-light-softer; }

28
src/utilities/borders.less
View file

@ -18,34 +18,6 @@
@border-width-3: 4px;
@border-width-4: 8px;
.generate-border-color-utility(@name; @variant; @color) when (@variant = none) {
.border-@{name} {
border-color: @color;
}
}
.generate-border-color-utility(@name; @variant; @color) when not (@variant = none) {
.border-@{name}-@{variant} {
border-color: @color;
}
}
.generate-border-colors(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
@variant-name: extract(@color-variants, 1);
@variant-color: extract(@color-variants, 2);
.generate-border-color-utility(@color-name; @variant-name; @variant-color);
}
.generate-border-colors(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
@variant: extract(@color-variants, @i);
@variant-name: extract(@variant, 1);
@variant-color: extract(@variant, 2);
.generate-border-color-utility(@color-name; @variant-name; @variant-color);
.generate-border-colors(@color-name; @color-variants; @i + 1);
}
// Base
.border { border: @border-width-1 solid @border-default-color; }
.border-t { border-top: @border-width-1 solid @border-default-color; }