Add LESS sources

Author: jissereitsma

view/frontend/web/css/source/_module.less

@@ -15,3 +15,5 @@
         }
     }
 };
+
+@import '_tailwind.less';

view/frontend/web/css/source/_tailwind.less

@@ -0,0 +1,29 @@
+@import 'function/generate-col-span.less';
+@import 'function/generate-grid-cols.less';
+@import 'function/generate-gap.less';
+@import 'function/generate-width.less';
+@import 'function/generate-padding.less';
+
+& when (@media-common = true) {
+    .grid { display: grid; }
+    .flex { display: flex; }
+
+    .generate-gaps(0, 12, 0.25rem);
+    .generate-col-span(0, 12, 1);
+    .generate-grid-cols(0, 12, 1);
+    //.generate-width(0, 12, 0.25rem);
+    .generate-padding(0, 24, 0.5, 0.25rem);
+}
+
+& when (@media-target = 'desktop') {
+    .md\:.grid {
+        display: grid;
+    }
+
+    .generate-gaps(0, 12, 0.25rem, ~'.md\:');
+    .generate-col-span(0, 12, 1, ~'.md\:');
+    .generate-grid-cols(0, 12, 1, ~'.md\:');
+    //.generate-width(0, 12, 0.25rem, ~'.md\:');
+    .generate-padding(0, 24, 0.5, 0.25rem, ~'.md\:');
+}
+

view/frontend/web/css/source/function/generate-col-span.less

@@ -0,0 +1,8 @@
+.generate-col-span(@from: 0; @to: 12; @step: 1; @prefix: ~'.') {
+    .-col-span-loop(@i) when (@i =< @to) {
+        @val: (@i * @step);
+        @{prefix}col-span-@{i} { grid-column: span @val / span @val; }
+        .-col-span-loop(@i + 1);
+    }
+    .-col-span-loop(@from);
+}

view/frontend/web/css/source/function/generate-gap.less

@@ -0,0 +1,10 @@
+.generate-gaps(@from: 0; @to: 12; @step: 0.25rem; @prefix: ~'.') {
+    .-gap-loop(@i) when (@i =< @to) {
+        @val: (@i * @step);
+        @{prefix}gap-@{i} { gap: @val; }
+        @{prefix}gap-x-@{i} { column-gap: @val; }
+        @{prefix}gap-y-@{i} { row-gap: @val; }
+        .-gap-loop(@i + 1);
+    }
+    .-gap-loop(@from);
+}

view/frontend/web/css/source/function/generate-grid-cols.less

@@ -0,0 +1,9 @@
+.generate-grid-cols(@from: 0; @to: 12; @step: 1; @prefix: ~'.') {
+    .-col-span-loop(@i) when (@i =< @to) {
+        @val: (@i * @step);
+        @suffix: if((@i = 0), '', ~"-@{i}");
+        @{prefix}grid-cols@{suffix} { grid-template-columns: repeat(@val, minmax(0, 1fr)); }
+        .-col-span-loop(@i + 1);
+    }
+    .-col-span-loop(@from);
+}

view/frontend/web/css/source/function/generate-padding.less

@@ -0,0 +1,15 @@
+.generate-padding(@from: 0; @to: 12; @step: 0.5; @stepUnit: 0.125rem; @prefix: ~'.') {
+    .-padding-loop(@i) when (@i =< @to) {
+        @val: (@i * @step);
+        @valUnit: (@i * @stepUnit);
+        @{prefix}p-@{i} { padding: @valUnit; }
+        @{prefix}pl-@{i} { padding-left: @valUnit; }
+        @{prefix}pr-@{i} { padding-right: @valUnit; }
+        @{prefix}pt-@{i} { padding-top: @valUnit; }
+        @{prefix}pb-@{i} { padding-bottom: @valUnit; }
+        @{prefix}px-@{i} { padding-left: @valUnit; padding-right: @valUnit; }
+        @{prefix}py-@{i} { padding-top: @valUnit; padding-bottom: @valUnit; }
+        .-padding-loop(@i + 1);
+    }
+    .-padding-loop(@from);
+}

view/frontend/web/css/source/function/generate-width.less

@@ -0,0 +1,8 @@
+.generate-width(@from: 0, @to: 12, @step: 0.25rem, @prefix: '.') {
+    .-width-loop(@i) when (@i =< @to) {
+        @val: (@i * @step);
+        @{prefix}w-@{i} { width: @val; }
+        .-width-loop(@i + 1);
+    }
+    .-width-loop(@from);
+}