From 96bd063cd11fdb183e5abe70fe7009c5538ea322 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 21 Dec 2020 15:23:09 +0100
Subject: [PATCH] Add list-straight-left styles to fund and lab pages.
---
.../templates/public_funds/fund_page.html | 2 +-
.../templates/public_funds/lab_page.html | 2 +-
.../components/_list_straight_left.scss | 50 +++++++++++++++++++
.../src/sass/public/components/_section.scss | 10 ++++
hypha/static_src/src/sass/public/main.scss | 1 +
5 files changed, 63 insertions(+), 2 deletions(-)
create mode 100644 hypha/static_src/src/sass/public/components/_list_straight_left.scss
diff --git a/hypha/public/funds/templates/public_funds/fund_page.html b/hypha/public/funds/templates/public_funds/fund_page.html
index 5487fa051..4a83c0a34 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 051bffd33..7cd1cb76d 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 000000000..6ab251dfe
--- /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 3cb10db35..f0d75c5fe 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 b063ec3df..d97cf885f 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';
--
GitLab