diff --git a/src/generators.less b/src/generators.less index ba063dae7..c5a3803fc 100644 --- a/src/generators.less +++ b/src/generators.less @@ -10,4 +10,6 @@ @import "generators/text-colors"; @import "generators/text-weights"; @import "generators/text-sizes"; -@import "generators/spacing"; +@import "generators/spacing-padding"; +@import "generators/spacing-margin"; +@import "generators/spacing-pull"; diff --git a/src/generators/spacing-margin.less b/src/generators/spacing-margin.less new file mode 100644 index 000000000..5dbd782b8 --- /dev/null +++ b/src/generators/spacing-margin.less @@ -0,0 +1,85 @@ +.generate-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@margin-scale)) { + @spacer: extract(@margin-scale, @i); + + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); + + .define-class(~"mt-@{n}", { margin-top: @size; }); + .define-class(~"mr-@{n}", { margin-right: @size; }); + .define-class(~"mb-@{n}", { margin-bottom: @size; }); + .define-class(~"ml-@{n}", { margin-left: @size; }); + .define-class(~"my-@{n}", { + margin-top: @size; + margin-bottom: @size; + }); + .define-class(~"mx-@{n}", { + margin-right: @size; + margin-left: @size; + }); + .define-class(~"m-@{n}", { + margin-top: @size; + margin-right: @size; + margin-bottom: @size; + margin-left: @size; + }); + + .generate-margin-utilities(@margin-scale; @i + 1); +} + +.generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; @i: 1) when (@i <= length(@margin-scale)) { + @prefix: ~"@{screen}\:"; + @spacer: extract(@margin-scale, @i); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); + + @media (min-width: @screen-width) { + .define-class(~"@{prefix}mt-@{n}", { margin-top: @size; }); + .define-class(~"@{prefix}mr-@{n}", { margin-right: @size; }); + .define-class(~"@{prefix}mb-@{n}", { margin-bottom: @size; }); + .define-class(~"@{prefix}ml-@{n}", { margin-left: @size; }); + .define-class(~"@{prefix}my-@{n}", { + margin-top: @size; + margin-bottom: @size; + }); + .define-class(~"@{prefix}mx-@{n}", { + margin-right: @size; + margin-left: @size; + }); + .define-class(~"@{prefix}m-@{n}", { + margin-top: @size; + margin-right: @size; + margin-bottom: @size; + margin-left: @size; + }); + } + + .generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; (@i + 1)); +} + +.generate-responsive-margin-utilities(@margin-scale; @screens; @i: 1) when (@i <= length(@screens)) { + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 2); + + .generate-screen-margin-utilities(@margin-scale; @name; @screen-width); + + @media (min-width: @screen-width) { + @prefix: ~"@{name}\:"; + .@{prefix}mx-auto { margin-left: auto; margin-right: auto; } + } + + .generate-responsive-margin-utilities(@margin-scale; @screens; @i + 1); +} + +.define-margin-utilities(@margin-scale) { + .generate-margin-utilities(@margin-scale); +} + +.define-margin-utilities(@margin-scale; none) { + .define-margin-utilities(@margin-scale); +} + +.define-margin-utilities(@margin-scale; @screens) when not (@screens = none) { + .define-margin-utilities(@margin-scale); + .generate-responsive-margin-utilities(@margin-scale; @screens); +} diff --git a/src/generators/spacing-padding.less b/src/generators/spacing-padding.less new file mode 100644 index 000000000..03a703fc5 --- /dev/null +++ b/src/generators/spacing-padding.less @@ -0,0 +1,79 @@ +.generate-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@padding-scale)) { + @spacer: extract(@padding-scale, @i); + + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); + + .define-class(~"pt-@{n}", { padding-top: @size; }); + .define-class(~"pr-@{n}", { padding-right: @size; }); + .define-class(~"pb-@{n}", { padding-bottom: @size; }); + .define-class(~"pl-@{n}", { padding-left: @size; }); + .define-class(~"py-@{n}", { + padding-top: @size; + padding-bottom: @size; + }); + .define-class(~"px-@{n}", { + padding-right: @size; + padding-left: @size; + }); + .define-class(~"p-@{n}", { + padding-top: @size; + padding-right: @size; + padding-bottom: @size; + padding-left: @size; + }); + + .generate-padding-utilities(@padding-scale; @i + 1); +} + +.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) { + @prefix: ~"@{screen}\:"; + @spacer: extract(@padding-scale, @i); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); + + @media (min-width: @screen-width) { + .define-class(~"@{prefix}pt-@{n}", { padding-top: @size; }); + .define-class(~"@{prefix}pr-@{n}", { padding-right: @size; }); + .define-class(~"@{prefix}pb-@{n}", { padding-bottom: @size; }); + .define-class(~"@{prefix}pl-@{n}", { padding-left: @size; }); + .define-class(~"@{prefix}py-@{n}", { + padding-top: @size; + padding-bottom: @size; + }); + .define-class(~"@{prefix}px-@{n}", { + padding-right: @size; + padding-left: @size; + }); + .define-class(~"@{prefix}p-@{n}", { + padding-top: @size; + padding-right: @size; + padding-bottom: @size; + padding-left: @size; + }); + } + + .generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; (@i + 1)); +} + +.generate-responsive-padding-utilities(@padding-scale; @screens; @i: 1) when (@i <= length(@screens)) { + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 2); + + .generate-screen-padding-utilities(@padding-scale; @name; @screen-width); + .generate-responsive-padding-utilities(@padding-scale; @screens; @i + 1); +} + +.define-padding-utilities(@padding-scale) { + .generate-padding-utilities(@padding-scale); +} + +.define-padding-utilities(@padding-scale; none) { + .define-padding-utilities(@padding-scale); +} + +.define-padding-utilities(@padding-scale; @screens) when not (@screens = none) { + .define-padding-utilities(@padding-scale); + .generate-responsive-padding-utilities(@padding-scale; @screens); +} diff --git a/src/generators/spacing-pull.less b/src/generators/spacing-pull.less new file mode 100644 index 000000000..4dfa11b4d --- /dev/null +++ b/src/generators/spacing-pull.less @@ -0,0 +1,79 @@ +.generate-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@pull-scale)) { + @spacer: extract(@pull-scale, @i); + + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); + + .define-class(~"pull-t-@{n}", { margin-top: ~"-@{size}"; }); + .define-class(~"pull-r-@{n}", { margin-right: ~"-@{size}"; }); + .define-class(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; }); + .define-class(~"pull-l-@{n}", { margin-left: ~"-@{size}"; }); + .define-class(~"pull-y-@{n}", { + margin-top: ~"-@{size}"; + margin-bottom: ~"-@{size}"; + }); + .define-class(~"pull-x-@{n}", { + margin-right: ~"-@{size}"; + margin-left: ~"-@{size}"; + }); + .define-class(~"pull-@{n}", { + margin-top: ~"-@{size}"; + margin-right: ~"-@{size}"; + margin-bottom: ~"-@{size}"; + margin-left: ~"-@{size}"; + }); + + .generate-pull-utilities(@pull-scale; @i + 1); +} + +.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) { + @prefix: ~"@{screen}\:"; + @spacer: extract(@pull-scale, @i); + @n: extract(@spacer, 1); + @size: extract(@spacer, 2); + + @media (min-width: @screen-width) { + .define-class(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; }); + .define-class(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; }); + .define-class(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; }); + .define-class(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; }); + .define-class(~"@{prefix}pull-y-@{n}", { + margin-top: ~"-@{size}"; + margin-bottom: ~"-@{size}"; + }); + .define-class(~"@{prefix}pull-x-@{n}", { + margin-right: ~"-@{size}"; + margin-left: ~"-@{size}"; + }); + .define-class(~"@{prefix}pull-@{n}", { + margin-top: ~"-@{size}"; + margin-right: ~"-@{size}"; + margin-bottom: ~"-@{size}"; + margin-left: ~"-@{size}"; + }); + } + + .generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; (@i + 1)); +} + +.generate-responsive-pull-utilities(@pull-scale; @screens; @i: 1) when (@i <= length(@screens)) { + @screen: extract(@screens, @i); + @name: extract(@screen, 1); + @screen-width: extract(@screen, 2); + + .generate-screen-pull-utilities(@pull-scale; @name; @screen-width); + .generate-responsive-pull-utilities(@pull-scale; @screens; @i + 1); +} + +.define-pull-utilities(@pull-scale) { + .generate-pull-utilities(@pull-scale); +} + +.define-pull-utilities(@pull-scale; none) { + .define-pull-utilities(@pull-scale); +} + +.define-pull-utilities(@pull-scale; @screens) when not (@screens = none) { + .define-pull-utilities(@pull-scale); + .generate-responsive-pull-utilities(@pull-scale; @screens); +} diff --git a/src/generators/spacing.less b/src/generators/spacing.less deleted file mode 100644 index 372c33ad2..000000000 --- a/src/generators/spacing.less +++ /dev/null @@ -1,206 +0,0 @@ -.generate-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@padding-scale)) { - @spacer: extract(@padding-scale, @i); - - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); - - .define-class(~"pt-@{n}", { padding-top: @size; }); - .define-class(~"pr-@{n}", { padding-right: @size; }); - .define-class(~"pb-@{n}", { padding-bottom: @size; }); - .define-class(~"pl-@{n}", { padding-left: @size; }); - .define-class(~"py-@{n}", { - padding-top: @size; - padding-bottom: @size; - }); - .define-class(~"px-@{n}", { - padding-right: @size; - padding-left: @size; - }); - .define-class(~"p-@{n}", { - padding-top: @size; - padding-right: @size; - padding-bottom: @size; - padding-left: @size; - }); - - .generate-padding-utilities(@padding-scale; @i + 1); -} - -.generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; @i: 1) when (@i <= length(@padding-scale)) { - @prefix: ~"@{screen}\:"; - @spacer: extract(@padding-scale, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); - - @media (min-width: @screen-width) { - .define-class(~"@{prefix}pt-@{n}", { padding-top: @size; }); - .define-class(~"@{prefix}pr-@{n}", { padding-right: @size; }); - .define-class(~"@{prefix}pb-@{n}", { padding-bottom: @size; }); - .define-class(~"@{prefix}pl-@{n}", { padding-left: @size; }); - .define-class(~"@{prefix}py-@{n}", { - padding-top: @size; - padding-bottom: @size; - }); - .define-class(~"@{prefix}px-@{n}", { - padding-right: @size; - padding-left: @size; - }); - .define-class(~"@{prefix}p-@{n}", { - padding-top: @size; - padding-right: @size; - padding-bottom: @size; - padding-left: @size; - }); - } - - .generate-screen-padding-utilities(@padding-scale; @screen; @screen-width; (@i + 1)); -} - -.generate-responsive-padding-utilities(@padding-scale; @i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 2); - - .generate-screen-padding-utilities(@padding-scale; @name; @screen-width); - .generate-responsive-padding-utilities(@padding-scale; @i + 1); -} - -.generate-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@margin-scale)) { - @spacer: extract(@margin-scale, @i); - - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); - - .define-class(~"mt-@{n}", { margin-top: @size; }); - .define-class(~"mr-@{n}", { margin-right: @size; }); - .define-class(~"mb-@{n}", { margin-bottom: @size; }); - .define-class(~"ml-@{n}", { margin-left: @size; }); - .define-class(~"my-@{n}", { - margin-top: @size; - margin-bottom: @size; - }); - .define-class(~"mx-@{n}", { - margin-right: @size; - margin-left: @size; - }); - .define-class(~"m-@{n}", { - margin-top: @size; - margin-right: @size; - margin-bottom: @size; - margin-left: @size; - }); - - .generate-margin-utilities(@margin-scale; @i + 1); -} - -.generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; @i: 1) when (@i <= length(@margin-scale)) { - @prefix: ~"@{screen}\:"; - @spacer: extract(@margin-scale, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); - - @media (min-width: @screen-width) { - .define-class(~"@{prefix}mt-@{n}", { margin-top: @size; }); - .define-class(~"@{prefix}mr-@{n}", { margin-right: @size; }); - .define-class(~"@{prefix}mb-@{n}", { margin-bottom: @size; }); - .define-class(~"@{prefix}ml-@{n}", { margin-left: @size; }); - .define-class(~"@{prefix}my-@{n}", { - margin-top: @size; - margin-bottom: @size; - }); - .define-class(~"@{prefix}mx-@{n}", { - margin-right: @size; - margin-left: @size; - }); - .define-class(~"@{prefix}m-@{n}", { - margin-top: @size; - margin-right: @size; - margin-bottom: @size; - margin-left: @size; - }); - } - - .generate-screen-margin-utilities(@margin-scale; @screen; @screen-width; (@i + 1)); -} - -.generate-responsive-margin-utilities(@margin-scale; @i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 2); - - .generate-screen-margin-utilities(@margin-scale; @name; @screen-width); - - @media (min-width: @screen-width) { - @prefix: ~"@{name}\:"; - .@{prefix}mx-auto { margin-left: auto; margin-right: auto; } - } - - .generate-responsive-margin-utilities(@margin-scale; @i + 1); -} - -.generate-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@pull-scale)) { - @spacer: extract(@pull-scale, @i); - - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); - - .define-class(~"pull-t-@{n}", { margin-top: ~"-@{size}"; }); - .define-class(~"pull-r-@{n}", { margin-right: ~"-@{size}"; }); - .define-class(~"pull-b-@{n}", { margin-bottom: ~"-@{size}"; }); - .define-class(~"pull-l-@{n}", { margin-left: ~"-@{size}"; }); - .define-class(~"pull-y-@{n}", { - margin-top: ~"-@{size}"; - margin-bottom: ~"-@{size}"; - }); - .define-class(~"pull-x-@{n}", { - margin-right: ~"-@{size}"; - margin-left: ~"-@{size}"; - }); - .define-class(~"pull-@{n}", { - margin-top: ~"-@{size}"; - margin-right: ~"-@{size}"; - margin-bottom: ~"-@{size}"; - margin-left: ~"-@{size}"; - }); - - .generate-pull-utilities(@pull-scale; @i + 1); -} - -.generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; @i: 1) when (@i <= length(@pull-scale)) { - @prefix: ~"@{screen}\:"; - @spacer: extract(@pull-scale, @i); - @n: extract(@spacer, 1); - @size: extract(@spacer, 2); - - @media (min-width: @screen-width) { - .define-class(~"@{prefix}pull-t-@{n}", { margin-top: ~"-@{size}"; }); - .define-class(~"@{prefix}pull-r-@{n}", { margin-right: ~"-@{size}"; }); - .define-class(~"@{prefix}pull-b-@{n}", { margin-bottom: ~"-@{size}"; }); - .define-class(~"@{prefix}pull-l-@{n}", { margin-left: ~"-@{size}"; }); - .define-class(~"@{prefix}pull-y-@{n}", { - margin-top: ~"-@{size}"; - margin-bottom: ~"-@{size}"; - }); - .define-class(~"@{prefix}pull-x-@{n}", { - margin-right: ~"-@{size}"; - margin-left: ~"-@{size}"; - }); - .define-class(~"@{prefix}pull-@{n}", { - margin-top: ~"-@{size}"; - margin-right: ~"-@{size}"; - margin-bottom: ~"-@{size}"; - margin-left: ~"-@{size}"; - }); - } - - .generate-screen-pull-utilities(@pull-scale; @screen; @screen-width; (@i + 1)); -} - -.generate-responsive-pull-utilities(@pull-scale; @i: 1) when (@i <= length(@screens)) { - @screen: extract(@screens, @i); - @name: extract(@screen, 1); - @screen-width: extract(@screen, 2); - - .generate-screen-pull-utilities(@pull-scale; @name; @screen-width); - .generate-responsive-pull-utilities(@pull-scale; @i + 1); -} diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less index b43b5bad2..c8ccb8434 100644 --- a/src/utilities/spacing.less +++ b/src/utilities/spacing.less @@ -22,14 +22,11 @@ @margin-scale: @spacing-scale; @pull-scale: @spacing-scale; -.generate-padding-utilities(@padding-scale); -.generate-margin-utilities(@margin-scale); -.generate-pull-utilities(@pull-scale); -.mx-auto { margin-left: auto; margin-right: auto; } +.define-padding-utilities(@padding-scale; @screens); +.define-margin-utilities(@margin-scale; @screens); +.define-pull-utilities(@pull-scale; @screens); -.generate-responsive-padding-utilities(@padding-scale); -.generate-responsive-margin-utilities(@margin-scale); -.generate-responsive-pull-utilities(@pull-scale); +.mx-auto { margin-left: auto; margin-right: auto; } .responsive({ &mx-auto { .mx-auto; } });