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

More generator work

Browse Source 
About to go down dark path of parameterized mixins.
This commit is contained in:
Adam Wathan 2017-08-02 08:51:24 -04:00
parent a0ddedb360
commit 06360a8094
7 changed files with 173 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/generators.less
View File

@ -1,2 +1,24 @@
.apply-match(@map; @search; @ruleset) {
@current: extract(extract(@map, 1), 1);
.apply-match(@map; @search; @current; @ruleset; 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) {
@current: extract(extract(@map, @i + 1), 1);
.apply-match(@map; @search; @current; @ruleset; @i + 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) {
& {
@__match: extract(extract(@map, @i), 2);
@ruleset();
}
}
@import "generators/backgrounds";
@import "generators/borders";
@import "generators/border-colors";
@import "generators/text-colors";
@import "generators/text-weights";
@import "generators/text-sizes";

0
src/generators/borders.less → src/generators/border-colors.less
View File

27
src/generators/text-colors.less Normal file
View File

@ -0,0 +1,27 @@
.generate-text-color-utility(@name; @variant; @color) when (@variant = default) {
.text-@{name} { color: @color; }
}
.generate-text-color-utility(@name; @variant; @color) when not (@variant = default) {
.text-@{name}-@{variant} { color: @color; }
}
.generate-text-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-text-color-utility(@color-name; @variant-name; @variant-color);
}
.generate-text-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-text-color-utility(@color-name; @variant-name; @variant-color);
.generate-text-color-utilities(@color-name; @color-variants; @i + 1);
}
.define-text-color(@color-name; @color-variants) {
.generate-text-color-utilities(@color-name; @color-variants);
}

25
src/generators/text-sizes.less Normal file
View File

@ -0,0 +1,25 @@
.generate-text-size-utility(@variant; @size) {
.text-@{variant} {
font-size: @size;
}
}
.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
@name: extract(@size-variants, 1);
@size: extract(@size-variants, 2);
.generate-text-size-utility(@name; @size);
}
.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
@variant: extract(@size-variants, @i);
@name: extract(@variant, 1);
@size: extract(@variant, 2);
.generate-text-size-utility(@name; @size);
.generate-text-size-utilities(@size-variants; @i + 1);
}
.define-text-sizes(@size-variants) {
.generate-text-size-utilities(@size-variants);
}

23
src/generators/text-weights.less Normal file
View File

@ -0,0 +1,23 @@
.generate-weight-utility(@variant; @weight) {
.text-@{variant} { font-weight: @weight; }
}
.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 1) {
@name: extract(@weight-variants, 1);
@weight: extract(@weight-variants, 2);
.generate-weight-utility(@name; @weight);
}
.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 2) {
@variant: extract(@weight-variants, @i);
@name: extract(@variant, 1);
@weight: extract(@variant, 2);
.generate-weight-utility(@name; @weight);
.generate-weight-utilities(@weight-variants; @i + 1);
}
.define-text-weights(@weight-variants) {
.generate-weight-utilities(@weight-variants);
}

111
src/utilities/spacing.less
View File

