Merge pull request #20572 from overleaf/jel-cms-styled-list

[web] Render styled lists on `Element | Content`

GitOrigin-RevId: 9d951e2339a85cc89b14991bbde2bc4d4316852a

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -10,6 +10,7 @@
 @import 'badge';
 @import 'form';
 @import 'input-suggestions';
+@import 'list';
 @import 'modal';
 @import 'quote';
 @import 'footer';

services/web/frontend/stylesheets/bootstrap-5/components/list.scss

@@ -0,0 +1,33 @@
+@mixin list-checkmark {
+  $icon-size: 24px;
+
+  ul {
+    list-style: none;
+    margin-top: var(--spacing-06);
+    padding-left: 0;
+  }
+
+  li {
+    background-size: $icon-size $icon-size;
+    margin-bottom: var(--spacing-05);
+    padding-left: calc(var(--spacing-05) + $icon-size);
+  }
+}
+
+.list-checkmark-green {
+  @include list-checkmark;
+
+  li {
+    background: url('../../../../public/img/website-redesign/check-in-green-circle.svg')
+      no-repeat left top;
+  }
+}
+
+.list-checkmark-blue {
+  @include list-checkmark;
+
+  li {
+    background: url('../../../../public/img/website-redesign/check-in-blue-circle.svg')
+      no-repeat left top;
+  }
+}

services/web/public/img/website-redesign/check-in-blue-circle.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect y="0.315918" width="24" height="24" rx="12" fill="#F1F4F9"/>
+    <mask id="mask0_1753_19400" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="21">
+        <rect x="2" y="2.31592" width="20" height="20" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_1753_19400)">
+        <path d="M9.95842 14.9409L17.0209 7.87842C17.1876 7.71175 17.3855 7.62842 17.6147 7.62842C17.8438 7.62842 18.0418 7.71175 18.2084 7.87842C18.3751 8.04508 18.4584 8.243 18.4584 8.47217C18.4584 8.70133 18.3751 8.89925 18.2084 9.06592L10.5418 16.7326C10.3751 16.8993 10.1806 16.9826 9.95842 16.9826C9.7362 16.9826 9.54176 16.8993 9.37509 16.7326L5.79176 13.1493C5.62509 12.9826 5.54523 12.7847 5.55217 12.5555C5.55912 12.3263 5.64592 12.1284 5.81259 11.9618C5.97926 11.7951 6.17717 11.7118 6.40634 11.7118C6.63551 11.7118 6.83342 11.7951 7.00009 11.9618L9.95842 14.9409Z" fill="#6597E0"/>
+    </g>
+</svg>

services/web/public/img/website-redesign/check-in-green-circle.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" rx="12" fill="#80CB9C"/>
+    <mask id="mask0_3314_14780" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
+        <rect x="2" y="2" width="20" height="20" fill="#D9D9D9"/>
+    </mask>
+    <g mask="url(#mask0_3314_14780)">
+        <path d="M9.95842 14.625L17.0209 7.5625C17.1876 7.39583 17.3855 7.3125 17.6147 7.3125C17.8438 7.3125 18.0418 7.39583 18.2084 7.5625C18.3751 7.72917 18.4584 7.92708 18.4584 8.15625C18.4584 8.38542 18.3751 8.58333 18.2084 8.75L10.5418 16.4167C10.3751 16.5833 10.1806 16.6667 9.95842 16.6667C9.7362 16.6667 9.54176 16.5833 9.37509 16.4167L5.79176 12.8333C5.62509 12.6667 5.54523 12.4688 5.55217 12.2396C5.55912 12.0104 5.64592 11.8125 5.81259 11.6458C5.97926 11.4792 6.17717 11.3958 6.40634 11.3958C6.63551 11.3958 6.83342 11.4792 7.00009 11.6458L9.95842 14.625Z" fill="#0F2715"/>
+    </g>
+</svg>