Merge pull request #22538 from overleaf/jel-cms-tabs-as-list

[web] CMS - Add support for rendering `Layout | Tab Group` as a linkable list instead of tabs

GitOrigin-RevId: f86e78abd10029085ee8cdf4ffc7dd6e0ffd5300

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

@@ -66,6 +66,17 @@
     }
   }
 
+  .linkable-list-container {
+    .row-with-id {
+      margin-top: var(--spacing-12);
+
+      h2:first-child {
+        // css specificity problem. this is more specific than header overrides below
+        margin-top: 0;
+      }
+    }
+  }
+
   // 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} {
@@ -84,7 +95,9 @@
       h4,
       h5,
       h6 {
-        margin-top: var(--#{$spacing-option});
+        margin-top: var(
+          --#{$spacing-option}
+        ) !important; // needed for :first-child specificity
       }
     }
   }
@@ -497,6 +510,47 @@
       }
     }
   }
+
+  .table-of-contents {
+    --link-color: var(--neutral-70);
+    --link-visited-color: var(--neutral-70);
+
+    border-top: 1px solid var(--neutral-30);
+    border-bottom: 1px solid var(--neutral-30);
+    padding: var(--spacing-09) 0;
+    margin-right: var(--spacing-13);
+
+    h2 {
+      @include heading-xs;
+
+      color: var(--green-60);
+      margin: 0;
+      margin-bottom: var(--spacing-06);
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin-top: var(--spacing-06);
+      }
+
+      li:first-child {
+        margin-top: 0;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: 500;
+
+      &:hover {
+        text-decoration: none !important;
+      }
+    }
+  }
 }
 
 .icon-with-content {