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

Use generic generators for bg colors

Browse source
This commit is contained in:
Adam Wathan 2017-08-03 15:34:42 -04:00
parent 250600eae8
commit 25cceb5a16
2 changed files with 21 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/generators/backgrounds.less
View file

@ -1,27 +1,18 @@
.generate-bg-color-utility(@name; @variant; @color) when (@variant = default) {
.define-selector(~"bg-@{name}"; { background-color: @color; });
.define-bg-color(@color-name; @variants) {
.generate-utility-variants(~"bg-@{color-name}"; @variants; {
background-color: extract(@__variant-value, 2);
});
}
.generate-bg-color-utility(@name; @variant; @color) when not (@variant = default) {
.define-selector(~"bg-@{name}-@{variant}"; { background-color: @color; });
.define-bg-color(@color-name; @variants; none) {
.define-bg-color(@color-name; @variants);
}
.generate-bg-color-utilities(@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-color-utility(@color-name; @variant-name; @variant-color);
.define-bg-color(@color-name; @variants; @screens) when not (@screens = none) {
.define-bg-color(@color-name; @variants);
.generate-responsive-utility-variants(~"bg-@{color-name}"; @variants; @screens; {
background-color: extract(@__variant-value, 2);
});
}
.generate-bg-color-utilities(@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-color-utility(@color-name; @variant-name; @variant-color);
.generate-bg-color-utilities(@color-name; @color-variants; @i + 1);
}
.define-bg-color(@color-name; @color-variants) {
.generate-bg-color-utilities(@color-name; @color-variants);
}

31
src/utilities/backgrounds.less
View file

@ -6,26 +6,15 @@
@bg-dark-soft: hsl(0, 0%, 42%);
@bg-dark-softer: hsl(0, 0%, 52%);
.bg-light { background-color: @bg-light; }
.bg-light-soft { background-color: @bg-light-soft; }
.bg-light-softer { background-color: @bg-light-softer; }
@bg-light-scale:
default @bg-light,
'soft' @bg-light-soft,
'softer' @bg-light-softer;
.hover-bg-light { &:hover { .bg-light; } }
.hover-bg-light-soft { &:hover { .bg-light-soft; } }
.hover-bg-light-softer { &:hover { .bg-light-softer; } }
@bg-dark-scale:
default @bg-dark,
'soft' @bg-dark-soft,
'softer' @bg-dark-softer;
.bg-dark { background-color: @bg-dark; }
.bg-dark-soft { background-color: @bg-dark-soft; }
.bg-dark-softer { background-color: @bg-dark-softer; }
.bg-overlay-softest { background-color: rgba(0,0,0,0.15); }
.bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
.bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
.responsive({
&bg-light { .bg-light; }
&bg-light-soft { .bg-light-soft; }
&bg-light-softer { .bg-light-softer; }
&bg-overlay-soft { .bg-overlay-soft; }
&bg-overlay-dark { .bg-overlay-dark; }
});
.define-bg-color('light'; @bg-light-scale; @screens);
.define-bg-color('dark'; @bg-dark-scale; @screens);