Add leading generator

This commit is contained in:
Adam Wathan 2017-08-04 14:35:12 -04:00
parent 26ae48eee5
commit b9612fbb74
3 changed files with 25 additions and 9 deletions

View File

@ -12,5 +12,6 @@
@import "generators/spacing-margin";
@import "generators/spacing-pull";
@import "generators/text-colors";
@import "generators/text-weights";
@import "generators/text-leading";
@import "generators/text-sizes";
@import "generators/text-weights";

View File

@ -0,0 +1,16 @@
.define-leading-utilities(@variants) {
.generate-utility-variants('leading'; @variants; {
line-height: extract(@__variant-value, 2);
});
}
.define-leading-utilities(@variants; none) {
.define-leading-utilities(@variants);
}
.define-leading-utilities(@variants; @screens) when not (@screens = none) {
.define-leading-utilities(@variants);
.generate-responsive-utility-variants('leading'; @variants; @screens; {
line-height: extract(@__variant-value, 2);
});
}

View File

@ -77,10 +77,13 @@
.define-text-colors(@text-colors; @screens);
// Line heights
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-loose { line-height: 2; }
@leading-scale:
'none' 1,
'tight' 1.25,
'normal' 1.5,
'loose' 2,
;
.define-leading-utilities(@leading-scale; @screens);
// Horizontal alignment
.text-center { text-align: center; }
@ -114,10 +117,6 @@
}
.responsive({
&leading-none { .leading-none; }
&leading-tight { .leading-tight; }
&leading-normal { .leading-normal; }
&leading-loose { .leading-loose; }
&text-center { .text-center; }
&text-left { .text-left; }
&text-right { .text-right; }