@ -34,49 +34,28 @@
14 @spacer-14,
15 @spacer-15;
.apply-match(@map; @search; @ruleset) {
@current: extract(extract(@map, 1), 1);
.apply-match(@map; @search; @current; @ruleset; 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) {
@current: extract(extract(@map, @i + 1), 1);
.apply-match(@map; @search; @current; @ruleset; @i + 1);
}
.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) {
& {
@__spacer-size: extract(extract(@map, @i), 2);
@ruleset();
}
}
.apply-spacer(@search; @ruleset) {
.apply-match(@spacer-map; @search; @ruleset);
}
.pt(@spacer) { .apply-spacer(@spacer, { padding-top: @__spacer-size; }); }
.pr(@spacer) { .apply-spacer(@spacer, { padding-right: @__spacer-size; }); }
.pb(@spacer) { .apply-spacer(@spacer, { padding-bottom: @__spacer-size; }); }
.pl(@spacer) { .apply-spacer(@spacer, { padding-left: @__spacer-size; }); }
.pt(@spacer) { .apply-match(@spacer-map, @spacer, { padding-top: @__match; }); }
.pr(@spacer) { .apply-match(@spacer-map, @spacer, { padding-right: @__match; }); }
.pb(@spacer) { .apply-match(@spacer-map, @spacer, { padding-bottom: @__match; }); }
.pl(@spacer) { .apply-match(@spacer-map, @spacer, { padding-left: @__match; }); }
.py(@spacer) {
.apply-spacer(@spacer, {
padding-top: @__spacer-size;
padding-bottom: @__spacer-size;
.apply-match(@spacer-map, @spacer, {
padding-top: @__match;
padding-bottom: @__match;
});
}
.px(@spacer) {
.apply-spacer(@spacer, {
padding-right: @__spacer-size;
padding-left: @__spacer-size;
.apply-match(@spacer-map, @spacer, {
padding-right: @__match;
padding-left: @__match;
});
}
.p(@spacer) {
.apply-spacer(@spacer, {
padding-top: @__spacer-size;
padding-right: @__spacer-size;
padding-bottom: @__spacer-size;
padding-left: @__spacer-size;
.apply-match(@spacer-map, @spacer, {
padding-top: @__match;
padding-right: @__match;
padding-bottom: @__match;
padding-left: @__match;
});
}
@ -147,29 +126,29 @@
.generate-responsive-padding-utilities(@i + 1);
}
.mt(@spacer) { .apply-spacer(@spacer, { margin-top: @__spacer-size; }); }
.mt(@spacer) { .apply-match(@spacer-map, @spacer, { margin-top: @__match; }); }
.mr(@spacer) { .apply-spacer(@spacer, { margin-right: @__spacer-size; }); }
.mb(@spacer) { .apply-spacer(@spacer, { margin-bottom: @__spacer-size; }); }
.ml(@spacer) { .apply-spacer(@spacer, { margin-left: @__spacer-size; }); }
.mr(@spacer) { .apply-match(@spacer-map, @spacer, { margin-right: @__match; }); }
.mb(@spacer) { .apply-match(@spacer-map, @spacer, { margin-bottom: @__match; }); }
.ml(@spacer) { .apply-match(@spacer-map, @spacer, { margin-left: @__match; }); }
.my(@spacer) {
.apply-spacer(@spacer, {
margin-top: @__spacer-size;
margin-bottom: @__spacer-size;
.apply-match(@spacer-map, @spacer, {
margin-top: @__match;
margin-bottom: @__match;
});
}
.mx(@spacer) {
.apply-spacer(@spacer, {
margin-right: @__spacer-size;
margin-left: @__spacer-size;
.apply-match(@spacer-map, @spacer, {
margin-right: @__match;
margin-left: @__match;
});
}
.m(@spacer) {
.apply-spacer(@spacer, {
margin-top: @__spacer-size;
margin-right: @__spacer-size;
margin-bottom: @__spacer-size;
margin-left: @__spacer-size;
.apply-match(@spacer-map, @spacer, {
margin-top: @__match;
margin-right: @__match;
margin-bottom: @__match;
margin-left: @__match;
});
}
@ -246,29 +225,29 @@
.generate-responsive-margin-utilities(@i + 1);
}
.pull-t(@spacer) { .apply-spacer(@spacer, { margin-top: ~"-@{__spacer-size}"; }); }
.pull-t(@spacer) { .apply-match(@spacer-map, @spacer, { margin-top: ~"-@{__match}"; }); }
.pull-r(@spacer) { .apply-spacer(@spacer, { margin-right: ~"-@{__spacer-size}"; }); }
.pull-b(@spacer) { .apply-spacer(@spacer, { margin-bottom: ~"-@{__spacer-size}"; }); }
.pull-l(@spacer) { .apply-spacer(@spacer, { margin-left: ~"-@{__spacer-size}"; }); }
.pull-r(@spacer) { .apply-match(@spacer-map, @spacer, { margin-right: ~"-@{__match}"; }); }
.pull-b(@spacer) { .apply-match(@spacer-map, @spacer, { margin-bottom: ~"-@{__match}"; }); }
.pull-l(@spacer) { .apply-match(@spacer-map, @spacer, { margin-left: ~"-@{__match}"; }); }
.pull-y(@spacer) {
.apply-spacer(@spacer, {
margin-top: ~"-@{__spacer-size}";
margin-bottom: ~"-@{__spacer-size}";
.apply-match(@spacer-map, @spacer, {
margin-top: ~"-@{__match}";
margin-bottom: ~"-@{__match}";
});
}
.pull-x(@spacer) {
.apply-spacer(@spacer, {
margin-right: ~"-@{__spacer-size}";
margin-left: ~"-@{__spacer-size}";
.apply-match(@spacer-map, @spacer, {
margin-right: ~"-@{__match}";
margin-left: ~"-@{__match}";
});
}
.pull(@spacer) {
.apply-spacer(@spacer, {
margin-top: ~"-@{__spacer-size}";
margin-right: ~"-@{__spacer-size}";
margin-bottom: ~"-@{__spacer-size}";
margin-left: ~"-@{__spacer-size}";
.apply-match(@spacer-map, @spacer, {
margin-top: ~"-@{__match}";
margin-right: ~"-@{__match}";
margin-bottom: ~"-@{__match}";
margin-left: ~"-@{__match}";
});
}

52
src/utilities/text.less
View File

@ -35,31 +35,39 @@
// Sizes
.text-xs { font-size: @font-size-xs; }
.text-sm { font-size: @font-size-sm; }
.text-base { font-size: @font-size-base; }
.text-lg { font-size: @font-size-lg; }
.text-xl { font-size: @font-size-xl; }
.text-2xl { font-size: @font-size-2xl; }
.text-3xl { font-size: @font-size-3xl; }
.define-text-sizes(
xs @font-size-xs,
sm @font-size-sm,
base @font-size-base,
lg @font-size-lg,
xl @font-size-xl,
2xl @font-size-2xl,
3xl @font-size-3xl
;);
// Weights
.text-hairline { font-weight: @font-weight-hairline; }
.text-thin { font-weight: @font-weight-thin; }
.text-regular { font-weight: @font-weight-regular; }
.text-medium { font-weight: @font-weight-medium; }
.text-bold { font-weight: @font-weight-bold; }
.define-text-weights(
hairline @font-weight-hairline,
thin @font-weight-thin,
regular @font-weight-regular,
medium @font-weight-medium,
bold @font-weight-bold
;);
// Colors
.text-light { color: @text-light; }
.text-light-soft { color: @text-light-soft; }
.text-light-softer { color: @text-light-softer; }
.text-light-softest { color: @text-light-softest; }
.define-text-color(light;
default @text-light,
soft @text-light-soft,
softer @text-light-softer,
softest @text-light-softest
;);
.text-dark { color: @text-dark; }
.text-dark-soft { color: @text-dark-soft; }
.text-dark-softer { color: @text-dark-softer; }
.text-dark-softest { color: @text-dark-softest; }
.define-text-color(dark;
default @text-dark,
soft @text-dark-soft,
softer @text-dark-softer,
softest @text-dark-softest
;);
// Line heights
.leading-none { line-height: 1; }
@ -104,8 +112,8 @@
&text-base { .text-base; }
&text-lg { .text-lg; }
&text-xl { .text-xl; }
&text-2xl { .text-2xl; }
&text-3xl { .text-3xl; }
// &text-2xl { .text-2xl; }
// &text-3xl { .text-3xl; }
&text-hairline { .text-hairline; }
&text-thin { .text-thin; }
&text-regular { .text-regular; }