Merge pull request #21468 from overleaf/jel-cms-group-spacing

[web] Spacing options for `Style | Group`  and `Element | Content` on CMS

GitOrigin-RevId: 78d7d8e29be81a1526e4eeceb50fe66846ed8a05

services/web/frontend/stylesheets/bootstrap-5/foundations/spacing.scss

@@ -16,6 +16,9 @@ $spacing-13: 64px;
 $spacing-14: 72px;
 $spacing-15: 80px;
 $spacing-16: 96px;
+$all-spacings: spacing-00, spacing-01, spacing-02, spacing-03, spacing-04,
+  spacing-05, spacing-06, spacing-07, spacing-08, spacing-09, spacing-10,
+  spacing-11, spacing-12, spacing-13, spacing-14, spacing-15, spacing-16;
 
 :root {
   --spacing-00: #{$spacing-00};

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

@@ -66,6 +66,43 @@
     }
   }
 
+  // create .paragraphs-margin-spacing-00, .paragraphs-margin-spacing-01, .paragraphs-margin-spacing-02, .paragraphs-margin-spacing-03, .paragraphs-margin-spacing-04, .paragraphs-margin-spacing-05, .paragraphs-margin-spacing-06, .paragraphs-margin-spacing-07, .paragraphs-margin-spacing-08, .paragraphs-margin-spacing-09, .paragraphs-margin-spacing-10, .paragraphs-margin-spacing-11, .paragraphs-margin-spacing-12, .paragraphs-margin-spacing-13, .paragraphs-margin-spacing-14, .paragraphs-margin-spacing-15, .paragraphs-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .paragraphs-margin-#{$spacing-option} {
+      p {
+        margin-bottom: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  // create .headers-top-margin-spacing-00, .headers-top-margin-spacing-01, .headers-top-margin-spacing-02, .headers-top-margin-spacing-03, .headers-top-margin-spacing-04, .headers-top-margin-spacing-05, .headers-top-margin-spacing-06, .headers-top-margin-spacing-07, .headers-top-margin-spacing-08, .headers-top-margin-spacing-09, .headers-top-margin-spacing-10, .headers-top-margin-spacing-11, .headers-top-margin-spacing-12, .headers-top-margin-spacing-13, .headers-top-margin-spacing-14, .headers-top-margin-spacing-15, .headers-top-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .headers-top-margin-#{$spacing-option} {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-top: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  // create .headers-bottom-margin-spacing-00, .headers-bottom-margin-spacing-01, .headers-bottom-margin-spacing-02, .headers-bottom-margin-spacing-03, .headers-bottom-margin-spacing-04, .headers-bottom-margin-spacing-05, .headers-bottom-margin-spacing-06, .headers-bottom-margin-spacing-07, .headers-bottom-margin-spacing-08, .headers-bottom-margin-spacing-09, .headers-bottom-margin-spacing-10, .headers-bottom-margin-spacing-11, .headers-bottom-margin-spacing-12, .headers-bottom-margin-spacing-13, .headers-bottom-margin-spacing-14, .headers-bottom-margin-spacing-15, .headers-bottom-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .headers-bottom-margin-#{$spacing-option} {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-bottom: var(--#{$spacing-option});
+      }
+    }
+  }
+
   .card + .card {
     margin-top: var(--spacing-09);
   }
@@ -406,6 +443,33 @@
     &.top-margin-xxl {
       margin-top: var(--spacing-11);
     }
+
+    // create .top-margin-spacing-00, .top-margin-spacing-01, .top-margin-spacing-02, .top-margin-spacing-03, .top-margin-spacing-04, .top-margin-spacing-05, .top-margin-spacing-06, .top-margin-spacing-07, .top-margin-spacing-08, .top-margin-spacing-09, .top-margin-spacing-10, .top-margin-spacing-11, .top-margin-spacing-12, .top-margin-spacing-13, .top-margin-spacing-14, .top-margin-spacing-15, .top-margin-spacing-16
+    @each $spacing-option in $all-spacings {
+      &.top-margin-#{$spacing-option} {
+        margin-top: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  .card {
+    @each $spacing-option in $all-spacings {
+      // create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
+      &.padding-#{$spacing-option} {
+        .card-body {
+          padding: var(--#{$spacing-option});
+        }
+      }
+    }
+  }
+
+  .no-card {
+    @each $spacing-option in $all-spacings {
+      // create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
+      &.padding-#{$spacing-option} {
+        padding: var(--#{$spacing-option});
+      }
+    }
   }
 }