Merge pull request #20759 from overleaf/jel-cms-col-gap

[web] Replace margin on `Style | Group` with gap on `Layout | Grid`

GitOrigin-RevId: 297a5c9f6953a22818de31062f8ad5258db4691b

services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss

@@ -2,6 +2,29 @@
   CMS Generated Pages:
   /about/*, /contact, /legal, /blog/*, /for/*, /events/*
 */
+
+@mixin section-row-custom-gap($spacing) {
+  // only update the padding between columns
+  // not the padding before the first column
+  // or the padding after the last column
+  // rows can be nested, so only select direct col in row
+
+  > div[class*='col-'] {
+    &:not(:first-child, :last-child) {
+      padding-left: $spacing;
+      padding-right: $spacing;
+    }
+
+    &:first-child {
+      padding-right: $spacing;
+    }
+
+    &:last-child {
+      padding-left: $spacing;
+    }
+  }
+}
+
 .cms-page {
   .sales-contact-form-left-column {
     .sales-contact-form-heading-title {
@@ -481,6 +504,38 @@
       align-self: center;
     }
   }
+
+  .section-row-gap-spacing-16 {
+    @include section-row-custom-gap(calc(var(--spacing-16) / 2));
+  }
+
+  .section-row-gap-spacing-15 {
+    @include section-row-custom-gap(calc(var(--spacing-15) / 2));
+  }
+
+  .section-row-gap-spacing-14 {
+    @include section-row-custom-gap(calc(var(--spacing-14) / 2));
+  }
+
+  .section-row-gap-spacing-13 {
+    @include section-row-custom-gap(calc(var(--spacing-13) / 2));
+  }
+
+  .section-row-gap-spacing-12 {
+    @include section-row-custom-gap(calc(var(--spacing-12) / 2));
+  }
+
+  .section-row-gap-spacing-11 {
+    @include section-row-custom-gap(calc(var(--spacing-11) / 2));
+  }
+
+  .section-row-gap-spacing-10 {
+    @include section-row-custom-gap(calc(var(--spacing-10) / 2));
+  }
+
+  .section-row-gap-spacing-09 {
+    @include section-row-custom-gap(calc(var(--spacing-09) / 2));
+  }
 }
 
 // Mobile layout options depdendent on mobile breakpoint
@@ -509,49 +564,6 @@
   }
 }
 
-// TODO: will be deprecated and gap option used instead
-@include media-breakpoint-up(lg) {
-  .desktop-left-margin-sm {
-    margin-left: var(--spacing-05);
-  }
-
-  .desktop-left-margin-md {
-    margin-left: var(--spacing-07);
-  }
-
-  .desktop-left-margin-lg {
-    margin-left: var(--spacing-09);
-  }
-
-  .desktop-left-margin-xl {
-    margin-left: var(--spacing-10);
-  }
-
-  .desktop-left-margin-xxl {
-    margin-left: var(--spacing-11);
-  }
-
-  .desktop-right-margin-sm {
-    margin-right: var(--spacing-05);
-  }
-
-  .desktop-right-margin-md {
-    margin-right: var(--spacing-07);
-  }
-
-  .desktop-right-margin-lg {
-    margin-right: var(--spacing-09);
-  }
-
-  .desktop-right-margin-xl {
-    margin-right: var(--spacing-10);
-  }
-
-  .desktop-right-margin-xxl {
-    margin-right: var(--spacing-11);
-  }
-}
-
 .top-margin-sm {
   margin-top: var(--spacing-05);
 }