github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

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

GitOrigin-RevId: 9d951e2339a85cc89b14991bbde2bc4d4316852a
This commit is contained in:
Jessica Lawshe 2024-09-24 10:04:41 -05:00 committed by Copybot
parent d43efc2d7c
commit ecb0655241
4 changed files with 52 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

33
services/web/frontend/stylesheets/bootstrap-5/components/list.scss Normal file
View file

@ -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;
}
}

9
services/web/public/img/website-redesign/check-in-blue-circle.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1,018 B

9
services/web/public/img/website-redesign/check-in-green-circle.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 991 B