New: Add margin start and margin end column classes (fixes #504)

adaptlearning · May 22, 2024 · 5ee17b7 · 5ee17b7
1 parent ead597c
commit 5ee17b7
Showing 1 changed file with 49 additions and 5 deletions.
diff --git 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);