archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add basic background generator mixins

Browse Source
This commit is contained in:
Adam Wathan 2017-08-01 17:04:27 -04:00
parent 5a09eb6369
commit 3d98e3a1a1
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/utilities/backgrounds.less
View File

@ -10,6 +10,30 @@
@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; }