diff --git a/hypha/public/funds/templates/public_funds/fund_page.html b/hypha/public/funds/templates/public_funds/fund_page.html index 5487fa051274e628b655fa7d6edcd686bf9ecb67..4a83c0a346a15bb72530829a9c95bbcd52fe2cf8 100644 --- a/hypha/public/funds/templates/public_funds/fund_page.html +++ b/hypha/public/funds/templates/public_funds/fund_page.html @@ -7,7 +7,7 @@ {% block content %} {% include "public_funds/includes/fund_apply_cta.html" with page=page apply_page=page.application_type %} <div class="wrapper"> - <section class="section section--main"> + <section class="section section--main section--list-straight-left"> {% if page.introduction %} <h4 class="heading heading--introduction"> diff --git a/hypha/public/funds/templates/public_funds/lab_page.html b/hypha/public/funds/templates/public_funds/lab_page.html index 051bffd335edfd414e99de410435cdc7a57e4255..7cd1cb76d204dfa23973d6476e4d2e2584f52597 100644 --- a/hypha/public/funds/templates/public_funds/lab_page.html +++ b/hypha/public/funds/templates/public_funds/lab_page.html @@ -7,7 +7,7 @@ {% block content %} {% include "public_funds/includes/lab_apply_cta.html" %} <div class="wrapper"> - <section class="section section--main section--top-bottom-space"> + <section class="section section--main section--list-straight-left section--top-bottom-space"> {% if page.icon %} {% image page.icon fill-100x100 class="image--float-small" %} {% endif %} diff --git a/hypha/static_src/src/sass/public/components/_list_straight_left.scss b/hypha/static_src/src/sass/public/components/_list_straight_left.scss new file mode 100644 index 0000000000000000000000000000000000000000..6ab251dfed834176da497f7a2118a10b13fb755e --- /dev/null +++ b/hypha/static_src/src/sass/public/components/_list_straight_left.scss @@ -0,0 +1,50 @@ +// Lists with a straight left margin. + +%ul-straight-left { + display: table; + list-style: none; + padding: 0; + + & > li { + display: table-row; + + &::before { + display: table-cell; + content: '\2022'; + padding-right: 1rem; + } + } +} + +%ol-straight-left { + display: table; + list-style: none; + padding: 0; + + & > li { + display: table-row; + counter-increment: table-ol; + + &::before { + display: table-cell; + content: counter(table-ol) '.'; + padding-right: 1rem; + text-align: right; + } + } +} + +%ul-straight-left--off { + display: block; + list-style: inherit; + + & > li { + display: list-item; + + &::before { + content: ''; + display: inline; + padding: inherit; + } + } +} diff --git a/hypha/static_src/src/sass/public/components/_section.scss b/hypha/static_src/src/sass/public/components/_section.scss index 3cb10db35a38d974f8f09f4766326216c286bbca..f0d75c5fe60bee0300f81273aa5980e9fe55d888 100644 --- a/hypha/static_src/src/sass/public/components/_section.scss +++ b/hypha/static_src/src/sass/public/components/_section.scss @@ -7,6 +7,16 @@ } } + &--list-straight-left { + ul { + @extend %ul-straight-left; + } + + ol { + @extend %ol-straight-left; + } + } + &--share { padding: 2rem 0; margin: 3rem 0; diff --git a/hypha/static_src/src/sass/public/main.scss b/hypha/static_src/src/sass/public/main.scss index b063ec3df706520361afef34b115676508286b9f..d97cf885fba686b4a76a5d7975bec9887f61be01 100644 --- a/hypha/static_src/src/sass/public/main.scss +++ b/hypha/static_src/src/sass/public/main.scss @@ -25,6 +25,7 @@ @import 'components/input'; @import 'components/link'; @import 'components/list'; +@import 'components/list_straight_left'; @import 'components/listing'; @import 'components/media-box'; @import 'components/messages';