From 7dcab6e0c3e8bff80c132a958731c0c95a118b63 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 10 Jul 2020 09:12:43 +0200
Subject: [PATCH] Improve list style
---
gulpfile.js | 1 +
.../lists/dense-unordered-list.mustache | 8 ++++
.../unordered-list-leading-variants.mustache | 42 ++++++++++++++++++
.../lists/unordered-list-sizes.mustache | 42 ++++++++++++++++++
source/css/atoms/list.pcss | 44 ++++++++++++++-----
5 files changed, 126 insertions(+), 11 deletions(-)
create mode 100644 source/_patterns/00-atoms/lists/dense-unordered-list.mustache
create mode 100644 source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache
create mode 100644 source/_patterns/00-atoms/lists/unordered-list-sizes.mustache
diff --git a/gulpfile.js b/gulpfile.js
index 2a59c0a..51186eb 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -41,6 +41,7 @@ const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
/grid-cols-\d\d?/, // grid columns
/col-span-\d\d?/, // grid spans
/row-span-\d\d?/, // grid spans
+ /grid-flow/, // grid flow
/(sm|md|lg|xl)(\\:)text-.*/,
// /text-*/,
/ico--*/, // icons
diff --git a/source/_patterns/00-atoms/lists/dense-unordered-list.mustache b/source/_patterns/00-atoms/lists/dense-unordered-list.mustache
new file mode 100644
index 0000000..6014045
--- /dev/null
+++ b/source/_patterns/00-atoms/lists/dense-unordered-list.mustache
@@ -0,0 +1,8 @@
+<ul class="unordered-list unordered-list--dense">
+ <li>{{ headline.short }}</li>
+ <li>{{ headline.short }}</li>
+ <li>{{ headline.short }}</li>
+ <li>{{ headline.short }}</li>
+ <li>{{ headline.short }}</li>
+ <li>{{ headline.short }}</li>
+</ul>
diff --git a/source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache b/source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache
new file mode 100644
index 0000000..9348b4c
--- /dev/null
+++ b/source/_patterns/00-atoms/lists/unordered-list-leading-variants.mustache
@@ -0,0 +1,42 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list leading-tight">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list leading-snug">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list leading-normal">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list leading-relaxed">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/lists/unordered-list-sizes.mustache b/source/_patterns/00-atoms/lists/unordered-list-sizes.mustache
new file mode 100644
index 0000000..c7ad18a
--- /dev/null
+++ b/source/_patterns/00-atoms/lists/unordered-list-sizes.mustache
@@ -0,0 +1,42 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list text-xs">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list text-sm">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list text-lg">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+ <div class="inline-flex flex-col space-y-2">
+ <ul class="unordered-list text-xl">
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ <li>{{ excerpt.short }}</li>
+ </ul>
+ </div>
+</div>
diff --git a/source/css/atoms/list.pcss b/source/css/atoms/list.pcss
index c1d80f6..f82a4ed 100644
--- a/source/css/atoms/list.pcss
+++ b/source/css/atoms/list.pcss
@@ -5,37 +5,59 @@
.unordered-list,
.content-block ul {
+ @apply grid gap-4;
+
li {
- @apply relative flex items-center;
+ @apply grid items-start;
+
+ grid-gap: .5em;
+ grid-template-columns: auto 1fr;
&:before {
- @apply text-black pr-2;
+ @apply text-black;
font-family: "pirati-ui";
content: "\e919";
- font-size: 7px;
+ font-size: .5em;
font-weight: 600;
+ margin-top: .5em;
}
}
- &.text-sm li:before {
- font-size: 5px;
+ &.leading-tight li:before {
+ margin-top: .8em;
+ }
+
+ &.leading-snug li:before {
+ margin-top: .6em;
+ }
+
+ &.leading-normal li:before {
+ margin-top: .7em;
+ }
+
+ &.leading-relaxed li:before {
+ margin-top: .6em;
}
}
+.unordered-list--dense {
+ @apply row-gap-2;
+}
+
.unordered-list--linked {
+ li {
+ grid-template-columns: auto 1fr auto;
+ }
+
li:after {
- @apply text-black pl-2 ml-auto;
+ @apply text-black;
font-family: "pirati-ui";
content: "\e923";
- font-size: 10px;
+ font-size: 1em;
font-weight: 300;
}
-
- &.text-sm li:after {
- font-size: 8px;
- }
}
.ordered-list,
--
GitLab