From 5ee17b7e2207dfab6aeb4582e82957252d701147 Mon Sep 17 00:00:00 2001
From: Brad Simpson <brad.simpson@kineo.com>
Date: Wed, 22 May 2024 07:38:51 -0600
Subject: [PATCH] New: Add margin start and margin end column classes (fixes
 #504)

---
 less/project/columns.less | 54 +++++++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/less/project/columns.less b/less/project/columns.less
index 49b0de9d..e5d1c518 100644
--- a/less/project/columns.less
+++ b/less/project/columns.less
@@ -1,3 +1,8 @@
+// Custom column classes
+// e.g. 'col-sm-8 col-md-10'
+// min small viewport takes up 8 out of 12 columns
+// min medium viewport takes up 10 columns
+// if undefined, element defaults to 100% width
 .make-columns(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
   @media (min-width: @media-query) {
     .boxmenu-item.col-@{size}-@{iteration} {
@@ -11,13 +16,52 @@
   .make-columns(@size, @media-query, @count, (@iteration + 1));
 }
 
-// Custom classes
-// e.g. 'col-sm-8 col-md-10'
-// min small viewport takes up 8 out of 12 columns
-// min medium viewport takes up 10 columns
-// if undefined element defaults to 100% width
 .make-columns(xs, 0, 12); // deprecated: backward compatibility only
 .make-columns(sm, @device-width-small, 12);
 .make-columns(md, @device-width-medium, 12);
 .make-columns(lg, @device-width-large, 12);
 .make-columns(xl, @device-width-xlarge, 12);
+
+// Custom column starting margin classes
+// e.g. 'margin-start-sm-2 margin-start-md-1'
+// min small viewport indents 2 columns from the left (or right for RTL)
+// min medium viewport indents 1 column from the left (or right for RTL)
+.make-margin-start(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
+  @media (min-width: @media-query) {
+    .boxmenu-item.margin-start-@{size}-@{iteration} {
+      margin-inline-start: (@iteration * 100% / @count);
+    }
+    .component.margin-start-@{size}-@{iteration} {
+      margin-inline-start: (@iteration * 100% / @count);
+    }
+  }
+
+  .make-margin-start(@size, @media-query, @count, (@iteration + 1));
+}
+
+.make-margin-start(sm, @device-width-small, 12);
+.make-margin-start(md, @device-width-medium, 12);
+.make-margin-start(lg, @device-width-large, 12);
+.make-margin-start(xl, @device-width-xlarge, 12);
+
+// Custom column ending margin classes
+// e.g. 'margin-end-sm-2 margin-end-md-1'
+// min small viewport indents 2 columns from the right (or left for RTL)
+// min medium viewport indents 1 column from the right (or left for RTL)
+.make-margin-end(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) {
+  @media (min-width: @media-query) {
+    .boxmenu-item.margin-end-@{size}-@{iteration} {
+      margin-inline-end: (@iteration * 100% / @count);
+    }
+    .component.margin-end-@{size}-@{iteration} {
+      margin-inline-end: (@iteration * 100% / @count);
+    }
+  }
+
+  .make-margin-end(@size, @media-query, @count, (@iteration + 1));
+}
+
+.make-margin-end(sm, @device-width-small, 12);
+.make-margin-end(md, @device-width-medium, 12);
+.make-margin-end(lg, @device-width-large, 12);
+.make-margin-end(xl, @device-width-xlarge, 12);