Merge pull request #2190 from OpenTechFund/enhancement/list-straight-left

Add list-straight-left styles to fund and lab pages.

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">

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 %}

hypha/static_src/src/sass/public/components/_list_straight_left.scss

+// 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;
+        }
+    }
+}

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;

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';